Develop a chat application using React, Express and Socket.IO

Start with the basics

*Note: Prior to starting working with this tutorial you must have at least Node.js 10 or higher installed on your machine. You can find the installation guide here 

Installing Node.js dependencies

First, we're going to use Express as the API that will handle every request made by the front-end:

Now that we have installed our core library we can proceed to create the Node file that will execute all the logic of our application. Create a server.js File in the root directory of your back-end project:

Inside server.js place the following code:

Now that you have placed the code inside server.js, let’s quickly make sure everything is working by running the following command:

If everything is in order, the message “listening on *:8080” should appear in the console.

Socket.IO

Now we can proceed to install the library which can handle the web sockets connections:

Let’s create our first socket listener in the server.js file:

Creating the Front End

The first step to create the front end of our applications will be to initialize the React application. You can easily do this with the command:

Now that the code base is initialized, we can proceed to install the Socket.IO library for our front end. Just use the client library of socket.io with:

Connecting the client with the server

If this is your first time using Socket.IO, this part will be exciting since we are enabling real-time communication between a single client and our back end using web sockets. In the ~/App.js include the Socket.IO client and create a variable to store the socket object like this:

Now that we have our socket variable, we can start listening to events emitted by our back end. In order to be notified when the client is connected we have to tweak our previous code in the server.js file:

With the  socket.emit  function, custom events can be sent from the back end to the front end through the newly established socket connection. This method will only send messages between the specific client that was recently connected. Sending messages to all the clients connected will be explained later. 

In order to receive those notifications from the back end, we need to listen for the events created there. For example, we are emitting the connection event to the client as soon it opens a new connection, so we have to put the same label in our front to execute some code when this happens:

In the browser it should look like this:

Building the chat

With the installation complete, we can focus on building the UI of our application and the logic behind it. 

In order to create a standalone components, we have to create a folder called “chat” with the following structure: 

Chat.js

ChannelList.js

Channel.js

chat.scss

To see the chat as a full window component, you might want to stylize the root element to fill the whole screen. To do so, you will have to modify the index.css file and add this:

At this point the application should look something like this

Now that we have an interface structure, we might want to define the messages panel. For this, we have to create a new component called MessagesPane.js  and Message.js.

Message.js

MessagesPanel.js

In order to adjust the styles of the application, we have to make some changes to our chat.scss file. It should look like this:

After these changes are made, we need to introduce the new panel into the Chat.js file:

Developing the logic

The interface has its basic form. Now it’s time to start developing some logic to send and receive messages. 

Fetch the channels

We need to retrieve the current channel's information. For this, we have to fetch this from the back end. In server.js, we can add:

For the front, modify the Chat.js file and add this function:

With the code above the information for the channels should be displayed in the application like this:

You are now connected with the back end via websocket and http. For real time communication, we have to define some listeners and emit some events in order to update the information of every channel. Selecting a channel should trigger an event that the back end will handle.

The front end needs to handle these events as well. To capture the events we have to use the same event name that the back end emits and vice versa. When the client hits the channel, an event must be sent to the back end to calculate the number of participants and broadcast to all the current sockets that a new user entered the channel.

Chat.js

server.js

With this logic implemented, the application now captures the events emitted from the client and the server. 

Sending Messages

It’s time to start sending some specific messages over the websocket. To accomplish this, we have to capture the information in our textbox and then submit it by clicking the send button. When the click event is captured, we have to make sure that we can send all the information related to the message. In this case the information will be:

• senderName: The id of the socket sending the message.
• id: The id of the message which is going to be the current timestamp.
• text: The text captured in the input.
• channel_id: The id of the channel where the message was sent to.
  

Chat.js

For the back the integration is simple, as we only have to broadcast the messages received.

The final result should look like this:

The full code can be found here:

• Front-end
• Back-end

Disclaimer

Here at FullStack Labs, our UI/UX designers, React developers, and Node.js developers all follow a playbook and apply coding best practices such as those found here. The previous guide was intended only to explain a simple way to communicate between the front end and the back end of a single application and makes no claim as to best practices around React nor Node development.