Using Web Sockets with Socket.io

A visual representation of Web Sockets and how they transmit information to multiple clients. Source: [https://camo.githubusercontent.com/1e743964859eb56f68a762a0ee890c325b6ba95e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a5148464d4551476f62564352353575655f49356f62772e706e67]

Brief History of Client-Server Connections

The web was originally built around the request/response paradigm of HTTP, which consisted of the user requesting data from the client-side in order to receive a response with that data on the server-side. This was a problem because it required user interaction in order to load new data. The server was unable to send data to the client when new data was available. Eventually, technologies such as long polling came along where it created the illusion of a server initiating a connection by opening a HTTP connection to the server and kept it open until sending a response. However, this technology had one major flaw: it carried high latency for its applications.

The Rise of Web Sockets

The WebSocket API is an advanced technology that allows for an open two way “socket” connection which is interactive between a client and a server. This technology enables a persistent communication channel over a single TCP connection between the two parties and can send data back and forth at any time with low latency.

Introduction to Socket.io

Socket.io is a JavaScript library that enables WebSocket connections which consists of a Node.js server and a JavaScript client.

Source: [https://socket.io/images/bidirectional-communication.png]

You can think of socket.io as a “wrapper” around the WebSocket API, which will first try to establish a WebSocket connection if possible, and will fall back on HTTP long polling if not.

Setting Up the Server and Client Code

Before using the socket.io library, you need to install the two separate dependencies, one for the client and one for the server:

// server-side library
npm install socket.io
// client-side library
npm install socket.io-client

Here is a basic server setup using socket.io and express:

Each .on event listener corresponds to a .emit method that is sent from the client to the server and vice versa. The ‘connection’ and ‘disconnect’ events are automatically emitted from the client when a connection is established and disconnected, which will then trigger the .on handler in the socket server.

Here is a basic client setup using socket.io-client:

Once the socket client is connected or disconnected to the socket server, the ‘connect’ or ‘disconnect’ events are emitted from the socket server and then triggers the .on handlers in the socket client.

Chat App Example

Here is an example of how socket.io can be used to make a basic chat app:

Note: socket.broadcast.emit() will emit the data to everyone but the sender. For additional info on emitting methods: [https://socket.io/docs/emit-cheatsheet/]

Assuming that Redux is used to store the current state of a user and their chat messages, this is the flow for sending and receiving a message:

1. The sender posts a message which calls a thunk creator.
2. In the thunk code block, a HTTP request is made to post the message to the database.
3. The message is then dispatched to the action creator and updates the redux store for the sender.
4. The socket connection is used to emit the message to the socket server.
5. The socket server receives the message and broadcasts the message to all the other sockets excluding the sender.
6. The other client sockets receive the message.
7. The received message is dispatched to an action creator which updates the Redux state for each user.

A Few Use Cases of Web Sockets

1. Chat App

Sockets can be used to give real-time notifications and send or receive messages.

2. Multiplayer game

Sockets can be used to send data back and forth for multiplayer games. For example, the location of each player can be sent through a socket connection to update their location to other players of the game.

3. Collaborative Editing

Sockets can be used with collaborative editing to send and receive any changes that were made on a document with low latency.

Conclusion

Socket.io is an amazing technology that can be used to build applications that can help people collaborate together in real-time.