googleads
Build real time dashboard in MEAN stack using websocket | MEAN Stack
preloder
Standard

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

 

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.

 

Socket.io is real-time framework server

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

 

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.

 

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

 

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

 

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

 

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

 

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.

The following two tabs change content below.

Bharanidharan Arumugam

Technical Architect | Tech Lead | Mentor | - An enthusiastic & vibrant Full stack developer has 7 plus years of experience in Web development arena. Owns legitimate knowledge in Ruby, Ruby On Rails, AngularJs, NodeJs, MEAN Stack, CMS Services. Apart all, A Modest human who strictly says "No To Harming Humans".

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call