Easily build web chat app using socket.io

To build a real chat application using socket.io we will require basic knowledge of javascript, node.js, html and css(not necessarily).

First goal is to set up your project.

Setting Up

Open your terminal and type following commands

mkdir chat_app
cd chat_app

Now we will be needing npm packages.So you need to initialise npm.

For that type the following command.

npm init -y

Now we are ready to install socket.io.

Installing socket.io is very easy.

npm install socket.io

Now all of our setup process done and we are ready to proceed.

The chat app

Structure

Our chat application will be divided into two parts.

• Client Side
• Server Side

Client side will be handled by html,css and js which will load on client’s computer.

Server side will be handled by node.js.

Server Side

We have to create a file index.js .Here all our backend part will be done.

This is the basic code which we will be needing in almost every backend file.

Client Side

Now we need to send some html file whenever a customer starts our application.To do so we create a file chat.html and send it to customer on route ‘/’.

app.get('/',(req,res)=>{
res.sendFile(__dirname+ '/chat.html');
})

Our html file will look like.

Our server side and client side are now ready.To test what we have created until now type following command in terminal(Make sure you are in chat_app directory).

node index.js

Go to browser and hit url “http://localhost:8000/” , you will see this.

Now we will integrate socket.io

Integrating Socket.io

We have already installed all the dependencies so we need to write some lines to integrate socket.io in our code.

Server Side(Integrating socket.io)

All you need to do is

const io = require('socket.io').listen(server);

On hitting url it will throw some events.To catch those events just do this

Socket also fires a ‘disconnect’ event, to catch that

Open it in several tabs and you will see messages like this in your terminal

"a user connected"
"a user disconnected"
"a user connected"
"a user disconnected"
"a user connected"
"a user disconnected"

Client Side(chat.html)

Integrating socket.io on client side is very simple just add two scripts

<script src="/socket.io/socket.io.js"></script>
<script>
     var socket = io('http://localhost:8000');
</script>

Our socket.io is integrated , now we can proceed to final step of sending and receiving messages.

Chatting

This will compromise of the following steps

• ( Client Side )Getting the input message and emitting it to server.
• ( Server Side )Catching message by server and send it to other users including the sender itself.
• ( Client Side )Receiving message from server and printing it.

Step 1(Getting the input message and emitting it to server)

In the chat.html type the following code.

In this, we have added an event listener ‘click’ on send button , which will call function ‘getMsg’ on click.

In function ‘getMsg’ we get the value of input in variable ‘msg’ and send it to function ‘socMsg’.

In ‘socMsg’ socket will emit an event ‘chat’ with our message(msg).

Step 2(Catching message by server and send it to other users including the sender itself)

In index.js we will catch event ‘chat’ and emit it to other users including sender.

Note : Here I used io.emit instead of socket.emit because io.emit emits to all clients including sender whereas socket.emit emits to only one socket.

Here on catching event ‘chat’ we are emitting an event ‘message’ with data(user message).

Step 3(Receiving message from server and printing it)

In chat.html catch the event ‘message’

socket.on('message',(data)=>{
     showMsg(data);
})

‘showMsg’ is a function which will print our message

Here in function ‘showMsg’ we are inserting html which contain our message.

Now our application is ready to use.

Testing

For testing make two users with route ‘user1’ and ‘user2’.

app.get('/user1',(req,res)=>{
     res.sendFile(__dirname+'/chat.html');
})
app.get('/user2',(req,res)=>{
     res.sendFile(__dirname+'/chat.html');
})

Send message with user1/user2.

It will get printed in both users.

Final Words

This was a basic chat app.I hope you are now ready to build a real time chat application.

To see full code go to https://github.com/pradhuman1/chat_app

About Me

Hello, I am Pradhuman Singh Baid.I just completed my freshman year at IIIT Allahabad. I am a Web Developer and member of FOSS(Free and open-source software) wing.