Build a chat application with Express and Socket.io

Piyush Garg

Published in

Daily Programmer

4 min readApr 26, 2020

Hey guys, In this article, we would be building a real chat application. Building a chat application is really easy.

For this application, we would be using Express.js and Socket.io.

I would recommend you to code along with me to better understand the code.

So, Let’s begin 😉

checkout best laptop for programmers: https://amzn.to/2WHjAFE

Step 0: Setting up the project

Firstly, let's create a folder chatApp

After then create the following two new folders inside the chatApp folder:

server
client

Step 1.1: Server

Now, head over to the server folder and run the following command:

npm init

After initializing package.json lets now install some dependencies

npm install socket.io

Great, and finally let's create our index.js file

Now, let's have our boilerplate code to server/index.js

In the above code firstly we required the node’s build-in HTTP module and created a server using createServer() method.

Then, we imported our socket.io and named it as socket which returns a function.

Finally, we initialised our io by calling the function socket and passed our server as parameter to it.

Great, now we have successfully created a server and initialized our io.

Step 1 Creating socket.io listeners on the backend

Whenever there is a new user or a connection joins the chat, the ‘connection’ event is fired by the socket.io, to which we are listening with the .on method.

so io.on(‘connection’), means whenever there is a connection this function will be called. This function has a second argument which is a callback function that has access to a single parameter and that is a socket. The socket contains information about the user who has just joined.

So whenever a new user joins the chat, our server would log A new user has joined the chat. Also, we must welcome the user who has just joined by saying, You have successfully joined the chat.

So, to send a message only to a particular user who has just joined we do:

socket.emit('message', 'You have successfully joined the chat');

.emit method is used to fire up an event where the first parameter is event name and second is the data.

With that being set now let us set up our listeners for the incoming and outgoing chat messages.

So to listen to an event we use the .on method.

Let me simplify, In the above code, we are listening to an event named as “message” which would be fired up from our frontend later. So whenever a socket ( which is a user ) sends a message we will take that message and send that to everyone. The io means everyone.