Check out this comprehensive tutorial to understand how to build a real-time chat app with Express, ReactJS, and Socket.IO from scratch to end.

1. How to Build
Real-time Chat
App with
Express, ReactJS,
and Socket.IO?
www.bacancytechnology.com

2. I have always been very interested in
learning how the live user interactions in
chat applications work? Such web
applications always excite me to explore
more. To quench my thirst for knowledge, I
started reading blogs and watching
tutorials. After getting my hands on
building a chat app with Express, ReactJS,
and Socket.IO, I decided to write a blog on
it, as it was once said by Margaret Fuller, “If
you have the knowledge, let others lit their
candles in it.”

3. Table of Index
1. Overview
2. What is Socket.IO? And how does it
work?
3. How to build the chat app with Express,
ReactJS, and Socket.IO?
4. Conclusion

4. Overview

5. It might seem quite challenging when you
read the topic – How to build a Chat App
with Express, React, and Socket.io? This
blog will surely take care of that challenge,
and I’ll try my best to make it as simple as
possible. So, let’s take the challenge and
move ahead with a positive quote I read
somewhere –
“We don’t grow when things are easy. We
grow when we face challenges.”
Before starting the coding part, I would like
to give some preliminary information about
What is Socket.IO? You can skip this part
and head towards the coding section if
you’re familiar with Socket.IO already.

6. What is
Socket.IO?
And How
Does it Work?

7. Socket.IO was developed for real-time
communication and live user-interaction. It
was a Javascript library build in 2010. As the
documentation of Socket.IO states –
Socket.IO is a library that enables real-time,
bidirectional, and event-based
communication between the browser and
the server.
With the help of Engine.IO, Socket.IO
establishes the connection and permits
bidirectional communication between
client and server. The bidirectional
communication takes place only when the
client and server both have Socket.IO
integrated. It transfers data in various
forms, but the most likely in JSON format.

8. Socket.IO transfers data from the client of
the particular server to the server, and then
that server transmits it to other clients. This
is how the transfer of information takes
place.
I hope you now have a better understanding
of Socket.IO. You can visit its
documentation to start your Socket.IO
tutorial. Finally, it’s time to start coding.

9. How to Build
the Chat App
with Express,
ReactJS, and
Socket.IO?

10. I assume that you have Node.js V10 or
higher version installed on your system. If
not, then click here to install.
Starting with the basics
I’m creating here the main folder and then
initiating it using NPM-
mkdir chat-app
cd chat-app
npm init
Setting up Express Server and Socket.IO
Once you click enter for all the options,
install the Express library and Socket.IO for
handling socket connections.
npm install --save express socket.io

11. After installing the Express and Socket.IO
library, we will create a file to implement
our new application’s logic.
touch server.js
Now we will write the express server code
in the server.js file. Open your chat-app and
start editing it.

12. //server.js
let express = require('express')
let http = require('http')
let socket_IO = require('socket.io')
const PORT = 8001
let app = express()
let server = http.Server(app)
let io = socketIO(server)
io.on('connection', (socket) => {
console.log('User is connected sucessfully')
socket.on('disconnect', () => {
console.log('Sorry! User is unfortunately
disconnected')
})
})
server.listen(PORT, () => {
console.log(`Running on port ${port}.`);
});

13. Now, by running the below-mentioned
command, ensure the code is working as
expected.
node server.js
Your console should display – Running on
port 8001.
Close the server using ctrl+c
On hitting the URL – http:// localhost: 8001,
you won’t see anything as we still need to
work on our front-end. So far, we are a bit
done with the socket listener in our sever.js
file.
Now let’s move on to my favorite part, i.e.,
front-end.

14. Front-end part: React Component
We will be using create-react-app for it,
some also prefer to configure Webpack, but
that’s up to you. If you don’t have create-
react-app installed on your system, use the
below command-
npm i create-react-app
Now let’s create our React application –
create-react-app chat-app-client
cd chat-app-client
You can remove unwanted files like –
favicon.ico and logo.svg from your file
structure.

15. Now, as we know, Socket.IO uses
Engines.IO, due to which we need to install
Socket.IO at both client and server sides. So,
it’s time to install socket.io-client
npm i socket.io-client
Client-Server Connection
This section will see how to connect the
client with the server and enable real-time
communication between them using
sockets.

16. import React from 'react';
import socketClient from 'socket.io-client';
const SERVER = "http:// 127.0.0.1:8001";
function ChatApp() {
let socket_io = socketClient(SERVER);
return (
< div >
< p >Just checking if this is working!< /p
>
< /div >
);
}
export default ChatApp;
Make these necessary changes in your
server.js file so that the client listens to all
the emitted events from the backend.

17. //server.js
let express = require('express')
let http = require('http')
let socketIO = require('socket.io')
const PORT = 8001
let app = express()
let server = http.Server(app)
let io = socketIO(server)
const STATIC = [‘global_notif,
global_chats’];
io.on(“connection”, (socket_io) => {
console.log('User is connected
successfully');
socket_io.emit(“connection”, null);
socket_io.on(“disconnect”, () => {
console.log('Sorry! User is unfortunately
disconnected');
})
})
server.listen(PORT, () => {
console.log(`Running on port ${port}.`);
});

18. Due to the function socket_io_emit, events
can be emitted to the front end from the
socket connection. Keep in mind that this
transmission of data will be possible only
with recently connected clients.
Now, the web socket connection is
developed, so let’s proceed to build Chat.
How to Build Chat application?
We will have a folder named Chat, which
will consist of our Channel’s components
and the main Component of Chat. I won’t be
adding CSS files for designing; instead, I’ll
focus on the logic and components.

19. //Main_Chat.js
import React, { Component } from 'react';
import { Channels } from './Channels';
export class Main_Chat extends
Component {
state = {
all_channels: [
{ id: 10, name: 'John', members: 20}
]
}
render() {
return (
< div >
< Channels all_channels=
{this.state.all_channels} / >
< /div >
);
}
}

20. // Channels.js
import React, { Component } from 'react';
export class Channels extends Component {
render() {
let channel_list = `Sorry, No channels
available`;
if (this.props.all_channels) {
list = this.props.all_channels.map(c =>
< p > {c.name} < /p >
}
return (
< div >
{channel_list}
< /div >
);
}
}

21. So, we have two files here- Main_Chat.js and
Channels.js. Main_Chat.js includes the
Channels.js, which will display data related to
the channel list using the prop all_channels. We
are done with the Chat folder now, moving
ahead to create a message folder for Message
Panel. We will build two files in that folder,
namely Main_Message.js and Messages.js.
//Main_Message.js
import React, { Component } from 'react';
export class Main_Message extends
Component {
render() {
return (
< div >
< p >{this.props.senderName}< /p >
< span >{this.props.text}< /span >
< /div >
)
}
}

22. //Messages.js
import React, { Component } from 'react';
import { Main_Message } from
'./Main_Message';
export class Messages extends Component {
render() {
let msg_list = No messages!;
if (this.props.channel.messages) {
const { msgs } = this.props
list = msgs.channel.messages.map(msg =>
) />
}
return (
< >
< p >{msg_list}< /p >
< >
< input type="text" >
< button >Send< /button >
< />
< />
);
}
}

23. So far, we are done with setting up Express,
ReactJS, and Socket.IO; now, without
further ado, let’s move on to develop logic.
Logical part: Sending and Receiving
Messages
We are done with the simple interface, and I
hope you’ve managed your design too.
Moving on to focus on the logic part of how
to send and receive the messages?
How to fetch the channels?
Add the following code into your server.js
file for retrieving the current channel’s data
–

24. // server.js
app.get('/getAllChannels', (request,
response) => {
request.json({
all_channels: STATIC
})
});
This was for the backend side, write the
following for frontend –

25. // Main_Chat.js
componentDidMount() {
this.loadAllChannels();
}
loadAllChannels = async () => { fetch('http://
localhost:8001/getAllChannels').then(async
response => {
let all_data = await response.json();
this.setState({ all_channels:
all_data.channels });
})
}
Now, there’s a need for some events to be emitted
and listeners in real-time communication.
Whenever a channel is being selected, it should
call an event that will eventually be handled in
the backend. Also, the front-end has to look after
the event. The front-end should have the same
events emitted by the back-end to capture it and
vice-versa.

26. // Main_Chat.js
handleSelect = (channel_id) => {
this.socketIO.emit('channel-join',
channel_id)
}
render() {
const { all_channels } = this.state;
return (
< Channels all_channels=
{all_channels} onChannelSelect=
{this.handleSelect} / >
);
}

27. // server.js
io.on('connection', (socket_IO) => {
console.log('User is connected
successfully!');
socket_IO.emit('connection', null);
socket_IO.on('channel_join', channel_id
=> {
console.log('channel join', channel_id);
STATIC.forEach(i => {
if (i.id === channel_id) {
if (i.sockets.indexOf(socket_IO.id)
== (-1)) {
i.sockets.push(socket_IO.id);
i.members++;
io.emit('channel', c);
}
} else {
let channel_index =
i.sockets.indexOf(socket_IO.id);

28. if (channel_index != (-1)) {
i.sockets.splice(channel_index, 1);
i.members--;
io.emit('channel', c);
}
}
});
return channel_id;
})
});

29. How to send messages?
Heading towards our last section of the blog
– How to Build a Chat App with Express,
ReactJS, and Socket.IO? After establishing a
stable WebSocket connection, it’s time to
learn how to send messages over it. This
section will store the message typed in the
textbox and then send that message by
clicking Send. Open your Main_Chat.js file
and make the necessary changes.

30. setUpSocketIO = () => {
let socketIO = socketClient(SERVER);
socketIO.on('connection', () => {
const { channels } = this.state;
if (channels) {
this.handleSelect(channels.id);
}
});
socketIO.on('channel', channel => {
let all_channels = this.state.all_channels;
all_channels.forEach(i => {
if (i.id === channel.id) {
i.members = i.members;
}
});
this.setState({ all_channels });});
socketIO.on('message', msg => {
let all_channels = this.state.all_channels
all_channels.forEach(i => {
if (i.id === msg.channel_id) {

31. if (!i.messages) {
i.messages = [msg];
} else {
i.messages.push(msg);
}
}
});
this.setState({ all_channels });
});
this.socketIO = socketIO;
}
onSendingMessage = (id, msg) => {
this.socketIO.emit('send-message',
{ channel_id: id,
text: msg,
name: this.socketIO.id,
id: Date.now()
});
}

32. render() {
const { all_channels } = this.state;
return (
< >
< Channels all_channels={all_channels}
onChannelSelect={this.handleSelect}
/ >
< Messages onSendMessage=
{this.onSendingMessage} channel=
{all_channel} / >
< />
);
}

33. So, this was for the front-end part.
Implementation at the back-end is quite
simpler than this; we just have to broadcast
the messages.
socketIO.on('send-message', msg => {
io.emit('message', msg);
})
This was all about how to build a chat app
with Express, ReactJS, and Socket.IO. I hope
the purpose of landing on this blog has been
satisfied. With the combination of ReactJs
and Socket.IO, you can build brilliant
applications supporting real-time
communication.

34. Here at Bacancy Technology, we provide
you the best guidance for various
technologies, including ReactJs and NodeJs.
You can find the best coding practices being
followed by TDD and BDD here. If you are
looking to hire Full-Stack developer who
can help you build a chat app with Express,
ReactJS, and Socket.IO, then you have
landed on the right blog post. Get in touch
with us to fulfill your custom business
requirements.
Conclusion

35. Thank You