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

In the First part, we created files required to set up for our Nodejs server and completed the Nodejs server setup, also in the first part we did the AngularJs setup for the application. After completing all the setup for Real Time chatting app, we created Login & Registration page. In the second part, we created a chat list features and wrote methods to display chat list. In this part, we will create real-time chatting feature between two players.

Here we will complete two features listed below,

  1. We will fetch messages between two users.
  2. Sending Messages between users (Real-time chatting feature)

     Download

     Demo

 


 

1. Fetching the messages between two users

So let’s start with the first point, so we will pick up from where we left in the last part and i.e. chat list feature. So the idea here is to click on any user displayed on chat list, should fetch the list of messages between logged in user and that user.

=> We will achieve that by passing the user Ids of those players.

=> We will register a ng-click function on the list of users as shown in below markup.

home.html:

Inside the selectFriendToChat() function, we will do two things. First, we will highlight the user selected from the list and second, we will make the HTTP call to get the messages between users.

=> To do that we have to write a function inside the home controller, which will do both the things.

=> Open the home.controller.js and write down below function.

home.controller.js:

When a client makes this HTTP call, on the server side we must have something to take care of this call. So we will write a route to handle this HTTP call also we will write the query to fetch messages from the database.

=> Open the routes.js file and write down the below code.

=> In the below code we are consuming getMessages() method of Helper class to fetch the messages from the database.

Now moving over to Helper class here, we have to write MySql query to fetch data from the database. The below is wrapped inside the async/await function as show below.

helper.js:

2. Sending Messages between users (Real-time chatting feature)

Here I would like to divide this topic into two parts.The first part is sending the messages and the second will be the receiving the messages from the socket server. And we will learn both of them one by one.

1. Sending the messages

Now, this features completely relies on the socket Events. If server emits any event then the client will respond to it accordingly. If you are not new to socket programming then you must be aware of how things work here. But for those who don’t know much about it, I will explain here anyway.

=> So here we will implement a real-time chat between users by sending an event from the client.

=> When the server receives the emitted request from client then it responds back to the client to whom we are willing to send a message.

=> In our case, we will pass the socket id to server and server will emit the event only to that socket id.

=> Let’s start with the markup, Open the home.html and add the below markup to it,

home.html:

Explanation:

In the above markup, three important things are happening, which are listed below.

  1. First, when you select a user from chat list, we show a dialog as Chat History With ####. Nothing complicated with it just an AngularJs model and that’s it.
  2. Below to that, we will have a list of messages, which can be rendered using data.messages model using ng-repeat.
  3. As I explained in above, How we fetch messages from the server by making HTTP call.
  4. Now when we receive messages from the server by making HTTP call, we assign new messages to this data.messages model which renders the messages.
  5. And at the end, we have we have textarea to write messages and we have set up a keydown listener to send messages.
  6. After writing messages, when user will press enter button message will be sent through socket.io.

We wrote markup to send messages, but to make work them we’ll have to write some AngularJs. For the above markup, we already wrote the AngularJs for them in the previous section. Inside the selectFriendToChat() we have written the half of the above markup. So we will focus on only sending messages part. Open the home.controller.js and write down the below code,

home.controller.js:

Explanation:

In the above function, we are doing three main things,

  1. First, here we are extracting the selected friend’s information to send messages.
  2. Then we create a message packet and send it to the socket server also we push the message packet to the data.messages model to render it on the screen.
  3. Then we scroll the div which displays the messages to the bottom.

I assume that you understand the purpose of this block and if you have any questions please comment below, I’ll help in that. Now it’s time to write server-side socket events.

=> Now we will write a socket event in order to listen to messages on the server side and accordingly will send a response back to the server.

=> Once the server receives the event it will store messages to the database, by executing the MySql queries.

=> In the below code, we are calling insertMessages()  method of the Helper class, which will store the messages into MySql database.

=> Then we send message data to the corresponding user by emitting the socket event. Open the socket.js file and write down the below code,

socket.js:

Open the helper.js file and write down the below code. In the below code, we execute MySql insert query to store MySQL data nothing more than that.

helper.js:

2. Receiving the messages

In this small section, we will write the socket event handler for the receiving the socket event on the client side and which will be very easy. Open the home.controller.js and write down below code we will do listed things below,

=> We will user scoket.on a method to handle the socket event and receive the messages.

=> After receiving the messages we will display them using data.messages model.

=> You will add this code inside the home.controller.js, just below to the chat list code.

home.controller.js:

Final thoughts

Now you know, how to create a private chatting application in AngularJs with minimum complexity, for now, that’s the end of this series. If you want to report an issue, you can use GitHub for that, I have uploaded the code to the GitHub. Using GitHub will be very easy for all of us to track all the issues.

Alos, If you like this article consider sharing this on your social account with other people as well. You can suggest or request an article on any topic I would love write it for you.

If you have any suggestion or Question let me know in the below comment box and If you like this article share with others.