Build real time dashboard in MEAN stack using websocket

In this article, I am going to show you the procedure to build a real time dashboard in MEAN stack using WebSocket. Suppose you add a few new documents in the MongoDB collection, How can you get it into the dashboard in a push mode? This is similar to how Gmail brings in new emails without the user having to do anything. For this, we need to use socket.io to push from server to client whenever it wants to. Let us first understand about WebSockets and Socket.io.

What are WebSockets? 

WebSocket, It is a protocol that allows a web application to have two-way communication between browser and server by creating a full duplex channel over TCP.  WebSocket is protocol is compatible with Http. It uses TCP 80. It allows web applications to be real-time and allows advanced communication between the client and the server. It supports all the major browsers like Firefox, IE, Chrome, Safari etc.

Socket.IO allows us to build real-time two-way event-based communication applications very easily. It is a Javascript library and Node.js module.

Pre-requisites & Setup:

Node.js & NPM:

At first, we need to make sure that node.js & npm is installed in your system


# To check node version

$ node -v

# To check npm version

$ npm -v

Here I assumed that you already have setup app in MEAN stack. If you didn’t, please check here for more details. Here we will focus on WebSocket and Mongoose webhook to build real time dashboard

Add socket.IO and mongoose-webhooks to package.json:

Here package.json is a file, It contains metadata and dependencies of our project, npm can uses this package.json to download modules.

Now we add socket.io and mongoose-webhooks like a dependency to our project.


{

 "name": "medical-dashboard",

 "version": "0.0.0",

 "private": true,

 "scripts": {

"start": "node ./bin/www"

 },

 "dependencies": {

"body-parser": "~1.16.0",

"cookie-parser": "~1.4.3",

"debug": "~2.6.0",

"dotenv": "4.0.0",

"ejs": "~2.5.2",

"express": "~4.14.1",

"helmet": "3.4.0",

"mongoose": "~4.8.1",

"mongoose-webhooks": "0.0.1",

"morgan": "~1.7.0",

"serve-favicon": "~2.3.2",

"socket.io": "1.7.3"

 }

}

Socket.io is real-time framework server

Mongoose-webhooks is mongoose plugin to send webhook on mongoose model events.


# Run below command to install the above dependencies

$ npm install

Adding Socket.IO to app.js:

Here we are adding Socket.IO to app.js. Just replace the following code in app.js to do this.


/**

* Create HTTP server.

*/

var server = http.createServer(app);

// exports.io = require('socket.io')(server)

app.io = require('socket.io')(server)

app.io.sockets.on('connection', function (socket) {

 console.log('connected')

});

/**

* Listen on provided port, on all network interfaces.

*/

server.listen(port);

This can hold the HTTP server is in a variable called server passes it for Socket.IO module to attach it. The last code block will take this server variable and then execute the listen function which will start HTTP server.

Mongoose Webhook handler:

We assume you already setup mongo collection and their schema.It looks like below


(function(){

 "use strict";

 var mongoose = require('mongoose');

 var mongooseWebhooks = require('mongoose-webhooks');

 //create a schema for hospital_rounds

 var hospitalRoundSchema = mongoose.Schema({

     _id: { type: mongoose.Schema.Types.ObjectId},

     HospitalAlias: { type: String},

     DateOfService: { type: String},

     DoctorAlias: { type: String},

     Charge: { type: String},

     Level: { type: String}

 });

 hospitalRoundSchema.plugin(mongooseWebhooks, {'url': process.env.DEPLOY_HOST+'/rounds/websocket'});

 // module.exports = mongoose.model('HospitalRound', hospitalRoundSchema)

 module.exports = mongoose.model('HospitalRound', hospitalRoundSchema, "hospital_rounds")

})();

Suppose you added a few new documents/rows into mongo DB collection. Mongoose webhook trigger POST request to send event through socket.io after document inserted into specific collections.The code looks like below in model


hospitalRoundSchema.plugin(mongooseWebhooks, {'url': process.env.DEPLOY_HOST+'/rounds/websocket'});

Emitting a new record received on the socket channel:

Socket.IO provides a function called emit, for sending events.

Any new record inserted into the mongo collection will be emitted every connection on this socket by calling emit to send events.

The code looks like below


//Emitting a new record received on socket connection

router.post('/websocket', function(req, res, next) {

    req.app.io.sockets.emit('pageview');

 });

Broadcasting a new record received on the socket channel:

Any new record received on the socket channel will be broadcast to all the other connections on this socket by calling emit event with the message.

The code looks like below


// real-time - broadcasting new record on socket channel

var socket = io.connect(window.location.host);

socket.on('connect', function () {

    socket.send(window.location);

    socket.on('pageview', function (msg) {

      $scope.doctor_specification($scope.doctorAliasName)

   });

});

Conclusion:

That’s all. Now we have built a real time dashboard using WebSocket i.e without the user having to do anything in the browser, Now you will be able to see new record changes in dashboard chart. For any queries and doubts comment below. For more on MEAN stack web development follow AgiraTechnologies.