Socket.io is a JS library that uses WebSockets protocol to allow bi-directional communication between server and client. It is popular because it offers out-of-the-box features that are not available in WebSockets alone. Also, in case WebSockets is not supported, Socket.io has the option to fall back to long polling to keep your connection active across all clients.

To get started, make sure you npm install socket.io. Also, create three files: the server-side file, the client-side file, and the HTML file being served to the browser. In my examples, I call these files server.js, index.html, and client.js.

These are the steps to use Socket.io:
1. Create a server
2. Initiate socket on server-side
3. Initiate socket on client-side
4. Set up event listeners and emit functions!

Create a server in the server-side file. In my example, I created an Express server but a simple HTTP server works too.

// server.js
const express = require('express');
const app = express();

const clientPath = `${__dirname}`;

app.use(express.static(clientPath));

app.get('/', (req, res) => {
  res.sendFile(`${clientPath}/index.html`);
});

const PORT = process.env.PORT || 5000;

// server instance
const server = app.listen(PORT, () => {
  console.log(`Listening on port: ${PORT}`);
});

Next, add sockets to both the server-side and client-side because together, they act like a communication bridge. To set up a socket on the server: import the socket.io library using the ‘require’ keyword, pass in your server instance, and set up the connection event listener. When the client-side socket is added, the connection event listener allows any client that connects to have access to the connection event listener’s callback function which holds all socket event listeners (I explain socket event listeners later):

// server.js
const socketio = require('socket.io');

// sets up socket
const io = socketio(server);

// connection event listener
io.on('connection', socket => {

/* add your socket listeners here */

});

To set up a socket on the client-side: import the ‘socket-client’ library into your HTML file, then import the client-side file. Then, in your client-side file, invoke io to complete the bridge. Now, when a connection is made, the connection event listener in the server file will trigger.

<-- index.html -->
<script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script>
____________________________________________________________________

// client.js
const socket = io();

/* add regular event listeners here */

/* add sockets event listeners here */

Then, you will need to create socket listeners for both the client and server. Socket event listeners pick up messages that cross the bridge. Use ‘socket.on(‘insert destination name’, callback)’ to create a socket event listener and assign it a name. The callback function is invoked when the socket event listener is triggered. To trigger a socket event listener, we use emit functions like this ‘socket.emit(‘insert destination name’, data, …)’. Emit functions tell your messages where to go, and what to send. In the emit function, make sure you use the name of the socket event listener that you want to trigger. You can pass as many arguments as you want in a single emit function.

// server.js
io.on('connection', socket => {

socket.on('give me a name', (string, int, fn) => {

/* io.emit will trigger all connected client sockets.
         Remember, clients can also have socket event listeners */

io.emit('client socket name', 'any data types here')
   })

});
____________________________________________________________________

// client.js

// after the name(string), you can pass any data types
socket.emit('give me a name', 'string', 10, function)

// client socket listener
socket.on('client socket name', (string) => {
   /* here is where I would use the data received from one connected
      client and display it to this client */
})

Let’s imagine a chat application to solidify what we’ve learned. Mary, John, and David are all using the same chat app. Mary types a message and hits the submit button which triggers an event listener that uses ‘socket.emit’. ‘ socket.emit’ takes Mary’s message and triggers the socket event listener on the server. The server socket event listener will then trigger connected client sockets using ‘io.emit’. From there, connected clients will run DOM manipulation that displays Mary’s message to David, John, and Mary’s screens.

These resources help you use different emit functions:
https://stackoverflow.com/questions/32674391/io-emit-vs-socket-emit
https://socket.io/docs/emit-cheatsheet/

See below for my full code and explanations. Feel free to clone these files from my GitHub Repo and try it out. As always, if you have questions reach out to me on LinkedIn!

Start Using Socket.io in 4 Minutes was originally published in Webtips on Medium, where people are continuing the conversation by highlighting and responding to this story.

I graduated from this program at the end of March this year and it was a great experience. I am writing this article because I wanted to share my thoughts on the program for others who are interested in applying.

In this article, I will discuss:

• How I chose the Grace Hopper Program
• How I prepared for the application, assessment, and interview
• How I prepared for the program before it started
• What I gained from completing the program

You don’t need much prior experience to get into a boot camp and start coding. What you do need is an eagerness to learn and curiosity. I started learning Javascript on FreeCodeCamp and Codecademy in September of last year. I explored these two online resources for a month when my friend suggested that I apply to a coding boot camp. Boot camp would allow me to progress faster by providing me with a structured curriculum, mentors, and a network to jump-start my career. After comparing curriculums and costs for several boot camps, I picked Grace Hopper for two reasons. I liked the deferred tuition model that allows students to pay tuition after they found employment and that the tuition cost was comparable or less expensive than other popular boot camps like General Assembly, App Academy, and Flatiron School. In terms of curriculum, they were all about the same. App Academy also teaches you Ruby as well as javascript, but I preferred to spend my time mastering one language instead of dividing my time between two.

To be accepted into the program, I needed to complete an online assessment and answer some personal questions with my application. These consisted of a series of short coding challenges and questions about why I would be a good candidate for Grace Hopper. After I submitted the non-technical portion of the application, I took the practice assessment to understand how I needed to prepare. At the time I was super nervous about the online assessment but now I can tell you what you need to do to succeed. You must have a basic knowledge of Javascript (40% or more course completion on CodeAcademy) and be able to solve some coding challenges (7 kyu level katas on CodeWars) within a certain amount of time. I don’t remember exactly how many questions and how much time you’re given for the online assessment. I just prepared until I felt confident and bit the bullet. Prior to the application, I spent my days on CodeWars practicing and timing myself to make sure I could ace the assessment. After Grace Hopper reviewed my application and online assessment, they schedule me for an in-person remote interview which included three more live coding questions. I continued to prepare by working on katas and was feeling pretty good because I had made it that far. On the day of the interview, I answered the first two questions easily but then I was asked to solve a question with recursion. Being completely new to programming, I had not heard of recursion up to that point. The interviewer explained it to me but it was so new and sudden. Needless to say, I did not complete that question on my own, but I was still accepted into the program because I was able to answer the first two questions. They replied to me and from there I had two months before the program start date(January).

The program started in January, but we were given foundational material to study and checkpoints to complete the December before. In order to prepare for the program in the fullest, I recommend reviewing the materials in-depth to deeply understand work-flow basics like command-line interface(CLI), Git(version control), how to debug, and so much more. As a word of advice, the more exposure you have to coding the better your learning experience at Grace Hopper will be. In addition to the foundational materials, I also completed the Javascript course on Codecademy to make sure I was prepared with everything Javascript related. At the time, I was clicking through the lessons on Codecademy and didn’t have a complete understanding of what I was being asked to do for each prompt. During the program we reviewed the same concepts as Codecademy but in-depth (objects, promises, await-async, and more). That’s when it all came together, it was helpful to have the same concepts explained by different sources.

The first half of the program was called the junior phase which consisted of live lectures and pair-programming exercises to reinforce the material. We learned how to use Javascript libraries like Express to create RESTful API and React to create single-page applications. Junior phase went by fast and we always felt like we needed to go back and review. But, rest assured, the second half of the program, called the senior phase, put the knowledge we gained to practice. Senior phase consisted of individual and group projects, computer science fundamentals, and technical interview prep called REACTO. Unlike prior cohorts, mine took place during a pandemic. We made the transition to remote lectures and working on group projects remotely, so we didn’t have the advantage of whiteboarding together. We had to take advantage of online applications like Figma, Slack, and the GitHub project board to collaborate. I missed my classmates but I like to think that that was in preparation for any remote jobs in the future.

My biggest takeaways were making new friendships, learning to collaborate in small groups or as pairs, and gaining a superpower. The program was tough and moved really fast. I wasn’t given time to procrastinate but, I still learned a lot. Everyone’s experience here will vary but I am sure most of my classmates felt the same. Now my job search journey begins and I will surely update you all on that once I land my first position.

Feel free to reach out to me on LinkedIn if you have any questions!

“You are given a singly linked list and positions m and n. Write a function reverseBetween to reverse the linked list from position m to n.”

Note: 1 ≤ m ≤ n ≤ length of list

Example:
  input = {3, {5, {1, {6, {7, {2, {null}}}}}}}, m = 2, n = 5
  output = {3, {7, {6, {1, {5, {2, {null}}}}}}}

Edge Cases:
// input is null
  input = {} 
  output = null

// m & n are equal
  input = {4, {7, {null}}}, m = 1, n = 1,
  output = same as input

// m is position 1 which means head will need to be reassigned 
  input = {4, {7, {null}}}, m = 1, n = 2
  output = {7, {4, {null}}}

In this article, we solved this problem recursively. If you want to see the iterative approach, check out Hilary’s article here: Reverse a Linked List II: Part 1

This approach consists of two parts: reversing part of the linked list and connecting the ends of the sublists to the original.

Let’s talk about how to reverse an entire linked list first.

In the code above, we traversed the linked list by recursively calling the function with the next node until the next node is null, which is the base case. A variable h is assigned to the last node in the list because the last node needs to become the first node. With each call on the call stack, the head pointer references a different node in the list, in the order we traversed the list. As the calls finish executing and leave the stack, you can imagine it is as if the head pointer is traversing backward. To change the direction of just two nodes (head and head.next), we assigned head.next’s .next property to equal head (Line 6). This is how we made head and head.next point to each other.

However, this created a loop where two nodes were pointing at each other. We dealt with this by reassigning head to point to null (line 7).

Here’s a visual to help clarify what line 6 & 7 do:

Now that we understand how to reverse a linked list, we will walk through the solution and how to connect the reversed sublist to the original list.

Instead of recursively calling the function on the next node, we decremented m and n (Line 9) because the base case is n = 1 (Line 4). When n = 1, we finished traversing and started reversing. We also stored a pointer referencing the node after the nth position (Line 5) because we needed to connect it to the node at the mth position (Line 15). When we reversed the sublist, the mth node became the nth node and vice-versa. Similar to reversing the entire linked list, the head of the reversed sublist was continuously returned (Line 17) until we reached the mth position. Then, we connected the node before the mth position to variable r, the head node of the reversed sublist (Line 21). Finally, we returned head which is the first node of our list to complete the exercise.

Feel free to comment if you have any questions.

Reverse a Linked List II: Part 2 was originally published in Journey to becoming an Algoat on Medium, where people are continuing the conversation by highlighting and responding to this story.