Real time private chatting app using Angular 2, Nodejs, mongodb and Socket.io – Part 1

Yes, you heard it, Real time private chatting app but using Angular 2, Nodejs and Socket.io. In this article, am gonna show you how to create a private chat application using Angular 2, Nodejs and socket.io with the minimum complexity. Here I am using MongoDB as a database to store messages and users data.

As this article seems lengthy, hence I have divided it into 4 parts. Each part of this article covers unique part in building the Real Time private chatting app.

First part: Covers the prerequisites, server configuration setup and REST API along with socket.io integration on the server.

Second part: Here we will configure our angular application and application Routing. In addition to these, we will implement our application’s services.

Third part: Implementation of Login and Registration functionality.

Four part: Building homepage of the application where the user actually can chat with each other.

 

     Download

     Demo

 




Before going any further, let’s take a look at the final outcome of this application.

Login Page

Real time private chatting app angular 2 login page

Home page

Real time private chatting app home pageIf you are looking for AngularJs (Angular 1.x) chatting application using Nodejs this article is only for you.

Prerequisites

Before, creating this application, please take a look at below article if you are not familiar with the concepts listed below.

  1. Highlight selected row in Angular 2
  2. Angular 2 CRUD application using Nodejs

Real time private chatting app

1. Configuring server and APIs.

Below you can see the directory structure for our server. In the config folder, we have our config files, helper file which contains all the method and files to handle routes.

directory structure:

To create new nodejs project, the best practice is to start with npm init. This command will create a package.json file. Now let’s take a look at package.json file of our server.
package.json:

2.Connecting with database (MongoDB):

Create a db.js file under utils folder and write down the below code. Which is pretty straightforward and easy to understand. Here I am using the mongo-db driver to connect our MongoDB to the server.

db.js:

3. Creating nodejs server.

Now create a server.js file in the root of the folder structure and write below code, which is required to run our server. In the below code, I have required necessary files to run our routes and socket events.

server.js:

4. Creating helper file to run the MongoDB Queries.

Now let’s create a helper.js file inside utils directory and write the down below code. In the below code snippet, I have written each method’s name, description, and parameters required to that respective method.

helper.js:

2. Creating REST API

You might have noticed in server.js I have required the routes.js file. This is file will handle all routes for our chat application. Here I am using helper class by calling its method on the respective routes.

For this application, I have created five routes as listed below,

  • /usernameCheck: To check if the username is available or not.
  • /registerUser: Register the User
  • /login: Login the User
  • /userSessionCheck: To check if the user is online or not.
  • /getMessages: To fetch messages from DB between two users.

routes.js:

3. Creating Socket Events

Till now we have created routes for the application now let’s introduce socket.io on the server side in order to achieve the real-time delivery of messages and real-time update of the chat list.

So let’s create the socket.js inside utils folder.

socket.js:

In the above socket class, I have created two methods listed below,

  1. socketEvents().
  2. socketConfig().

Let’s start with socketConfig() method, In this method, if you notice we are storing the socket id and updating the online status of the user respectively who connects to chat application.
Here I am sending the user id of the user from the angular application, in order to update the socket id and online status.

In socketEvents() method, we are listening chat-list,add-message,logout and disconnect socket events on the server side.

  • On chat-list event: I am emitting the chat-list-response from the server for client-side.
  • On add-message event: I am emitting the add-message-response.Here I am storing the messages by calling the method of the helper class.
  • On logout event: I am emitting the chat-list-response from the server for client-side by logging out the user.

Well for first part that’s it. Here we covered our server side application setup and created the REST API. Also, integrated the socket.io on the server side and created the events required for our application.

In the next part we will build our angular application, see you in the next part.

  • Rezgui Baha Eddinne

    where is the config.js file ?

    • You are a true observer man, Actually config.js is not required for Nodejs.