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 toreport an issue, you can use GitHub for that, I have uploaded thecode to the GitHub. Using GitHub will be very easy for all of us to track all the issues.

 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.

1. Homepage (Private chatting application)

2. Online chat list (Private chatting application)

As this article seems lengthy, I have divided it into3 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.

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

SQL Queries:

CREATE DATABASE chat;

USE chat;

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(10) NOT NULL,
  `password` varchar(20) NOT NULL,
  `online` enum('N','Y') NOT NULL,
  `socketid` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;

CREATE TABLE `message` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `from_user_id` varchar(45) DEFAULT NULL,
  `to_user_id` varchar(45) DEFAULT NULL,
  `message` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;

2. Creating a new Nodejs project

1. Let’s start off by creating a new Nodejs project by usingng initcommand.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:

{
"name": "private-chat-app-using-angularjs-nodejs-and-mongodb",
"version": "1.0.0",
"description": "This is a private chat application in angularjs and nodejs using Mysql as database.",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Shashank Tiwari",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.2",
"express": "^4.16.2",
"mysql": "^2.15.0",
"socket.io": "^2.0.4"
},
"devDependencies": {
"eslint": "^4.16.0"
}
}

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.

=> Insideserver.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.mdand download ui-bootstrap from here.

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.

/**
* Real Time chatting app
* @author Shashank Tiwari
*/'use strict';

const express = require("express");
const http = require('http');
const socketio = require('socket.io');
const bodyParser = require('body-parser');

const socketEvents = require('./utils/socket'); 
const routes = require('./utils/routes'); 
const config = require('./utils/config'); 


class Server{

    constructor(){
        this.port =  process.env.PORT || 3000;
        this.host = `localhost`;
        
        this.app = express();
        this.http = http.Server(this.app);
        this.socket = socketio(this.http);
    }

    appConfig(){        
        this.app.use(
            bodyParser.json()
        );
        new config(this.app);
    }

    /* Including app Routes starts*/    includeRoutes(){
        new routes(this.app).routesConfig();
        new socketEvents(this.socket).socketConfig();
    }
    /* Including app Routes ends*/  

    appExecute(){

        this.appConfig();
        this.includeRoutes();

        this.http.listen(this.port, this.host, () => {
            console.log(`Listening on http://${this.host}:${this.port}`);
        });
    }

}

const app = new Server();
app.appExecute();

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.

=>Opendb.jsfile 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:

/**
* Real Time chatting app
* @author Shashank Tiwari
*/const mysql = require('mysql');

class Db {
constructor(config) {
this.connection = mysql.createPool({
connectionLimit: 100,
host: '127.0.0.1',
user: 'root',
password: 'root',
database: 'chat',
debug: false
});
}
query(sql, args) {
return new Promise((resolve, reject) => {
this.connection.query(sql, args, (err, rows) => {
if (err)
return reject(err);
resolve(rows);
});
});
}
close() {
return new Promise((resolve, reject) => {
this.connection.end(err => {
if (err)
return reject(err);
resolve();
});
});
}
}
module.exports = new Db();

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:

<!-- 
    Real Time chatting app
    @author Shashank Tiwari 
-->

<!-- Defining angular app -->
<html ng-app="app">
    <head>
        <title>Realtime Private Chat using Angular, Nodejs and Mysql</title>
        <meta charset="utf-8">
        <base href="/">
        <!-- Adding CSS files-->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
        <link rel="stylesheet" href="css/style.css"> 
    </head>

    <!-- Defining angular controller -->
    <body>
        <div id="main">
            <!-- Angular router will inject the content here -->
            <div ng-view></div>
        </div>
    </body>

    <!-- Adding JS files -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
    <script src="js/ui-bootstrap-2.5.0.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    
    <script src="/socket.io/socket.io.js"></script>
    
    <script src="js/app.service.js"></script>
    <script src="js/app.js"></script>
    <script src="js/auth.controller.js"></script>
    <script src="js/home.controller.js"></script>
</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:

/**
* Real Time chatting app
* @author Shashank Tiwari
*/
'use strict';
const app = angular.module('app', ['ngRoute', 'ui.bootstrap']);

/*
* configuring our routes for the app
*/app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl: '/views/pages/auth.html',
            controller: 'authController'
        })
        .when('/home/:userId', {
            templateUrl: '/views/pages/home.html',
            controller: 'homeController'
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true);
});

app.factory('appService', ($http) => {
    return new AppService($http)
});

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:

/**
* Real Time chatting app
* @author Shashank Tiwari
*/
'use strict';

class AppService{
    constructor($http){
        this.$http = $http;
        this.socket =  null;
    }
    httpCall(httpData){
        if (httpData.url === undefined || httpData.url === null || httpData.url === ''){
            alert(`Invalid HTTP call`);
        }
        const HTTP = this.$http;
        const params = httpData.params;
        return new Promise( (resolve, reject) => {
            HTTP.post(httpData.url, params).then( (response) => {
                resolve(response.data);
            }).catch( (response, status, header, config) => {
                reject(response.data);
            });
        });
    }
    connectSocketServer(userId){
        const socket = io.connect( { query: `userId=${userId}` });
        this.socket = socket;
    }

    socketEmit(eventName, params){
        this.socket.emit(eventName, params);
    }

    socketOn(eventName, callback) {
        this.socket.on(eventName, (response) => {
            if (callback) {
                callback(response);
            }
        });
    }
    
    getMessages(userId, friendId) {
        return new Promise((resolve, reject) => {
            this.httpCall({
                url: '/getMessages',
                params: {
                    'userId': userId,
                    'toUserId': friendId
                }
            }).then((response) => {
                resolve(response);
            }).catch((error) => {
                reject(error);
            });
        });
    }

    scrollToBottom(){
        const messageThread = document.querySelector('.message-thread');
        setTimeout(() => {
            messageThread.scrollTop = messageThread.scrollHeight + 500;
        }, 10);        
    }
}

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:

<!-- 
    Real Time chatting app
    @author Shashank Tiwari 
-->
<div class="auth-page">
    <div class="container auth-container">
        <div class="auth">

            <!-- Auth Page Header Tabs start -->
            <div class="auth-header">
                <button type="button" class="btn btn-primary auth-header-btn" ng-click="active = 0">Login</button>
                <button type="button" class="btn btn-primary auth-header-btn" ng-click="active = 1">Register</button>
            </div>
            <!-- Auth Page Header Tabs ends -->

            <div class="auth-content">
                <uib-tabset active="active">
                    <!-- Login Tab starts -->
                    <uib-tab index="0">
                        <div class="login">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="username" 
                                    class="form-control" 
                                    id="username" 
                                    placeholder="Enter username" 
                                    ng-model="data.loginUsername">
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" 
                                    class="form-control" 
                                    id="login-password" 
                                    placeholder="Enter password" 
                                    ng-model="data.loginPassword">
                            </div>
                            <button class="btn btn-primary" ng-click="loginUser()">Login</button>
                        </div>
                    </uib-tab>
                    <!-- Login Tab ends -->
                    <!-- Register Tab starts -->
                    <uib-tab index="1">
                        <div class="register">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="username" 
                                    class="form-control" 
                                    id="username" 
                                    placeholder="Enter username"
                                    autocomplete="off"
                                    ng-model="data.regUsername" 
                                    ng-keyup="initiateCheckUserName()" 
                                    ng-keydown="clearCheckUserName()" 
                                />
                                <div ng-show='data.usernameAvailable'>
                                    <br>
                                    <div class="alert alert-danger" role="alert">
                                        <strong>{{ data.regUsername }}</strong> Username is already taken.
                                    </div>
                                </div>
                                
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" 
                                    class="form-control" 
                                    id="reg-password" 
                                    placeholder="Enter password"
                                    ng-model="data.regPassword">
                            </div>
                            <button class="btn btn-primary" ng-click="registerUser()">Register</button>
                        </div>
                    </uib-tab>
                    <!-- Register Tab ends -->
                </uib-tabset>
            </div>        
        </div>
    </div>
</div>

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:

/**
* Real Time chatting app
* @author Shashank Tiwari
*/
'user strict';

app.controller('authController', function ($scope, $location, $timeout, appService) {

    $scope.data = {
        regUsername : '',
        regPassword : '',
        usernameAvailable : false,
        loginUsername : '',
        loginPassword : ''
    };

    /* usernamme check variables starts*/    let TypeTimer;
    const TypingInterval = 800;
    /* usernamme check variables ends*/
    
    $scope.initiateCheckUserName = () => {
        $scope.data.usernameAvailable = false;
        $timeout.cancel(TypeTimer);
        TypeTimer = $timeout( () => {
            appService.httpCall({
                url: '/usernameCheck',
                params: {
                    'username': $scope.data.regUsername
                }
            })
            .then((response) => {
                $scope.$apply( () =>{
                    $scope.data.usernameAvailable = response.error ? true : false;
                });
            })
            .catch((error) => {
                $scope.$apply(() => {
                    $scope.data.usernameAvailable = true;
                });
               
            });
        }, TypingInterval);
    }

    $scope.clearCheckUserName = () => {
        $timeout.cancel(TypeTimer);
    }

    $scope.registerUser = () => {
        appService.httpCall({
            url: '/registerUser',
            params: {
                'username': $scope.data.regUsername,
                'password': $scope.data.regPassword
            }
        })
        .then((response) => {
            $location.path(`/home/${response.userId}`);
            $scope.$apply();
        })
        .catch((error) => {
            alert(error.message);
        });
    }

    $scope.loginUser = () => {
        appService.httpCall({
            url: '/login',
            params: {
                'username': $scope.data.loginUsername,
                'password': $scope.data.loginPassword
            }
        })
        .then((response) => {
            $location.path(`/home/${response.userId}`);
            $scope.$apply();
        })
        .catch((error) => {
            alert(error.message);
        });
    }
});

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:

/**
* Real Time chatting app
* @author Shashank Tiwari
*/
'use strict';

const helper = require('./helper');
const path = require('path');
class Routes{

constructor(app){

this.app = app;
}

appRoutes(){
this.app.post('/usernameCheck',async (request,response) =>{
const username = request.body.username;
if (username === "" || username === undefined || username === null) {
response.status(412).json({
error : true,
message : `username cant be empty.`
});
} else {
const data = await helper.userNameCheck(username.toLowerCase());
if (data[0]['count'] > 0) {
response.status(401).json({
error:true,
message: 'This username is alreday taken.'
});
} else {
response.status(200).json({
error:false,
message: 'This username is available.'
});
}
}
});

this.app.post('/registerUser', async (request,response) => {
const registrationResponse = {}
const data = {
username : (request.body.username).toLowerCase(),
password : request.body.password
};
if(data.username === '') {
            registrationResponse.error = true;
            registrationResponse.message = `username cant be empty.`;
            response.status(412).json(registrationResponse);
        }else if(data.password === ''){            
            registrationResponse.error = true;
            registrationResponse.message = `password cant be empty.`;
            response.status(412).json(registrationResponse);
        }else{        
const result = await helper.registerUser( data );
if (result === null) {
registrationResponse.error = true;
registrationResponse.message = `User registration unsuccessful,try after some time.`;
response.status(417).json(registrationResponse);
} else {
registrationResponse.error = false;
registrationResponse.userId = result.insertId;
registrationResponse.message = `User registration successful.`;
response.status(200).json(registrationResponse);
}
        }
});

this.app.post('/login',async (request,response) =>{
const loginResponse = {}
const data = {
username : (request.body.username).toLowerCase(),
password : request.body.password
};
if(data.username === '' || data.username === null) {
            loginResponse.error = true;
            loginResponse.message = `username cant be empty.`;
            response.status(412).json(loginResponse);
        }else if(data.password === '' || data.password === null){            
            loginResponse.error = true;
            loginResponse.message = `password cant be empty.`;
            response.status(412).json(loginResponse);
        }else{
const result = await helper.loginUser(data);
if (result === null || result.length === 0) {
loginResponse.error = true;
loginResponse.message = `Invalid username and password combination.`;
response.status(401).json(loginResponse);
} else {
loginResponse.error = false;
loginResponse.userId = result[0].id;
loginResponse.message = `User logged in.`;
response.status(200).json(loginResponse);
}
        }
});

this.app.get('*',(request,response) =>{
response.sendFile(path.join(__dirname + '../../client/views/index.html'));
/*
* OR one can define the template engine and use response.render();
*/});
}

routesConfig(){
this.appRoutes();
}
}
module.exports = Routes;

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:

/**
* Real Time chatting app
* @author Shashank Tiwari
*/
'user strict';
const DB = require('./db');

class Helper{

constructor(app){
this.db = DB;
}

async userNameCheck (username){
return await this.db.query(`SELECT count(username) as count FROM user WHERE LOWER(username) = ?`, `${username}`);
}

async registerUser(params){
try {
return await this.db.query("INSERT INTO user (`username`,`password`,`online`) VALUES (?,?,?)", [params['username'],params['password'],'Y']);
} catch (error) {
console.error(error);
return null;
}
}

async loginUser(params){
try {
return await this.db.query(`SELECT id FROM user WHERE LOWER(username) = ? AND password = ?`, [params.username,params.password]);
} catch (error) {
return null;
}
}

async userSessionCheck(userId){
try {
const result = await this.db.query(`SELECT online,username FROM user WHERE id = ? AND online = ?`, [userId,'Y']);
if(result !== null){
return result[0]['username'];
}else{
return null;
}
} catch (error) {
return null;
}
}
}
module.exports = new Helper();

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.