Simple SocketIO implementation

using react and express

Photo by Tim Mossholder on Unsplash

Introduction to socketIO -

Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server.

SocketIO setup consists of —

• A Node server
• Javascript client library for browser. (There are client implementations in other langauges as well)

How socketIO works — The client will try to establish a WebSocket connection if possible, and will fall back on HTTP long polling if not.

This explanation introduces two protocols of communication:

• Websocket —

The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

• HTTP long polling —

Web app developers can implement a technique called HTTP long polling, where the client polls the server requesting new information. The server holds the request open until new data is available. Once available, the server responds and sends the new information. When the client receives the new information, it immediately sends another request, and the operation is repeated. This effectively emulates a server push feature.

To summarize —

• SocketIO first attempts to set up a two way interactive communication session (websocket).
• If that doesn’t work — It sets up a request-response session with long waits, which sort of mimicks the previous way of communication.

This setup gives developers a robust channel of communication to work with.

A couple of very interesting and useful features of socketIO are —

• Namespaces and
• Rooms.

We start our exploration from API. That requires us to scaffold a basic express server.

Socket IO API setup

We install following packages —

npm i express cors socket.io

We create a server.js in our root folder and start by creating an express server instance.

express server setup

Then, we use server object, to hook in our socketIO api.

socketIO server setup

Everything is set up properly, time to create our communication setup. In this demo, I am sending across timestamp information to client every second.

socketIO connection handle

If you notice, when we socket.emit we pass socket.id as the first parameter. This serves as a unique room in our setup.

Complete server.js is as below.

We run the server the same way as express server —

Set up nodemon — npm i -D nodemon and then nodemon server.js .

Socket IO client Setup

We start with scaffolding a basic react application —

npx create-react-app socketIO-client .

We install socket.io-client package which will handle socketIO connection with API for us.

npm i socket.io-client

Clean up the App.js and start building client.

First up, we set up client —

socketIOClient set up

Then, we integrate it with our hooks to save incoming time stamp messages in state and display the updated state through mapping.

We also set up a toggle to turn connection on and off.

where handleSocket is

The whole app.jsis as below (sans CSS).

This, in summary, is a way to implement socketIO using express and react.

Since we are using socket.id as a unique channel, we can open up multiple browser tabs and see that indeed every instance of client is using unique socket.id to connect with the server.

We can see the connections in action in our nodemon log since we are logging every connection and disconnection.