Build a Socket.io Realtime Chat With Rooms in Node.js & Express Using Javascript Full Project For Beginners

 

 

 

Welcome folks today in this blog post we will be building a realtime chat app with different rooms using socket.io in node.js and express using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to initialize a new node.js project on the command line as shown below

 

mkdir chatapp

 

 

cd chatapp

 

 

First of all we will initialize a package.json file for our project as shown below

 

 

npm init -y

 

 

npm i express

 

 

npm i socket.io

 

 

npm i moment

 

 

So as you can see these are the dependencies that will be required for this project.First of all we will need express for building the web server and also we will need to the socket.io library for adding the realtime chat and rooms. And then moment library is used for generating the dates and time for the messages.

 

One more dev dependency we will need for the project. Just install it using the below command

 

npm i --save-dev nodemon

 

This library nodemon will automatically restart your application whenever you make any kind of changes in the app.

 

Directory Structure of App

 

 

Now guys see the resultant directory structure of the App which contains the below files and folders

 

 

 

 

As you can see we have the public directory which contains all the static files and images and then we have got the index.js file which contains all the server side code which will be written in node.js. And then we also have the utils folder which contains all the methods which is necessary for doing some important tasks.

 

 

After installing all these libraries now just make an index.js file inside the root directory and copy paste the below code. This will be the starting point for the application.

 

 

index.js

 

 

Initializing a simple Socket.io & Express Server

 

 

Now first of all guys we will be starting out a simple express.js server and passing socket.io to it in the given block of code.

 

 

 

 

As you can see we have imported all the required libraries which is express & socket.io. And also we have imported the built in http server package to create a simple http server and then we are passing the express app as an argument to it. And then we are starting the http server at port number 3000. And then we are listening on that port number. And for initializing the socket.io library we are passing the created http server variable or reference to the socket.io constructor. And this reference is stored inside the io variable. And then we are listening for various events one such event is when the socket connects socket here means any user connects in the browser. Then we will emit events to the client and receive events from the client in this function. As you know socket.io is bidirectional library. We can talk directly with client using this protocol. And also one more thing we are doing we are making the public directory as static. Because in public directory we will be storing all the html,css and javascript files.

 

So first of all make a public directory inside the root directory to store all the static files. Now after this you need to make the index.html file inside the public folder

 

 

public/index.html

 

 

 

 

 

As you can see we have a simple form in which we have two input fields which is taking input for the username of the user and also the room name for the chat. And we have a simple button to enter into the chat. If you open this app inside the browser it will look as shown below

 

 

Styling the App

 

 

Now guys we will adding some styling to this boring app by applying some custom css. For this you need to create the css folder inside the public folder and inside it create a style.css file and copy paste the below code

 

 

public/css/style.css

 

 

 

 

 

Now if you open the app it will look something like this

 

 

 

 

 

Creating & Joining Rooms in Socket.io

 

 

Now guys we will be creating the dynamic rooms in socket.io with the room name given by the user. And we will be joining it. For this we need to get the value of the query parameters in the url. As we have the form when we submit it the default method is get. So all the parameter values are accessible in the urlbar. Now we want to parse and access those username and room values. For this we will be using the special library called QS parser library which stands for querystring. Now you need to include it’s cdn in the browser as shown above

 

 

 

 

For including this you need to create an another html file inside the public folder which will be chat.html which will be the actual chat screen where users will be able to see the room name, different users name who are chatting. Now copy paste the below html code

 

 

public/chat.html

 

 

 

 

As you can see we are using hard coded values for the different room names and also the users also. We will replace with dynamic data coming from the server later on. Also at the bottom we are also including the query string parser library cdn and also we are including the main.js file which will be the actual javascript file we will be writing in the next step. If you open this file it will look something like this as shown below

 

 

 

 

As you can see we have different sections which is showing everything room name, different users which are present in the room and a text field to enter the message and a button to send the message and the div section to show the messages and also a scrollbar which will automatically scroll when you type messages to the bottom.

 

 

Writing the Javascript Code

 

 

Now we will be writing the javascript code for that you need to create a js folder inside the public directory and create main.js file and copy paste the below code

 

 

public/js/main.js

 

 

 

 

As you see guys at the top we are getting the references to all the elements of the DOM using Id and classes. And then we are extracting the room name and the username from the address url using the querystring library. And inside that we are passing the option ignorequeryprefix to true this means that we are neglecting the special characters such as %.& characters. We only want the username and the room value as text. And we are extracting those values and after that we are initiating a new socket.io connection and storing it inside io variable and then guys we are emitting this room name and username as an event called joinRoom and in the second argument we are passing this information in the form of an object to the express.js server which contain these two properties.

 

 

Receiving Events in Express

 

 

Now we will be receiving the event which is sent from the client side of joinRoom. So for that we need to write the below code

 

 

 

 

We will receive that event like this. We will use the socket object and the on() method to receive the same event is passed also in the second argument we will have the information of roomName and username. Now we need to store these details. For this we will not be using database instead we will be storing locally using arrays. For this you need to create a separate folder called utils which contain all the methods. Create a users.js file inside it as shown below.

 

 

utils/users.js

 

 

 

 

As you can see we are declaring an empty array of users at the very top and then we are declaring various crud operations methods. Which will delete user from the array get the number of users. Get the specific user information. And also adding the new user inside an array. Inside the object we will be storing three information which will be id,username and roomname. Id will be used a unique key to delete records and to get specific information about a user. Lastly we are exporting these methods from the file.

 

 

And similarly guys you need to create a second file which is called messages.js which will hold the single method to format the message using moment. Here we will be showing the date and time.

 

 

utils/messages.js

 

 

 

 

As you can see we are exporting the message using the username and the actual message and then we are using moment.format() to get the current time in am or pm. Lastly we are exporting this method also.

 

 

Now we will be using these methods inside the index.js file like this as shown below

 

 

 

 

As you can see we are welcoming the user with the a message sent by the admin or the bot. Here you can change the botname to any name of your choice using the constant variable botName. And then we are showing the roomName and also updating the users which are added in the room in the sidebar section as shown below. As you can see we are emitting the event roomUsers back to the client passing the roomName and the actual username. Now we need to receive it inside the client side. Now we need to go back to main.js file and copy paste the below code

 

 

main.js

 

 

 

 

As you can see we are adding the roomName and the numbers of users to the DOM using some simple vanilla javascript. We are dynamically creating the DOM elements and then using the forEach loop to loop through all the users. If you open the app and type the username and roomName and open chat.html it will look something like this

 

 

 

 

As you can see we got the welcome message by the bot. And also showing the roomName and the users in the sidebar. And also you see the time of the message also well formatted. And also for this message that you see for this we need to write code inside the main.js file to receive this event that the server is sending which is message event

 

 

main.js

 

 

 

 

As you can see we are receiving this event and then we are getting the actual message object which contains the message and also the username and also the time as well. We are justing add it inside the DOM as shown above.

 

 

Sending Chat Messages & Displaying It in DOM

 

 

And now we will handle the situation when the user present in the room types the message in the chat box and click the send button. Now we need to submit this event to the server with the message as shown below

 

 

main.js

 

 

 

 

As you can see we have binded a submit event handler to the form. We are taking the message and sending a event to the server which is called chatMessage to the server alongside with the message. And also we are resetting the input field and also focusing on it.

 

 

Now at the server side you need to catch this event as shown below

 

 

index.js

 

 

 

 

As you can see we are once again using the same methods to format the message with time. This time we are finding out which user has sent the message. For that we are using the getCurrentUser() and passing the socket’s id to it. And then we are emitting the message to all the users in the room the message that is sent as shown below

 

 

 

 

Handling Users Leaving Chat Room

 

 

Now we will be handling the situation when the user presses the leave room button and they exit out of the room. How to remove them from the users array and from the screen. For this first of all we will be binding a onclick event Listener on the button in main.js as shown below

 

 

main.js

 

 

 

 

As you can see when users press this button first of all we are asking the users in an alert box do they want to leave and when they press yes in alert box we are redirecting them to the index.html home page. Now when they exit out of chat page. Automatically event will be triggered of socket disconnect inside index.js. We need to handle that event by writing the below code inside index.js file as shown below

 

 

index.js

 

 

 

 

As you can see we have the disconnect event inside that we are using the userLeave() to remove the user from the array. Here we are passing the id of the socket. And then we will be updating the users as well on the screen. For example we need to remove the name of the user from the chat screen once the user lefts the chat.

 

 

Full Source Code

 

 

Wrapping it up we will be providing the full source code of main.js file as shown below

 

 

index.js

 

 

 

 

GITHUB REPOSITORY