Building a chat app with MEAN stack and Socket.io
Chat applications are one of those kinds of applications that require real-time communication between the clients and the server. The application that we are going to make is purely JavaScript based. So we’ll use a JavaScript library called Socket.io. Besides that we’ll use the JavaScript development stack called the MEAN(MongoDB, Express.js, AngularJS, Node.js) stack.
Socket.io:
Socket.io is a JavaScript library that allows you to have real-time communication between the clients and the server. Like Node.js, it is event-driven. You need to have socket.io running in both client-side and server-side both emitting and catching events.
It allows you to broadcast messages to multiple clients or send messages to some particular clients (the one that we’re going to use in this application) through chat-rooms.
Let’s begin building our application. The client side of the project contains basic Login/Sign-up system besides the chat feature but we’ll not discuss it here(though I’ll post the link to the whole project at the end of the article) as our main aim is to integrate socket with MEAN stack and see how the data is actually transferred. Besides this, we are also going to save chat in the database(although it is not a good practice to store the chats in a database, but this is just for the sake of understanding how it’s done. Though you can encrypt the chat, before storing it, using a module called bcrypt). Let’s first begin with the server-side.
Server-side:
We’ll use Express.js framework for handling server-side rendering and logic. Socket.io, body-parser, mongodb and express are the dependencies of our Node.js server-side.
package.json:
App.js file is the entry point of our program. In app.js file, we’ll have the routes for saving and retrieving the users to and from the database. Besides that, we’ll catch and emit the socket.io events based on the events emitted and caught by and from the client-side. We also have a route to retrieve the chats of a specific chat-room.
App.js:
Here, the event ‘connection’ (line no. 47) is a built-in event provided by the socket.io whereas the events join, message, new message and typing are to be defined by us. You can name them on your convenience. The functioning of the socket.io is such that the emitting and the receiving of the events by the client and the server is in real-time.
Client-side:
At the client-side, we’ll use MVC pattern based framework AngularJS. We’ll have a total of 2 services file, one for making login/sign-up requests and one for emitting and catching socket.io events. Here we’ll just discuss about the later.
The project has navbar, home, login, signup, chat and chatroom components. But we’ll discuss just the chatroom component as we are only concerned about the chat part of the application. Just remember that the chat and chatroom routes are guarded by the Auth.guard.ts file. This means that you can chat only when you’re logged in.
chatroom.component.html:
This is the markup for the chatroom window. The typescript logic is as follows:
chatroom.component.ts:
For any component, ngOnInit() method is called whenever the component is rendered. So when the component is rendered, we need to first define the chatroom that the clients would be chatting on. We want to make a chat app that allows a user to chat to the other users personally. This would mean one room per a client-client pair. So when a user A chooses to chat with another user B, we would define a chatroom for them. Here, we have defined the name of the chatroom to be the concatenation of the usernames(which is unique for each user) of the two users. After defining the chatroom in the ngOnInit() method, we need to join the user to that chartroom. For that, we have used the joinRoom() method of our WebSocketService passing the necessary arguments. After the user has joined the room, we’ll load the messages of that chatroom that is stored in the database. We’ll first retrieve the chat using the getChatRoomsChat() method of our UserService. Once the chat is retrieved, we’ll store them in a array called messagesArray.
In the constructor, we are subscribed to the newMessageReceived() and receivedTyping() methods. So whenever a user sends a message, the subscription to the former method by the second user would append the message to the messageArray and would be displayed to both the users. receivedTyping() method receives the boolean whether the second user is typing a message or not. Based on that, we would give the first user a prompt of typing…
As mentioned earlier, socket.io is required on both client-side and server-side. At the client-side, we use a module called socket.io-client for communication on WebSockets protocol. All the socket logic is written in our WebSocket.service.ts file.
websocket.service.ts:
Note that the events join, message and typing are being emitted to the server, and the events typing and new message are being caught here that are emitted by the server.
After having done these steps, our chat application would be working fine.
Client-side code link:
Server-side code link:
The instructions to run the client side and server side code is written in the README.md file. Just make sure that you have mongoDB server running locally in your system to have the application run without errors.
