Getting Started with WebSockets & Socket.io

Think about some of your favorite applications or websites. It might be a multiplayer game, a social media app, or Google Suite apps like Docs or Sheets. These apps all have something in common. They use sockets to communicate between clients.

These open connections are called WebSockets and they are used in many of the most popular applications around today. Let’s dive deeper into exactly what WebSockets are, where are they used, and how to implement them.

What Are WebSockets?

“WebSocket is a communications protocol for a persistent, bi-directional, full duplex TCP connection from a user’s web browser (or other client side application) to a server.” — Wikipedia

To break that down, when a request is made from a client to a server via a WebSocket, the server receives that request as a normal HTTP request, but with an “Upgrade” header. This header lets the server know that the client wants to make a WebSocket connection. If the server accepts the connection, a WebSocket handshake is made. With this upgraded header, the client and server are able to maintain an open connection to transmit information back and forth. This is because instead of requiring a client to send a request before the server can respond, once the connection is made, the server will send off any information as it receives it.

Compare HTTP and WebSocket

Standard HTTP protocol, on the other hand, is a unidirectional protocol. With HTTP, when a client requests a resource, the server responds with a matching response. This means any data sent from the server must first be requested by the client. Before WebSockets, there were a few ways around this unidirectional protocol. Long-polling is a workaround where the client makes a request, but the server is set on a timeout until new data is available before it sends its response. Then it immediately sends out a new request to wait again. The drawbacks of long-polling are that it is much more intensive on the server and the reliability of responses sent back decreases when there are multiple clients requesting data simultaneously.

WebSockets fix the issues that HTTP protocol face. WebSockets hold open its connection between the server and client, eliminating the need to continuously open and close between requests and responses.

Socket.io

Socket.io is a JavaScript implementation of WebSockets. Server-side socket.io can be used with NodeJS, while the client-side can be used with vanilla JavaScript or any framework. To install socket.io, simply run npm install socket.io.

A basic socket.io configuration looks something like this:

Above, you can see that I have set up a simple Express app to run my server. I initialize the new io instance of socket.io by passing it to the http object. Now we are able to call various methods of socket.io to create connections.

Now, let's make a basic client-side socket setup:

Now we have a client-side and server-side making a WebSocket connection! These code snippets are from a basic collaborative code editor. When one browser window types into the text field, any other open clients will see those changes occur in real-time. This is the power of WebSockets.

Basic Flow

The handleChange function is called in the onChange event of the input field, causing the socket to emit those changes. The way socket.io knows which messages to listen for is the first argument after the method called. For example, our update-content message:

1. The client makes a change to the document, causing the handleChange function to be called.
2. socket.emit('update-content', newValue) sends the newValue to the server through the open connection they have made.
3. The server receives the message because it is listening for the same message: socket.on('update-content', content => ...)
4. Once the server receives it, it then emits that changed content to all clients connected to the server: socket.emit('update-content', content)

To Recap

That is how easy WebSockets can be with socket.io! WebSockets have many uses: social media feeds to keep updating in real-time so you keep seeing new content and stay on them for far too long, multiplayer games use WebSockets to have seamless gameplay where all users see the same things happen in real-time, collaborative editing like in my example above, and many more. Play around with WebSockets and see what uses you can come up with!