Real Time chatting app using Nodejs, Mysql, AngularJs and Socket.io – Part 2

In the first part, we created Login and registration page, did all the necessary server and client setup and created config files required for our Nodejs server. In this part, we will implement Homepage of our Private Real Time chatting app.

I have divided implementation of homepage into four parts as shown below,

  1. Connecting user to the socket server.
  2. Checking user’s session again once a user logs into application and redirects to the homepage.
  3. Displaying User’s Chat list with current online users.
  4. Sending message unique users.

But as of now, in this part, we will complete three points out of four points listed above. The last point Sending message unique users will be covered in the 3rd part of the application.

     Download

     Demo

 


 

1. Connecting user to the socket server

Now, the user is logged in into the application, the first step is to connect that user to socket server when user redirects to the homepage.

=> Inside the home.controller.js, write down the below line, this line will do the required work for us, which is defined inside the AppService class.

=> Since we already created AppService class in the first part and As I explained in point number 7 of the first part, where we have talked about each method’s usage.

home.controller.js :

=> Now when user will connect to a socket, we will update the socket id of the user by executing the MySql query. In order to do this, we will write a middleware in the socket.js file.

=> This middleware will execute before any socket event would execute and it will socket the new socket id every time socket server will start.

=> In the below code, inside the method socketConfig() will write this middleware.

socket.js:

=> If you notice we have called addSocketId() method of the helper class.

=> In this method, we will simply perform an update MySql query by using socketId and userId, so copy the below method in the helper class.

helper.js:

2. Checking user’s session

It is very important that no one should able to send a message without login and to achieve this we will check session of logged in user and if that user is not logged into the application then we will redirect that user to the Login page again. Now to do that we have to use controller file on the homepage.

=> Here we will consume httCall() method of AppService class, which will send userId of the user over the HTTP call.

=> In the response, it will return whether the user is logged in or not.

=> The above code looks easy to understand, the HTTP call is made to /userSessionCheck route with UserId as route parameter.

=> Now we will create a route named as /userSessionCheck, using express inside the routes.js file, take a look below,

routes.js:

=> If you notice we have used userSessionCheck() method of the Helper class, In this method, we basically check the online status of the user.

=> We update the online column, in socket.io middleware when the user connects to the socket server. If the online status of the user found as Y then it returns the username OR if the online status is N then it will return null.

helper.js:

3. Displaying user’s chat list

Our user is connected to socket server and logged into the application, now it’s time to fetch the chat list. In this application, we will show only those users on the chat list, which are already logged into the application and connected to socket.io. In order to do this, we will write a MySql Query in a helper class and we will consume this in our socket events.

=> So The first step would be to emit an event from a client that, the user is ready to receive chat list.

=> When Server receives that event, it will respond back with chat list data in the form event.

=> Once a client receives the chat list, AngularJs will render the chat list by reading the data received through that server event.

home.controller.js:

Explanation :

Inside the httpCall() method, we are updating the list of the user, which is defined into the AppService class. For example, If a new user logs in into the system or an existing user goes offline in both the cases we will update the list of online users.

Now, here I am emitting the complete list of users to the user who just logged into the system.

And, the for the rest of users, those who are already online will get the users information who went offline or just logged in.

This makes sense, right? Because sending the complete list of online users to each and every user is not good.

Now if you see the above code there is else if() code block,for the below task.

  1. If the response from the socket event contains the singleUser property which means the new socket connection is established.
  2. If the response contains the userDisconnected property then it means the user went and offline remove the user from the chat list.
  3. And at the end,In the else condition we will update the list of users in the else block.

Alright, that was the AngularJs part let’s take a look at the markup for the same. Open home.html and write down the below markup.

=> The markup show below is straight to understand and we are using the $scope variable to ender the chat list.

home.html:

Let’s see what we have to do for socket events to complete this feature. As you all know we will write our socket events in socket.js file, so open it and write down the below code.

=> In the below code we will send an event to AngulaJs along chat list data, by consuming the Helper class.

socket.js:

=> We are fetching the list of the user based on details we have in our database, so to do this we will run a MySql query. This query is written inside getChatList() method of the Helper class.

=> Now open helper.js and write down the below code, In the below query we will fetch inform based on online status and socket.id.

helper.js:

For this part that’s it, in this article, we implemented the chat list feature and In the next part, we will implement the real-time messaging feature. And finally, the users will able to chat with each other.

See you in next article and if you like this article please do share.