Build a Chat App Using React, Express, Socket.io & NodeJS

Real-time web chat application.

In this article, I’ll be showing you how to build a web chat application using React, Express, socket.io, and Node.js.

The motive behind this application:

Join. Chat. Leave. No Records.

Let’s start with the definition of a chat application.

Chat App is a software that enables the messages to be sent and received between different clients ( or users ).

Before diving into the chat application, we must understand the basic concepts and frameworks behind the same which are React, socket.io, express.js, and Node.js.

What is React?

React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

What is socket.io?

Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js.

What is Express or Express.js?

Express.js, or simply Express, is a web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

What is Node.js?

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser.

The chat application is divided into two parts:

1. Client: This will be responsible for the front end of the application.
2. Server: This will be responsible for the back end portion of the application.

Now, that we have a basic idea about the different frameworks and libraries used in this application, let’s start with the development phase.

Quick Note: I have used visual studio for this application, but you can use any editor of your choice

Development Phase

Create a directory (let’s say “chat-app”) in which we’ll be storing both our client and server directories.

In the terminal run the react command:

npx create-react-app client

&

Create a folder “server” and navigate into it and run this command in the terminal:

npm init

After this, your “chat-app” directory should like somewhat like this:

There are some external dependencies which we will be using in this app, so let us install them one-by-one.

In the client terminal, run ( or install ):

npm install react-emoji, react-router, react-scroll-to-bottom, socket.io-client

In the server terminal, run ( or install ):

npm install cors, express, nodemon, socket.io

Quick Note: cors : ( Cross-origin resource ) sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos.

Let’s dive into the functionalities of our application.

Photo from en.unesco.org

Quick Note: I’ll be explaining only the important functionalities of our chat app.

Server-Side Code

Server file structure

• server/router.js

On the server-side, we only need one route to connect to the client-side and the rest will be taken care of by the client-side.

• server/index.js

Here, “io.on(‘connect’, (socket) =>{}” is used for incoming socket connections. Once there is a new connection, then we’ll be attaching different event listeners to the stream.

For example,

socket.emit(‘message’) is used to greet the user whenever a new user joins the chat room.

socket.emit(‘sendMessage’) is used to send messages from one client to another client(user).

socket.emit(‘disconnect’) is called when a user quits the chat room.

• server/users.js

The server adds the new connection to the room (adding a user to the room) and appends the list of users list with the new connection name and assigns a unique id to the user.

The server will also check for parameters like whether the new user name is different from all the users in that particular room, if not then the user is asked to enter the room with a different name.

When a connection leaves the room then the user’s list is updated and the name of that connection(user) is removed. But this does not affect the others chatting the group.

Whenever a user connects to a room, a predefined message greets the user in the room.

socket.io basically handles all the functionalities, and help us chat in real-time.

Client-Side Code

Client file structure

• client/src/App.js

Two different routes are required in this app, one for joining the chat group and the other being the chat group itself.

• client/src/components/Join/Join.js

In this, event.preventDefault() check for any error like if the username already exists or not. If there is no such error then the user is connected to the room he/she wishes to enter ( to={`/chat?name=${name}&room=${room}`} ).

• client/src/components/Chat/Chat.js

This piece of code handles all the incoming messages from different users and enables us to effectively chat in real-time. This also serves as the connection point between client and server. It helps us emitting (displaying) the various message from the users on the screen using rendering.

The rest of the files mainly include the UI of the app and I’m not gonna bore you with that as you can visit my repository regarding it.

Features of the App:

• Multiple users can connect to the same room and chat.
• The app is based on Snapchat as when you leave the room the messages automatically get deleted.
• The app allows you to send text messages and emojis ;)
• No duplicate users can join the same room which means no two users with the same name can join the same room.
• Multiple rooms can function simultaneously.
• The app is purely based on JS so none of your chat data is saved anywhere. User privacy is important.

Conclusion

In this article, I have explained the important modules and their use in building the real-time web chat application. You must be wondering about the final product, if yes then visit the link.

If you require the code then visit my repository on Github(do give a star if you like it).

Thanks for reading this article. I hope it’s helpful to you all!