Getting Started with WebSockets &

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

HTTP polling vs. WebSockets
HTTP polling vs. WebSockets

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.

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

A basic 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 by passing it to the http object. Now we are able to call various methods of 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

  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

Written by

Full Stack Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store