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

We all have seen the tutorials and article on how to create Chat Room in Node.js where multiple users can send and receive messages to each other. But in this article, I will explain how we can create Private Real Time chatting app. As the title suggests, here we will use  AngularJs(version 1.6.5) as the front end framework. This is SPA application, which uses UI-bootstrap, so I expect from you to have a little familiarity with it. Server-side is written in Nodejs (version 8.9.3) and Mysql (version 5.7.21-log).

After completing this series of articles, 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.

Looking for Real-Time private chatting app using Angular 2we have that too.

 

     Download

     Demo

 




Prerequisites:

  1. Connecting nodejs app to Mysql.
  2. Sending message to specific user with socket.io.

Once go through above articles if you are not familiar with those topics listed above and I assume reader of this article has the intermediate knowledge of Nodejs and  AngularJs. In this application, we will implement below-listed features,

  1. Login and registration feature in order to make the user account.
  2. Checking a session when logged in.
  3. Creating online Chat list.
  4. Sending message to each user

But before going any further, let’s take a look at the final outcome of this article.

Real Time chatting app Homepage1. Homepage (Private chatting application)

Real Time chatting app chatlist
2. Online chat list (Private chatting application)

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

Part 1:  Covers the Overview, Setting up the server, Setting the AngularJs application and entire Login page & Registration page operation.

Part 2:  Covers the Homepage and Chat list implementation.

Part 3:  Building Simple Real-time Chat Application.

 

1. Creating MySQL Database

Overall we are going to create 2 tables.

  1. user table: This table holds the information about users.
  2. message table: This table holds the messages associated with Conversation Id.

Real Time chatting app Application Table structure

 

To create these tables, Open the PHPMyAdmin (if you are using XAMP/WAMP) which is located at http://localhost/phpmyadmin and execute these SQL queries, you can use PHPMyAdmin graphical interface to create tables if you are familiar with it.

SQL Queries:

2. Creating a new Nodejs project

1. Let’s start off by creating a new Nodejs project by using ng init command.This command will create a new package.json file.

2. After that copy the dependencies from below package.json and paste it in your file and run npm install.

Below is my package.json file for this application.

package.json:

 

3. Directory structure and Project overview

Till now, you have a package.json file and node_modules folder in your project. Let’s create create Project directories and files required to run the application. The below-shown image is replicating the directory structure and files created in this application.

=> In the project root, we have two parent directories /client and /utils and a server.js file.

=> Inside server.js file, we will write code to set up the Nodejs server.

=> Inside, /client directory there are 3 subdirectories /css, js and /views, and the names of these directories self-explanatory.

=> So create all the files and directories and once you create all the files you can move to next heading and set up the AngularJs in your application.

=> You can skip READ.md and download ui-bootstrap from here.

Real Time chatting app Directory structure

 

4. Creating a Nodejs Server

At this point, we have all the directories and files created with us, Now we will create a Nodejs server, if you are a regular follower of this Blog then you must be familiar that, we always keep our server setup identical in each project, which ridiculously easy to set up.

=> Open the server.js file and write down the below code into it.

=> In the below code we have included the application routes and socket events and did the setup of the application configuration.

5.  Connecting to Database

Here we are using Mysql as the Database engine, we will use a node-mysql package to connect nodejs server to MySQL server.

=> Open db.js file and write down below code, In the below code we have connected MySQL with Nodejs using Pool connection.

=> Also, we have created a promise based method to execute the Mysql queries.

db.js:

6. Setting up the AngularJs

This topic involves how to set up the Angularjs, which means how to organize Angularjs files such as modules, services, and controllers. If you see we have created javascript files inside /js directory, which are listed below with the usage of them.

  • app.js: Initialize the AngularJs application.
  • app.services.js: Contains the code for AngularJs service.
  • auth.controller.js: This is controller file, used for login and registration part of the application.
  • home.controller.js: Again a controller file, used in the home page of the application.

=> Now open the index.html file and write down the below markup, In the below markup we have imported all the CSS and JS files. including angular router and angular itself.

index.html:

In the above markup, we imported all the JS and CSS files,  now let’s initialize the AngularJs application. In order to do this, we will use app.js file.

=> Here will create AngularJs app and configure the application routes.

=> Also, we will import the application service class, wich we will see down the road.

app.js:

7. Writing AngularJs service

Here we will create an AngularJs service to Make HTTP call and to emit and receive socket event along with few more operation, which it will perform. Open app.service.js and write down the below code.

=> Here we have created a common method to make HTTP call.

=> we will connect a user to a socket server, also we have written a method to emit and receive socket event from the socket server.

app.service.js:

Code explanation:

  1. httpCall(): In this Method, we will make HTTP call by using $http service. This method expects one parameter as an object having two properties listed below.
    1. url: This parameter is URL, to make HTTP call.
    2. params: Data which send over HTTP call.
  2. connectSocketServer(): Connects the user with Socket server.
  3. socketEmit(): This method emits the socket event to the Socket server.
  4. socketOn(): This method receives the socket event from the Socket server.
  5. getMessages(): A promises based method which resolves the messages between two users.
  6. scrollToBottom(): Used to scroll the scroll bar to the bottom of the message container.

8.  Implementing Login and Registration

1. Writing markup

Till now we have completed all the setup required to run the application and connected our database to nodejs server. Now, all we have to do is write code for the application.

So let’s start with the Login and Registration operation, open the auth.html file and write down below markup.

auth.html:

2. Writing controller and consuming service

=> We have our markup ready, let’s create a controller for the same. Open the auth.controller.js and write down below code.

=> The below code is very easy to understand and I assume there is not much to explain. If you will read creaefully you will understand it very easily.

auth.controller.js:

3. Writing routes

Till now, we have completed the client side code for login and registration, Now let’s start writing the Nodejs routes in order to make run the application. Also, we will Mysql Queries to perform login and registration operation.

=> Open the routes.js and write down the below code. In the below I have used async/await, just to make our code synchronous and rest of the code self-explanatory.

routes.js:

4. Executing MySql queries

Open the helper.js and write down the below code in this file we will write method for login, register and other important methods which will be required for the application.

=> The below we have written method for login, register and to perform username availability check. In each method, we will run MySql query and return the result to callee function.

=> The below methods are straightforwardly written using Async/await and easy to understand.

helper.js:

In this part, we have completed all the initial setup and wrote code for Login and Registration.Below is the listed points which we completed in this article just for a recap,

  1. We created Database tables.
  2. We created new Nodejs Project and Did the server setup.
  3. Did the AngularJs setup and created all the files.
  4. Wrote the code for Login and Registration.

In the next part we will work on a Home page of the application and as I told earlier we will implement chat list feature. See you in next article.