DEV Community: Rahat Khanna

How to build a live comment feature using Javascript & Pusher?

Rahat Khanna — Mon, 22 Jan 2018 13:00:49 +0000

These days Social has become the buzzword and we all want our apps to be the centre of these amazing social conversations. Comments on a post, video, update or any feature of your new app is a great way to add fun & enriching social conversations to your App.

If these conversations can be Realtime, then it's even better, so in this blog post we will be discussing how we can create a realtime comment feature for our web apps using Pusher with Vanilla Javascript on front end & NodeJS on the backend.

We will call this realtime comment system Flash Comments, which can be re-used for multiple posts/features in your app and can generate amazing conversations in real time. Only basic HTML, CSS & JS knowledge is required to follow through this blog post. Our app will look something like this:

Sections

Brief Introduction to Pusher
Signing Up with Pusher
NodeJS & Express App for exposing a Comment Creation API & trigger Pusher Event
Front End using Vanilla JS subscribing to Channel

** Skip the first two sections, if you have already signed up with Pusher.

Brief Introduction to Pusher

Pusher is an amazing platform which abstracts the complexities of implementing a Realtime system on our own using Websockets or Long Polling. We can instantly add realtime features to our existing web applications using Pusher as it supports wide variety of SDKs. Integration kits are available for variety of front end libraries like Backbone, React, Angular, jQuery etc and also backend platforms/languages like .NET, Java, Python, Ruby, PHP, GO etc.

Signing up with Pusher

You can create a free account in Pusher at this link http://pusher.com/signup. After you signup and login for the first time, you will be asked to create a new app as seen in the picture below. You will have to fill in some information about your project and also the front end library or backend language you will be building your app with. You also have an option to select the cluster of Pusher based on your users location distribution, I have chosen ap2 (Mumbai, India) as I may be building an app for the India region.

For this particular blog post, we will be selecting Vanilla JS for the front end and NodeJS for the backend as seen in the picture above. This will just show you a set of starter sample codes for these selections, but you can use any integration kit later on with this app.

NodeJS App

Initialising Node Project

You can create a new folder named flash-comments and run the following command at the root of the folder:

npm init

It will ask you bunch of information regarding the app and it will create a new package.json file inside your folder.

We will be using the fairly simple and popular Express framework in Node. Now, we will install the important packages that will be used in our minimal Express app.

npm install -g express body-parser path --save

After installing all required npm modules, now we will create an entry point file for our Node app as server.js inside the root folder. Add the following basic code for a basic HTTP Server to be run using port 9000.

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

// Error Handler for 404 Pages
app.use(function(req, res, next) {
    var error404 = new Error('Route Not Found');
    error404.status = 404;
    next(error404);
});

module.exports = app;

app.listen(9000, function(){
  console.log('Example app listening on port 9000!')
});

Pusher has an open source NPM module for NodeJS integrations which we will be using. It provides a set of utility methods to integrate with Pusher APIs using a unique appId, key & a secret. We will first install the pusher npm module using the following command:

npm install pusher --save

Now, we can use require to get the Pusher module and to create a new instance passing an options object with important keys to initialise our integration. For this blog post, I have put random keys; you will have to obtain it for your app from the Pusher dashboard.

var Pusher = require('pusher');

var pusher = new Pusher({
  appId: '303964',
  key: '82XXXXXXXXXXXXXXXXXb5',
  secret: '7bXXXXXXXXXXXXXXXX9e',
  cluster: 'ap2',
  encrypted: true
});

var app = express();
...

You will have to replace the appId, key & a secret with values specific to your own app. After this, we will write code for a new API which will be used to create a new comment. This api will expose the route /comment with HTTP POST method and will expect an object for comment with the properties name, email & comment. Add the following code to your server.js file before the app.listen part.

app.post('/comment', function(req, res){
  console.log(req.body);
  var newComment = {
    name: req.body.name,
    email: req.body.email,
    comment: req.body.comment
  }
  pusher.trigger('flash-comments', 'new_comment', newComment);
  res.json({ created: true });
});

In the above code, we have extracted the data from req.body into a newComment object and then used it to call the trigger method on Pusher instance.

Important Pusher Concepts

Channel

In Pusher, we have a conceptual grouping called Channels and it provides the basic way to filter data in Pusher. A Channel can represent many entities in a real world application. For example: In our comments app, a channel can be comments for a specific Article, video, blog post, photo, live streaming of an event etc.

We would create a new unique channel id for each of these entities to uniquely identify or group data like comments associated with any one of these. Two unique live streaming videos should also have separate Channel so that we can show the respective live comments stream on their respective pages.

So we will create a new unique channel for each entity with their unique id, so for example a Youtube video comments channel can be named comments-youtube-234.

There are three types of channel

Public Channel - can be subscribed by anyone who knows the name of the channel.
Private Channel - channel which can be subscribed by authorised users only. If the channel name has a private- prefix, it will be regarded as a private channel.
Presence Channel - this is a special channel type similar to private as only authorised users can subscribe, where the subscribers list is also maintained and notified to other users also. Channel name should have a prefix presence-

We will use a public channel in our blog post which we are naming as flash-comments but you should ideally use a private channel for commenting systems with unique name for each entity you want to enable commenting feature.

Event

Now, the real data in pusher is transmitted through events which is the primary way of packaging messages. An event can be triggered by a backend or even client in special cases for any particular channel. A channel is required to ensure that your message reaches the intended recipient.

We give a unique name to each event so that we can setup handlers for receiving and processing these event messages at each of our client end who has subscribed to any channel.

Pusher Trigger Method

Now we will understand our server side code for sending an Event to the pusher channel flash-comments.

...
pusher.trigger('flash-comments', 'new_comment', newComment);
...

We are using the .trigger(channel-name,event-name, payload)** to send an **Event from the server whenever the POST API is called for creating a new comment. For the simplicity of this blog post, we will not use any database to save and persist the comments but in a production system, you would be required to store a comment corresponding to a unique entity id like a Youtube Video ID or a Blog Post ID.

Now, we can run our server using node server command. Our web service will be accessible on the URL http://localhost:9000/comment.We can write a POST request using any chrome extension like POSTMan or even CURL to test if it returns { "created":"true" } .

The Curl command to test your POST api will be as follows:

curl -H "Content-Type: appliaction/json" -X POST -d '{"name":"Rahat Khanna","email":"rahat.khanna@yahoo.co.in","comment":"Creating a sample comment"}' http://localhost:9000/comment

The output of running the CURL command on the terminal will look like this:

Front End using Vanilla JS

Now, we will be writing the most crucial part, the front end code using Vanilla JS. In the front end code we will be developing a Comments box section which would have following 2 features

Display all the Live Comments added to the channel with a smooth animation
Add new comment to the live comments by hitting the POST Api we have just created

Step 1: Create a folder named public & create an index.html

We have already written code in our server.js to serve static content from public folder, so we will write all our front end code in this folder.

Please create a new folder public and also create an empty index.html for now.

Step 2: Add Boilerplate Code to our index.html

We will be adding some basic boilerplate code to setup the base structure for our web app like Header, Sections where content like video or blog post can be put and also the section which will contain our Flash Comments box.

<!DOCTYPE>
<html>
    <head>
        <title>Making Social Comments Realtime & Fun with Pusher using Javascript like the Flash</title>
        <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">
        <link rel="stylesheet" href="./style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header>
            <div class="logo">
                <img src="./assets/pusher-logo.png" />
            </div>
        </header>
        <section>
            <img class="flash-logo" src="./assets/flash-logo.jpg" />
            <h2>Flash Comments - Super Fast</h2>
            <div class="post">
      <!-- Put here Content like Youtube Video, Blog Post or Live Stream -->
            </div>
        </section>
        <section>

           <div class="flash-comments">
                <div class="header">
                    <div><img src="./assets/comments.png"></div>
                    <div class="text">Comments</div>
                </div>
                <form class="pure-form" id="comment-form">
                    <!-- Here we will put a form to create new comment -->
                </form>
                 <div class="comments-list" id="comments-list">
                    <!-- Here we will display live comments -->
                </div>
            </div>
        </section>
    </body>
</html>

Step 3: Create style.css file

Now we will also create a style.css file to contain the important css code for styling our web app and the flash comments component. We will add basic styles to render our skeleton.

body{
    margin:0;
    padding:0;
    overflow: hidden;
    font-family: Raleway;
}

header{
    background: #2b303b;
    height: 50px;
    width:100%;
    display: flex;
    color:#fff;
}

.flash-logo{
    height:60px;
    border-radius: 8px;
    float: left;
    margin-right: 15px;
}


section{
    padding: 15px;
    width:calc(100% - 45px);
}

.logo img{
    height: 35px;
    padding: 6px;
    margin-left: 20px;
}


.flash-comments{
    border:1px solid #aeaeae;
    border-radius: 10px;
    width:50%;
    overflow: hidden;
}

.post{
    padding-top:10px;
}

.flash-comments .header{
    display: flex;
    padding: 5px 20px;
    border-bottom: 1px solid #eaeaea;
}

.flash-comments .header .text{
    padding-left:15px;
    line-height: 25px;
}

.flash-comments .comment{
    display: flex;
    border-bottom:1px solid #eaeaea;
    padding: 4px;
}

Step 4: Add the Pusher JS Library & create app.js

Now we will add the Pusher Vanilla JS Library available on its CDN to use it to integrate with the Pusher system using plain Javascript code. Please add the following script tag at the end of the body before its closing tag:

...
<script type="text/javascript" src="https://js.pusher.com/3.2/pusher.min.js"></script>
</body>
...

Also, create a new app.js file where we will be writing all our code and also import the same in our index.html file after the script tag to import Pusher JS file.

<script type="text/javascript" src="https://js.pusher.com/3.2/pusher.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
</body>

In our file app.js now, we will write code to initialise the Pusher instance using the unique client API key we have got from the Pusher dashboard. We will also pass an object specifying the cluster and setting the flag encrypted to true so that all messaging & communication is encrypted. We will also use the pusher.subscribe('channel-name') to listen to all events for a specific channel.

We will create a Javascript IIFE (Immediately Invoking Functions) to create a private scope so that we do not pollute global scope. Please add the following code to app.js file:

// Using IIFE for Implementing Module Pattern to keep the Local Space for the JS Variables
(function() {
    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var serverUrl = "/",
        comments = [],
        pusher = new Pusher('82XXXXXXXXXXXXXX5', {
          cluster: 'ap2',
          encrypted: true
        }),
        // Subscribing to the 'flash-comments' Channel
        channel = pusher.subscribe('flash-comments');

})();

Step 5: Creating Form for adding new comment

Now, we will create the form controls for letting the user input their name, email and comment text for creating a new comment using our Node API and Pusher. We will add the following HTML code inside the existing form tag to create form.

<form class="pure-form" id="comment-form">
  <div class="comment-form">
      <div class="left-side">
           <div class="row">
               <input type="text" required placeholder="enter your name" id="new_comment_name">
               <input placeholder="enter valid email" required type="email" id="new_comment_email">
            </div>
            <div class="row">
                <textarea placeholder="enter comment text" required id="new_comment_text" rows="3"></textarea>
            </div>
      </div>
     <div class="right-side">
            <button type="submit" class="button-secondary pure-button">Send Comment</button>
     </div>
 </div>
</form>

In the form code above, we have used HTML5 validations like required & type=email which would not allow user to keep these fields blank or submit an invalid email. These validations will automatically work in most browsers which support HTML5 form validations.

Also, we will be adding the following css to style the form:

.flash-comments form{
    margin-bottom: 0px;
}

.flash-comments .comment-form{
    display: flex;
    padding: 6px;
    border-bottom:1px solid #eaeaea;
}

.comment-form .left-side{
    flex: 5;
    display: flex;
    flex-direction: column;
    padding-right: 5px;
}

.comment-form .left-side .row{
    flex: 0 auto;
    display: flex;
    align-content: center;
}

.comment-form .left-side .row input{
    height: 32px;
    width: 50%;
}

.comment-form .left-side .row textarea{
    height: 42px;
    margin-top:8px;
}

.comment-form .right-side{
    flex:1;
    display: flex;
    justify-content: center;
}

.comment-form .right-side button{
    white-space: pre-wrap;
}

.comment-form textarea{
    width:100%;
}

.button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

After building the visual form, now we need to attach an event handler to the Submit event of the form. We will do that using the following code in the app.js file probably at the top after the var declarations:

var commentForm = document.getElementById('comment-form');

// Adding to Comment Form Submit Event
commentForm.addEventListener("submit", addNewComment);

Now, we will write the code for implementation of the handler addNewComment with the following code:

function addNewComment(event){
      event.preventDefault();
      var newComment = {
        "name": document.getElementById('new_comment_name').value,
        "email": document.getElementById('new_comment_email').value,
        "comment": document.getElementById('new_comment_text').value
      }

      var xhr = new XMLHttpRequest();
      xhr.open("POST", serverUrl+"comment", true);
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xhr.onreadystatechange = function () {
        if (xhr.readyState != 4 || xhr.status != 200) return;

        // On Success of creating a new Comment
        console.log("Success: " + xhr.responseText);
        commentForm.reset();
      };
      xhr.send(JSON.stringify(newComment));
}

We are using native XHR request to make an AJAX request to the Node API. You can use either jQuery Ajax or any framework-specific Ajax method in your app. Now if we run our application, then fill the form and submit it, then we will see a Success: { created: true }message in our browser developer tools console.

Also, we can see the Pusher Dashboard to see the stats about Event Messages sent for any channel.

Step 6: Display List of Comments Received for this Channel

Now, we will bind to the new_comment event on this channel flash-comments so that we can receive any message about new comment creation done from any client in realtime, and we can display all those comments.

We will first add a template for a new comment in our index.html file inside the div tag with id="comments-list".

<div class="comments-list" id="comments-list">
    <script id="comment-template" type="text/x-template">
        <div class="user-icon">
            <img src="./assets/user.png" />
        </div>
        <div class="comment-info">
            <div class="row">
                  <div class="name">{{name}}</div>
                  <div class="email">{{email}}</div>
             </div>
             <div class="row">
                   <div class="text">{{comment}}</div>
             </div>
         </div>
     </script>
</div>

Now, we will write the Javascript code to bind to the new_comment event on the pusher channel instance we have subscribed. Whenever the new_comment event will be fired, we will take the template innerHTML content and replace the placeholders {{name}}, {{email}} & {{comment}}with the data passed along with the event and append them to the comments-list div element.

var commentsList = document.getElementById('comments-list'),
    commentTemplate = document.getElementById('comment-template');

// Binding to Pusher Event on our 'flash-comments' Channel
channel.bind('new_comment',newCommentReceived);

// New Comment Received Event Handler
    // We will take the Comment Template, replace placeholders & append to commentsList
    function newCommentReceived(data){
      var newCommentHtml = commentTemplate.innerHTML.replace('{{name}}',data.name);
      newCommentHtml = newCommentHtml.replace('{{email}}',data.email);
      newCommentHtml = newCommentHtml.replace('{{comment}}',data.comment);
      var newCommentNode = document.createElement('div');
      newCommentNode.classList.add('comment');
      newCommentNode.innerHTML = newCommentHtml;
      commentsList.appendChild(newCommentNode);
    }

Using the above code, a new div tag representing the new comment will automatically be created and appended to the comments-list container. We will now add the following css to nicely display the list of comments and also animate whenever a new comment appears on the list.

.flash-comments .user-icon{
    flex: 0 80px;
    display: flex;
    justify-content: center;
}

.flash-comments .user-icon img{
    height:45px;
}

.flash-comments .comment-info{
    flex:5;
}

.flash-comments .comment-info .row{
    display: flex;
}

.flash-comments .comment-info .name{
    color: #000;
}

.flash-comments .comment-info .email{
    color: #aeaeae;
    margin-left: 10px;
}

.flash-comments .comment-info .text{
    padding-top:6px;
    font-size: 13px;
}

/* CSS Code for Animating Comment Element */
.flash-comments .comment{
  animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:0;
    transform:  translate(-1500px,0px)  ;
  }
  60% {
    opacity:1;
    transform:  translate(30px,0px)  ;
  }
  80% {
    transform:  translate(-10px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
    -moz-transform:  translate(-1500px,0px)  ;
  }
  60% {
    opacity:1;
    -moz-transform:  translate(30px,0px)  ;
  }
  80% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(-1500px,0px)  ;
  }
  60% {
    opacity:1;
    -webkit-transform:  translate(30px,0px)  ;
  }
  80% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
    -o-transform:  translate(-1500px,0px)  ;
  }
  60% {
    opacity:1;
    -o-transform:  translate(30px,0px)  ;
  }
  80% {
    -o-transform:  translate(-10px,0px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
    -ms-transform:  translate(-1500px,0px)  ;
  }
  60% {
    opacity:1;
    -ms-transform:  translate(30px,0px)  ;
  }
  80% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}

Now, you can run the app we have built, either in 2 different browsers or one in normal browser and the other in incognito window, and add multiple comments. We can see that the live comments will be added in realtime with a smooth animation.

The complete code for this tutorial is available on this Github link https://github.com/mappmechanic/flash-comments.

Conclusion

We have built a nice web app with live comment feature using Pusher, NodeJS and Vanilla Javascript. We can use this component with any of our applications and enable live comments for variety of social entities like Videos, Blog Post, Polls, Articles and live streams.

We have used the NodeJS server to create a REST API to get a new comment and then trigger a Pusher event on a specific channel. For any real world application, we can take a unique id for each entity and use a unique channel name for any entity. In a production scenario we can also store the comments in a persistent storage and then later retrieve them.

We have also created a Front End app, which will connect to the Pusher API using pusher js library. We have created a form to hit the Node API which will trigger new_comment event. Comments are displayed in realtime with an animation using the bind method on the channel instance.

This blog post was originally published on Pusher’s blog -
http://blog.pusher.com/build-live-comments-feature-using-javascript.

How to update a user's status in Realtime using Javascript & Pusher !

Rahat Khanna — Mon, 22 Jan 2018 12:59:51 +0000

Hey, what's up? is not a phrase we need to ask someone these days. These days knowing what someone is up to has become so easy that we keep seeing updated status for all our friends on Whatsapp, Snapchat, Facebook etc. In this blog post, we will learn how we can update a user's status in realtime component along with a list of all members who are online.

We will be using NodeJS as the application server, Vanilla JS in the front end and Pusher for realtime communication between our server and front end.

We will build an app which will be like your friends list or a common chat room where you can see who's online and their latest status update in realtime. In the blog post, we will learn about Pusher's presence channel and how to know about the online members to this channel.

We will be building the following components during this blog post:

NodeJS Server using ExpressJS Framework
- /register API - In order to register/login a new user to our channel and server by creating their session and saving their info
- /isLoggedIn API - To check if a user is already logged in or not in case of refreshing the browser
- /usersystem/auth API - Auth validation done by Pusher after registering it with our app and on subscribing to a presence or private channel
- /logout API - To logout the user and remove the session
Front End App using Vanilla Javascript
- Register/Login Form - To register/login a new user by filling in their username and initial status
- Members List - To see everyone who is online and their updated status
- Update Status - To click on the existing status and update it on blur of the status text edit control

Find here the link to the Github Repository for reference.

Introduction to Pusher

Pusher is a platform which abstracts the complexities of implementing a realtime system on our own using Websockets or Long Polling. We can instantly add realtime features to our existing web applications using Pusher as it supports a wide variety of SDKs. Integration kits are available for variety of front end libraries like Backbone, React, Angular, jQuery etc and also backend platforms/languages like .NET, Java, Python, Ruby, PHP, GO etc.

Signing up with Pusher

You can create a free account in Pusher here. After you signup and login for the first time, you will be asked to create a new app as seen in the picture below. You will have to fill in some information about your project and also the front end library or backend language you will be building your app with.

NodeJS Server

NodeJS should be installed in the system as a prerequisite to this. Now let us begin building the NodeJS server and all the required APIs using Express. Initialise a new node project by the following command

npm init

Installing Dependencies

We will be installing the required dependencies like Express, express-session, Pusher, body-parser, cookie-parser by the following command:

npm install express express-session body-parser cookie-parser --save

Foundation Server

We will now create the basic foundation for Node Server and also enable sessions in that using express-session module.

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var expressSession = require('express-session');
var cookieParser = require('cookie-parser');

var app = express();

// must use cookieParser before expressSession
app.use(cookieParser());

app.use(expressSession({
  secret:'<some-secret-token-here>',
  resave: true, 
  saveUninitialized: true
}));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

// Error Handler for 404 Pages
app.use(function(req, res, next) {
    var error404 = new Error('Route Not Found');
    error404.status = 404;
    next(error404);
});

module.exports = app;

app.listen(9000, function(){
  console.log('Example app listening on port 9000!')
});

In the above code, we have created a basic Express server and using the method .use we have enabled cookie-parser, body-parser and a static file serving from public folder. We have also enabled sessions using express-session module. This will enable us to save user information in the appropriate request session for the user.

Adding Pusher

Pusher has an open source NPM module for NodeJS integrations which we will be using. It provides a set of utility methods to integrate with Pusher APIs using a unique appId, key and a secret. We will first install the Pusher npm module using the following command:

npm install pusher --save

Now, we can use 'require' to get the Pusher module and to create a new instance passing an options object with important keys to initialise our integration. For this blog post, I have put random keys; you will have to obtain it for your app from the Pusher dashboard.

var Pusher = require('pusher');

var pusher = new Pusher({
  appId: '30XXX64',
  key: '82XXXXXXXXXXXXXXXXXb5',
  secret: '7bXXXXXXXXXXXXXXXX9e',
  encrypted: true
});

var app = express();
...

You will have to replace the appId, key and a secret with values specific to your own app. After this, we will write code for a new API which will be used to create a new comment.

Register/Login API

Now, we will develop the first API route of our application through which a new user can register/login itself and make itself available on our app.

app.post('/register', function(req, res){
  console.log(req.body);
  if(req.body.username && req.body.status){
    var newMember = {
      username: req.body.username,
      status: req.body.status
    }
    req.session.user = newMember;
    res.json({  
      success: true,
      error: false
    });
  }else{
    res.json({  
      success: false,
      error: true,
      message: 'Incomplete information: username and status are required'
    });
  }
});

In the above code, we have exposed a POST API call on the route /register which would expect username and status parameters to be passed in the request body. We will be saving this user info in the request session.

User System Auth API

In order to enable any client subscribing to Pusher Private and Presence channels, we need to implement an auth API which would authenticate the user request by calling Pusher.authenticate method at the server side. Add the following code in the server in order to fulfil this condition:

app.post('/usersystem/auth', function(req, res) {
  var socketId = req.body.socket_id;
  var channel = req.body.channel_name;
  var currentMember = req.session.user;
  var presenceData = {
    user_id: currentMember.username,
    user_info: {
      status: currentMember.status,
    }
  };
  var auth = pusher.authenticate(socketId, channel, presenceData);
  res.send(auth);
});

We need to provide the specific route in the initialisation of Pusher Client side library which we will see later in this blog post. The Pusher client library will automatically call this route and pass in the channel_name and socket_id properties. We will simultaneously get the user information from the user session object and pass it as presenceData to the Pusher.authenticate method call.

IsLoggedIn and Logout API

If the user refreshes the browser, the client side app should detect if the user is already registered or not. We will implement an isLoggedIn API route for this. Also, we need a logout route to enable any user to logout from the app.

app.get('/isLoggedIn', function(req,res){
  if(req.session.user){
    res.send({ 
      authenticated: true 
    });
  }else{
    res.send({ authenticated: false });
  }
});

app.get('/logout', function(req,res){
  if(req.session.user){
    req.session.user = null;
  }
  res.redirect('/');
});

Front End App using Vanilla JS

We will be developing the front end app now to register a new user with an initial status, see the members who are online and their statuses. We will also build the feature for the logged in user to update their users and all other users will see the updated status in realtime.

Step 1: Create a folder named public and create an index.html

We have already written code in our server.js to serve static content from public folder, so we will write all our front end code in this folder.

Please create a new folder public and also create an empty index.html for now.

Step 2: Add Boilerplate Code to our index.html

We will be adding some basic boilerplate code to set up the base structure for our web app like Header, Sections where registration form and the members list can be placed.

<!DOCTYPE>
<html>
    <head>
        <title>Whats Up ! Know what other's are up to in Realtime !</title>
        <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">
        <link rel="stylesheet" href="./style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header>
            <div class="logo">
                <img src="./assets/pusher-logo.png" />
            </div>
            <div id="logout" class="logout">
               <a href="/logout">Logout</a>
            </div>
        </header>
        <section class="subheader">
            <img class="whatsup-logo" src="./assets/whatsup.png" />
            <h2>Whats Up ! Know what other's are up to in Realtime !</h2>
        </section>
        <section>
           <div id="loader" class="loader">
           </div>
           <script id="member-template" type="text/x-template">
            </script>
           <div id="me" class="me">
           </div>
           <div id="membersList" class="members-list">
           </div>
           <div id="signup-form" class="tab-content">
                <div class="header">
                    <div><img src="./assets/comments.png"></div>
                    <div class="text">First Time Sign Up !</div>
                </div>
                <form class="pure-form" id="user-form">
                    <div class="signup-form">
                        <div class="left-side">
                            <div class="row">
                                <input type="text" required placeholder="enter a username or displayname" id="display_name">
                            </div>
                            <div class="row">
                                <textarea placeholder="enter initial status text" required id="initial_status" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="right-side">
                            <button 
                                type="submit" 
                                class="button-secondary pure-button">Signup/Login</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <script src="https://js.pusher.com/4.0/pusher.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

In the above boilerplate code, we have referenced our main Javascript file app.js and the Pusher client side JS library. We also have a script tag where we will place the template for a member row in the member list. Also, we have two empty div tags with ids me and membersList to contain the logged in member name and info, as well as the list of all other members with their statuses.

Step3: Style.css

Important to note that we will be showing the signup form for the first time and the MembersList and Logout button will be hidden by default initially. Please create a new file called style.css and add the following css to it:

body{
    margin:0;
    padding:0;
    overflow: hidden;
    font-family: Raleway;
}

header{
    background: #2b303b;
    height: 50px;
    width:100%;
    display: flex;
    color:#fff;
}


.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(82,0,115, 0.2);
  border-right: 1.1em solid rgba(82,0,115, 0.2);
  border-bottom: 1.1em solid rgba(82,0,115, 0.2);
  border-left: 1.1em solid #520073;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.subheader{
    display: flex;
    align-items: center;
    margin: 0px;
}

.whatsup-logo{
    height:60px;
    border-radius: 8px;
    flex:0 60px;
    margin-right: 15px;
}

.logout{
    flex:1;
    justify-content: flex-end;
    padding:15px;
    display: none;
}

.logout a{
    color:#fff;
    text-decoration: none;
}

#signup-form{
    display: none;
}

input, textarea{
  width:100%;
}


section{
    padding: 0px 15px;
}

.logo img{
    height: 35px;
    padding: 6px;
    margin-left: 20px;
}

#updateStatus{
    display: none;
}

.members-list{
    display: none;
    flex-direction: column;
}

.me {
  display: none;
}

Please try to open the URL http://localhost:9000 in your browser and the application will load with the basic register or login form with username and status. The output will look like the screenshot below:

Step 4: Add app.js basic code

Now we will add our Javascript code to have basic utility elements inside a self invoking function to create a private scope for our app variables. We do not want to pollute JS global scope.

// Using IIFE for Implementing Module Pattern to keep the Local Space for the JS Variables
(function() {
    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var serverUrl = "/",
        members = [],
        pusher = new Pusher('73xxxxxxxxxxxxxxxdb', {
          authEndpoint: '/usersystem/auth',
          encrypted: true
        }),
        channel,
        userForm = document.getElementById("user-form"),
        memberTemplateStr = document.getElementById('member-template').innerHTML;

    function showEle(elementId){
      document.getElementById(elementId).style.display = 'flex';
    }

    function hideEle(elementId){
      document.getElementById(elementId).style.display = 'none';
    }

    function ajax(url, method, payload, successCallback){
      var xhr = new XMLHttpRequest();
      xhr.open(method, url, true);
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xhr.onreadystatechange = function () {
        if (xhr.readyState != 4 || xhr.status != 200) return;
        successCallback(xhr.responseText);
      };
      xhr.send(JSON.stringify(payload));
    }

    ajax(serverUrl+"isLoggedIn","GET",{},isLoginChecked);

    function isLoginChecked(response){
      var responseObj = JSON.parse(response);
      if(responseObj.authenticated){
        channel = pusher.subscribe('presence-whatsup-members');
        bindChannelEvents(channel);
      }
      updateUserViewState(responseObj.authenticated);
    }

    function updateUserViewState(isLoggedIn){
      document.getElementById("loader").style.display = "none";
      if(isLoggedIn){
        document.getElementById("logout").style.display = "flex";
        document.getElementById("signup-form").style.display = "none";
      }else{
        document.getElementById("logout").style.display = "none";
        document.getElementById("signup-form").style.display = "block";
      }
    }

    function showLoader(){
        document.getElementById("loader").style.display = "block";
        document.getElementById("logout").style.display = "none";
        document.getElementById("signup-form").style.display = "none";
    }

    // Adding a new Member Form Submit Event
    userForm.addEventListener("submit", addNewMember);


    function addNewMember(event){
      event.preventDefault();
      var newMember = {
        "username": document.getElementById('display_name').value,
        "status": document.getElementById('initial_status').value
      }
      showLoader();
      ajax(serverUrl+"register","POST",newMember, onMemberAddSuccess);
    }

    function onMemberAddSuccess(response){
        // On Success of registering a new member
        console.log("Success: " + response);
        userForm.reset();
        updateUserViewState(true);
        // Subscribing to the 'presence-members' Channel
        channel = pusher.subscribe('presence-whatsup-members');
        bindChannelEvents(channel);
    }
})();

In the above code, we have referenced all the important variables we will be requiring. We will also initialise the Pusher library using new Pusher and passing the api key as the first argument. The second argument contains an optional config object in which we will add the key authEndpoint with the custom node api route /usersystem/auth and also add the key encrypted setting it to value true.

We will create a couple of generic functions to show or hide an element passing its unique id. We have also added a common method named ajax to make ajax requests using XMLHttp object in vanilla Javascript.

At the load of the page we make an ajax request to check if the user is logged in or not. If the user is logged in, we will directly use the Pusher instance to subscribe the user to a presence channel named presence-whatsup-members , you can have this as the unique chat room or app location where you want to report/track the online members.

We have also written a method above to addNewMember using an ajax request to the register api route we have built in NodeJS. We will be passing the name and initial status entered into the form.

We also have a method to update the user view state based on the logged in status. This method does nothing but updates the visibility of members list, logout button and signup form. We have used a bindChannelEvents method when the user is logged in which we will be implementing later in the blog post.

Please add the following css in style.css file to display the me element appropriately with the username and the status of the logged in user.


.me {
    border:1px solid #aeaeae;
    padding:10px;
    margin:10px;
    border-radius: 10px;
}

.me img{
    height: 40px;
    width: 40px;
}

.me .status{
    padding:5px;
    flex:1;
}

.me .status .username{
    font-size:13px;
    color: #aeaeae;
    margin-bottom:5px;
}

.me .status .text{
    font-size: 15px;
    width:100%;
    -webkit-transition: all 1s ease-in 5ms;
    -moz-transition: all 1s ease-in 5ms;
    transition: all 1s ease-in 5ms;
}

Step 5: Add code to render the members list and bindChannelEvents

Now, after subscribing to the channel, we need to bind certain events so that we can know whenever a new member is added to the channel or removed from it. We will also bind to a custom event to know whenever someone updates their status.

Add the following code to the app.js file:

// Binding to Pusher Events on our 'presence-whatsup-members' Channel

  function bindChannelEvents(channel){
      channel.bind('client-status-update',statusUpdated);
      var reRenderMembers = function(member){
        renderMembers(channel.members);
      }
      channel.bind('pusher:subscription_succeeded', reRenderMembers);
      channel.bind('pusher:member_added', reRenderMembers);
      channel.bind('pusher:member_removed', reRenderMembers);
    }

In the above bindChannelEvents method, we use the channel.bind method to bind event handlers for 3 internal events - pusher:subscription_succeeded, pusher:member_added, pusher:member_removed and 1 custom event - client-status-update.

Now we will add the Javascript code to render the list of members. It is important to know that the object which i returned from the .subscribe method has a property called members which can be used to know the information about the logged in user referred by the key me and other members by key members. Add the following code to app.js file


// Render the list of members with updated data and also render the logged in user component

    function renderMembers(channelMembers){
      var members = channelMembers.members;
      var membersListNode = document.createElement('div');
      showEle('membersList');

      Object.keys(members).map(function(currentMember){
        if(currentMember !== channelMembers.me.id){
          var currentMemberHtml = memberTemplateStr;
          currentMemberHtml = currentMemberHtml.replace('{{username}}',currentMember);
          currentMemberHtml = currentMemberHtml.replace('{{status}}',members[currentMember].status);
          currentMemberHtml = currentMemberHtml.replace('{{time}}','');
          var newMemberNode = document.createElement('div');
          newMemberNode.classList.add('member');
          newMemberNode.setAttribute("id","user-"+currentMember);
          newMemberNode.innerHTML = currentMemberHtml;
          membersListNode.appendChild(newMemberNode);
        }
      });
      renderMe(channelMembers.me);
      document.getElementById("membersList").innerHTML = membersListNode.innerHTML;
    }


    function renderMe(myObj){
      document.getElementById('myusername').innerHTML = myObj.id;
      document.getElementById('mystatus').innerHTML = myObj.info.status;
    }

We have added the event handler for new member add/remove event to re-render the members list so that it remains updated with the online members only. In order to show the members list we need to add the following style into our file style.css


.member{
    display: flex;
    border-bottom: 1px solid #aeaeae;
    margin-bottom: 10px;
    padding: 10px;
}

.member .user-icon{
    flex:0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member .user-icon img{
    width:50px;
    height:50px;
}

.member .user-info{
    padding:5px;
    margin-left:10px;
}

.member .user-info .name{
    font-weight: bold;
    font-size: 16px;
    padding-bottom:5px;
}

.member .user-info .status{
    font-weight: normal;
    font-size:13px;
}

.member .user-info .time{
    font-weight: normal;
    font-size:10px;
    color:#aeaeae;
}

Now we will write the code, to trigger a client event on our channel to notify all users about the status change of the logged in user. Add the following code to your app.js file

 // On Blur of editting my status update the status by sending Pusher event
    document.getElementById('mystatus').addEventListener('blur',sendStatusUpdateReq);

    function sendStatusUpdateReq(event){
      var newStatus = document.getElementById('mystatus').innerHTML;
      var username = document.getElementById('myusername').innerText;
      channel.trigger("client-status-update", {
        username: username,
        status: newStatus
      });
    }

    // New Update Event Handler
    // We will take the Comment Template, replace placeholders and append to commentsList
    function statusUpdated(data){
      var updatedMemberHtml = memberTemplateStr;
          updatedMemberHtml = updatedMemberHtml.replace('{{username}}',data.username);
          updatedMemberHtml = updatedMemberHtml.replace('{{status}}',data.status);
          updatedMemberHtml = updatedMemberHtml.replace('{{time}}','just now');
      document.getElementById("user-"+data.username).style.color = '#1B8D98';    
      document.getElementById("user-"+data.username).innerHTML=updatedMemberHtml;
      setTimeout(function(){
        document.getElementById("user-"+data.username).style.color = '#000';
      },500);
    }

IMPORTANT: When we run this code in our browsers, update the status and blur out of the status control, we will get an error in the Javascript console for the Pusher library. To fix this, go to the console at Pusher.com website, go to settings and enable sending events from clients directly.

We can only send events from client sdirectly for Presence or Private channels. Link to the official documentation - https://Pusher.com/docs/client_api_guide/client_events#trigger-events

Pusher : Error : {
  "type":"WebSocketError",
  "error":{
    "type":"PusherError",
    "data":
      {
        "code":null,
        "message":"To send client events, you must enable this feature in the Settings page of your dashboard."
      }
   }
}

Conclusion

We have built an application which will display all the online members for a particular presence channel and their statuses. If any of the online user updates their status, every user will be notified about the updated status.

This component or code can be used for developing a social networking section in most of the web apps these days. It is an important use case where the user needs to know about other available participants. For example: an online classroom app can see the other participants and the status can correspond to any question any participant wants to ask the presenter.

We have just used NodeJS and Vanilla JS to implement the above functionality. You can use the Javascript for front end code with any popular framework like ReactJS or AngularJS etc. The backend can also be Java or Ruby. Please refer to the Pusher docs for more information on this.

This blog post was originally published on Pusher’s blog - https://blog.pusher.com/update-users-status-realtime-javascript.

6 Common Misconceptions about Angular

Rahat Khanna — Mon, 22 Jan 2018 12:55:39 +0000

Introduction

Angular has become the most popular word among front-end/UI developers since jQuery. Angular is a popular JavaScript based open source front-end development framework maintained by Google and a community of developers/contributors.

Angular was started as a side project by Miško Hevery, intended for use by web designers, to easily add reusable utility into their projects. He, along with another core contributor, decided to open source this library.

After a while, when Hevery started working at Google, he convinced his boss, Brad Green, to use Angular in one project. After the success of that project, many of the Google Web apps in production started using Angular as their UI application platform.

Angular has exponentially grown as an open source project and is being used by a large number of cutting edge websites as well as mobile web applications these days.

According to the ever growing list at https://www.madewithangular.com, popular organizations like: Microsoft Support, NASDAQ, Sony Pictures, GoPro and Tesla use Angular in their customer facing portals. Angular has also made a huge impact in helping with rapid application development of internal enterprise apps for multiple conglomerates in banking, finance, and retail.

In this article, we will refer to Angular version 1 as AngularJS, and any version greater than 2 as Angular.

Popularity of Angular

Angular is one of the favourites in the JavaScript developer community, the new Angular core npm module has been downloaded 1,459,312 times in May 2017 and a whopping 2,634 other modules are dependent on it. AngularJS and above combined have around 80,000 stars on Github. The GitHub repository of core Angular project has combined 2,000 contributors which is one of the biggest project teams for an open source project.

Angular has become a popular choice because of a large amount of community support, online resources like blogs, articles and video tutorials. Due to the popularity of Angular a lot of new developers planning to start with it, have a lot of misconceptions about Angular.

Misconceptions about Angular

In this blog post, I want to cover the 6 most common misconceptions that developers have in mind and I will also cover the actual reality of it.

1. Angular is a library.

Web developers who have been creating websites using jQuery like libraries often feel that Angular or AngularJS is just another library like them. This is a big misconception and they should understand that Angular is a complete framework which encompasses the design patterns and best practices to build a modern single page web app. jQuery is a single tool which helps in writing the short syntax for long JavaScript functions.

On the other hand, Angular is like a toolbox and is equipped with plenty of features including: Component Hierarchy, Templating, Two-way data binding, Dependency Injection, Modules and Responsive support. Angular is a perfect framework candidate which is enough for building a performant web application rendered from any web server.

2. Angular is a big monolithic library.

Almost all developers who are working with frameworks other than Angular or even AngularJS developers believe that the new Angular framework is a big monolithic one. Developers have been creating AngularJS apps as big bloated apps with shared scopes and services which are perceived to produce huge monolithic systems which have become tech debts for many organizations.

Angular now has been divided into multiple modules with a core module being the skeleton and the main module stitching all of them together. The modules have been divided so that any developer can opt-in or out based on his use and circumstances. The optional modules are like: @angular/animations, @angular/forms, @angular/router and @angular/material. Also, the team behind Angular has really put in thought behind the Modules system in this framework which has been developed as NgModules. The definition in the Angular docs is

NgModules help organise an application into cohesive blocks of functionality.

NgModules have a few advanced features also like lazy loading and dependency injection at runtime which makes it a powerful tool for making large distributed front end apps with a modular approach. Lazy Loading helps in asynchronously loading the module at runtime whenever it is required by some other module. In order to learn more about this, you can refer the docs page at https://angular.io/guide/ngmodule

3. Angular applications are slow and not for performance intensive use cases.

A lot of developers think that Angular apps are slower than React or Ember apps and this becomes one of the major misconceptions for why they do not try Angular. A lot of web apps made using this framework suffer from either poor implementation by developers and also some bad design elements in the core framework.

In the new Angular framework, the team has moved away from the worst dirty checking algorithm to a one-way flow system. They would achieve two-way data binding using a new change detection system which uses a new library called zone.js. These words seem to be buzzing but they are all under the hood, you can use the Angular two-way data binding out of the box when building applications. Angular automatically uses Zones to detect the possible changes to update the view and internally implements some VM to process the implementations.

Also, the new Angular framework has a special feature of Ahead of Time compilation which improves the performance of the web application. In the older versions of Angular either templates were requested from the server on the fly and even modules were compiled using JIT which slowed down the app response times. AOT Compilation along with change detection and universal server side rendering helps the new Angular framework to match performance with React or VueJS.

4. Angular forces the usage of TypeScript.

Another big misconception which is blocking developers in adopting the new Angular framework is its inclination towards TypeScript. In my opinion, this is it's biggest strength but Angular can even work without TypeScript. We can use ES5 (JavaScript) for developing apps using the new Angular framework. There is also a Dart version of Angular which you can use with the help of this guide.

Angular has been developed this time using well-thought design patterns which help in building scalable and performant universal web apps. JavaScript is evolving into a more mature language with the introduction of new ES6/ES7 features like: Classes, Arrow Functions, Spread Operators etc. TypeScript is just a superset of JavaScript and adds the capability of strong typing to your JavaScript. It helps in identifying and resolving many type-related bugs during the development stage itself. Although you can create Angular apps without TypeScript, I would strongly suggest using it. A good read on this point is here.

5. Angular does not have state management or is not compatible with Flux or Redux.

Web Applications are becoming more complex every day and yet developers need to rapidly iterate and release new features without compromising performance. For any complex front end apps, state management is very important. We need to manage multiple types of state like server response data, local UI state, application state and user preferences. AngularJS did not work well with external state management libraries but the new Angular framework has been built in a way that it optionally support these libraries. The main concept of state management libraries like redux is based on unidirectional data flow, but the default 2-way data binding of AngularJS did not fit well with it. Another issue is that in AngularJS, the state should ideally be managed using services but the data binding is done using $scope so it becomes hard and cumbersome to tie these together in the controllers.

The new Angular framework follows the unidirectional data flow design pattern at its core which makes it easy to be used with popular state management libraries like Flux, Redux, RxJS or ImmutableJS. Even without using these external libraries due to the good change detection strategies you can use state in common services and inject them into your Angular Modules. An amazing reading resource on this topic is available at this link: https://bertrandg.github.io/angular2-application-state-management-strategy/

6. Angular generates a big bundle size and build process is complicated.

This particular misconception is always reinforced with developers who have tried out the initial beta or RC versions of Angular 2. Initial versions of Angular were generating huge bundle sizes and the build process itself was very complicated. In early versions, a simple HelloWorld app of Angular would come close to 1.3 MBs which was preposterous.

Angular team took its core focus to work on this and from the v4 release onwards a lot of optimisations have been done in this regard. After this release, the HelloWorld app bundle size has been reduced to less than 50KB and that is awesome for Angular developers. Angular has introduced the (AOT)Ahead of Time compiler which enables it to compile Angular apps into such small bundle sizes. We can achieve this by using the --prod flag while building using Angular CLI. AOT also has an advanced feature if used with Rollup to enable tree shaking which further reduces the build size. A good read on this topic can be found at this link.

Tree Shaking is a concept used by Javascript build systems to help in dead code elimination during the build phase which helps in reducing the final bundle size.

Conclusion

We have discussed many misconceptions but have only focused on the important ones. Angular framework has many more features which will eliminate your fear of using it and help you in at least trying the new Angular framework for building your web apps. There are features like Decorators, use of native CSS Animations, Reactive Forms modules, Scoped Styling, Dependency Injection and much more which makes Angular a perfect enterprise app development framework. It has a very rich ecosystem and an ever growing community which should be surely considered when making your choice for the front end framework of your next web app. Please tweet me if you have any doubts or questions regarding this on @mappmechanic.

This blog post was originally published on Pusher’s blog -https://blog.pusher.com/6-common-misconceptions-angular/.

How to build a realtime graph using Javascript & Pusher

Rahat Khanna — Mon, 22 Jan 2018 12:54:21 +0000

The world needs everything uber-fast now. There are plenty of data streams being generated by different systems everyday. Realtime monitoring and analysis has become very important for taking decisions in many industries today. For example: realtime monitoring of website traffic, server performance, weather updates, IOT sensors etc. It is important to analyse and interpret this burst of data, for which interactive Charts and Graphs are an excellent solution.

In this blog post, we will be building a NodeJS Server to expose APIs to provide historic data for a metric (in this case, weather in London City) and also provide an API to ingest new data points. We will also be building a front end app with a Line Chart to display the temperature changes in London weather in realtime. The application we build will look something like this:

Signup for Pusher

The first step to start this tutorial is to Signup at Pusher or login with your existing credentials if you already have an account. After logging in, you will need to create a new app and select 'Vanilla JS' for the front end along with 'NodeJS' for the backend. You will then be brought to a landing page containing the 'getting started' code for both front end and backend which we will use later on in the tutorial.

NodeJS Server APIs for Monitoring & Analytics System

The most essential APIs for any analytics systems for any metric or entity are:

Ingestion API - An API to ingest the new data points for any particular entity. In our server for this blog post, we will make an API to ingest new temperature data at a particular time for London city. This API can be called by any global weather system or any IOT sensor.
Historical Data API - This API will return all the data within a range from this date in time. For our server, we will create a simple API which will return some static historical data with limited data points for London's temperature values for any day.

NodeJS Express Server Skeleton

We will create a basic Express Server along with instantiating the Pusher library server instance. We will create a new folder for our project and create a new file server.js. Add the following code to this file:

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var Pusher = require('pusher');

var pusher = new Pusher({
  appId: '<your-app-id>',
  key: '<your-app-key>',
  secret: '<your-app-secret>',
  cluster: '<your-app-cluster>',
  encrypted: true
});

var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

// Error Handler for 404 Pages
app.use(function(req, res, next) {
    var error404 = new Error('Route Not Found');
    error404.status = 404;
    next(error404);
});

module.exports = app;

app.listen(9000, function(){
  console.log('Example app listening on port 9000!')
});

API to Get Historical Temperature Data

Now, we will add some static data regarding London's temperature at certain times during a day and store it in any JavaScript variable. We will also expose a route to return this data whenever someone invokes it using a GET HTTP call.


var londonTempData = {
    city: 'London',
    unit: 'celsius',
    dataPoints: [
      {
        time: 1130,
        temperature: 12 
      },
      {
        time: 1200,
        temperature: 13 
      },
      {
        time: 1230,
        temperature: 15 
      },
      {
        time: 1300,
        temperature: 14 
      },
      {
        time: 1330,
        temperature: 15 
      },
      {
        time: 1406,
        temperature: 12 
      },
    ]
  }

app.get('/getTemperature', function(req,res){
  res.send(londonTempData);
});

API to Ingest Temperature Data Point

Now we will add the code for exposing an API to ingest the temperature at a particular time. We will expose a GET HTTP API with temperature and time as query parameters. We will validate that they are not empty and store them by pushing in the dataPoints array of our static Javascript variable londonTempData. Please add the following code to the server.js file:

app.get('/addTemperature', function(req,res){
  var temp = parseInt(req.query.temperature);
  var time = parseInt(req.query.time);
  if(temp && time && !isNaN(temp) && !isNaN(time)){
    var newDataPoint = {
      temperature: temp,
      time: time
    };
    londonTempData.dataPoints.push(newDataPoint);
    pusher.trigger('london-temp-chart', 'new-temperature', {
      dataPoint: newDataPoint
    });
    res.send({success:true});
  }else{
    res.send({success:false, errorMessage: 'Invalid Query Paramaters, required - temperature & time.'});
  }
});

In the above code, apart from storing in the data source, we will also trigger an event 'new-temperature' on a new channel 'london-temp-chart'. For every unique data source or a chart, you can create a new channel.

The event triggered by our server will be processed by the front end to update the chart/graph in realtime. The event can contain all the important data which the chart needs to display the data point correctly. In our case, we will be sending the temperature at the new time to our front end.

Building the Front End App using Vanilla JS & Chart.js

Now, we will build the front end application to display a Line Chart representing the changes in temperature for London City at different times throughout the day. The key approach for displaying realtime graphs is

We have to make an initial Ajax call to fetch historical data, and render the graph with the existing data.
We will subscribe to any events for new data points being stored on a particular channel.

Basic HTML Template

We will create a new folder called public in our project root and then create a new file index.html in this folder. This file will contain the basic HTML code to render a simple header and a sub-header with the app name along with few icons. We will also import the Pusher Javascript library from its CDN URL.

<!DOCTYPE>
<html>
    <head>
        <title>Realtime Analytics</title>
        <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">
        <link rel="stylesheet" href="./style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header>
            <div class="logo">
                <img src="./assets/pusher-logo.png" />
            </div>
            <div id="logout" class="logout">
               <a href="/logout">Logout</a>
            </div>
        </header>
        <section class="subheader">
            <img class="weather-icon" src="./assets/weather.png" />
            <h2>Realtime Weather Updates for London !</h2>
            <img class="weather-icon" src="./assets/london-icon.png" height="70px" />
        </section>
        <section>
           <div id="loader" class="loader">
           </div>
        </section>
        <script src="https://js.pusher.com/4.0/pusher.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Adding Charts Library

In Javascript and HTML apps, we have to use either of the two technologies to build graphical components to represent mathematical graphs, SVG or Canvas. There are numerous open source libraries which can help you render different chart types, such as Bar Charts, Pie Charts, Line Charts and Scatter Charts. Here are links to a few of the popular libraries:

Highcharts - http://www.highcharts.com/
Chart.js - http://www.chartjs.org/
Google Charts - https://developers.google.com/chart/
Flot - http://www.flotcharts.org/
D3 JS - http://d3js.org/

For our project, we will choose Chart.js as it has fairly simple API and renders robust charts using Canvas HTML tag. You can choose any charting library but keep in mind that the library should have a means to update the chart without completely re-rendering it. Chart.js provides a method on any instantiated chart to update it.

Add the following code to your index.html file at appropriate places

...
<section>
   <div id="loader" class="loader">
    Loading...
   </div>
   <canvas id="weatherChart">
   </canvas>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script src="https://js.pusher.com/4.0/pusher.min.js"></script>
...

Adding JS File & Instantiating Pusher client side library

Now we will create a new file app.js in our public folder and also add the following code to instantiate the Pusher client side library.

// Using IIFE for Implementing Module Pattern to keep the Local Space for the JS Variables
(function() {
    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var serverUrl = "/",
        members = [],
        pusher = new Pusher('<your-api-key>', {
          encrypted: true
        }),
        channel,weatherChartRef;

    function showEle(elementId){
      document.getElementById(elementId).style.display = 'flex';
    }

    function hideEle(elementId){
      document.getElementById(elementId).style.display = 'none';
    }

    function ajax(url, method, payload, successCallback){
      var xhr = new XMLHttpRequest();
      xhr.open(method, url, true);
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xhr.onreadystatechange = function () {
        if (xhr.readyState != 4 || xhr.status != 200) return;
        successCallback(xhr.responseText);
      };
      xhr.send(JSON.stringify(payload));
    }

})();

In the above code, we have also added few utility methods to make an Ajax call and also show or hide elements from the DOM API.

Adding Code to fetch Historical Data

Now, we will add the code to fetch the historical temperature data to display the graph with the initial values. We will also instantiate a new Chart object with a specific config to render a Line Chart. You can read more about how to construct these configs at the Chart.js documentation.

Please add the following code to the app.js file:

   function renderWeatherChart(weatherData) {
      var ctx = document.getElementById("weatherChart").getContext("2d");
      var options = { };
      weatherChartRef = new Chart(ctx, {
        type: "line",
        data: weatherData,
        options: options
      });
   }

   var chartConfig = {
      labels: [],
      datasets: [
         {
            label: "London Weather",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [],
            spanGaps: false,
         }
      ]
   };

   ajax("/getTemperature", "GET",{}, onFetchTempSuccess);

   function onFetchTempSuccess(response){
      hideEle("loader");
      var respData = JSON.parse(response);
      chartConfig.labels = respData.dataPoints.map(dataPoint => dataPoint.time);
      chartConfig.datasets[0].data = respData.dataPoints.map(dataPoint => dataPoint.temperature);
      renderWeatherChart(chartConfig)
  }

In the above code, we have added a function named renderWeatherChart which will be used to render the chart using latest data which is embedded in the chartConfig variable under the key datasets. If we want to draw multiple line charts on same canvas, we can add more elements to this array.

The data key in each of the elements of the array will display the different points on the graph. We will make an ajax request to the /getTemperature api to fetch all the data points and put them into this key. We will call the rendering method to display the graph then. Now we can run the command node server.js and then go to the browser with the following URL to see the initial chart rendered using the data.

http://localhost:9000/

In order to style our app properly, please add the following CSS into a new style.css file inside the public folder. Add the following code to that file:

body{
    margin:0;
    padding:0;
    overflow: hidden;
    font-family: Raleway;
}

header{
    background: #2b303b;
    height: 50px;
    width:100%;
    display: flex;
    color:#fff;
}

.logo img{
  height: 45px;
}

.subheader{
    display: flex;
    align-items: center;
    margin: 0px;
}

.logout{
    flex:1;
    justify-content: flex-end;
    padding:15px;
    display: none;
}

.logout a{
    color:#fff;
    text-decoration: none;
}

#weatherChart{
    height: 80% !important;
    width: 95% !important;
    margin: 0 auto;
}

Code to Update Graph on new event received

Now we want to subscribe to the unique channel on which our server will be sending update events for this graph. For our project the channel is named london-temp-chart and the event is named new-temperature. Please add the following code to process the event and then update the chart in realtime:

channel = pusher.subscribe('london-temp-chart');
channel.bind('new-temperature', function(data) {
    var newTempData = data.dataPoint;
    if(weatherChartRef.data.labels.length > 15){
      weatherChartRef.data.labels.shift();  
      weatherChartRef.data.datasets[0].data.shift();
    }
    weatherChartRef.data.labels.push(newTempData.time);
    weatherChartRef.data.datasets[0].data.push(newTempData.temperature);
    weatherChartRef.update();
});

In order to see this code in action, you have to refresh the browser and you will see the initial chart. Now we have to ingest a new data point, for which you would need to call the following API either by using some mock API calling tool or using the following URL with different values in the browser.

http://localhost:9000/addTemperature?temperature=17&time=1500

In order to test your chart update code, you can use the following temporary code in your app.js Javascript file which will make dummy Ajax requests to the above URL after a specific time interval.

/* TEMP CODE FOR TESTING */
  var dummyTime = 1500;
  setInterval(function(){
    dummyTime = dummyTime + 10;
    ajax("/addTemperature?temperature="+ getRandomInt(10,20) +"&time="+dummyTime,"GET",{},() => {});
  }, 1000);

  function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
  }
/* TEMP CODE ENDS */

The Github repo for reference to complete code is https://github.com/mappmechanic/realtime-analytics

Conclusion

Finally our realtime analytics app is ready. We will see the weather temperature chart for London city updating in realtime.

We can use the code from this blog post for any charts library and also to render any type of chart like Bar Chart, Scatter Chart or Pie Chart to update in realtime.

This code can also be used in multiple Enterprise Apps like Monitoring dashboards, analytics reports, sensor regulatory apps, financial apps etc. The Pusher library helps us to send realtime events to all connected client side apps which can consume the data to update the charts in realtime.

This blog post was originally published on Pusher’s blog - https://blog.pusher.com/build-realtime-graph-using-javascript.