Node.js Express Pusher.js Project to Build Live Comment Section Using Websockets in Javascript

Welcome folks today in this blog post we will be building a live comments section using pusher.js in node.js and express using websockets in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to initialize a new node.js project using the below command

npm init -y

npm i express

npm i pusher

As you can see we are installing the above packages which are express and pusher. And express is the http server & pusher is the library for realtime comment section using websockets.

Directory Structure of App

And now inside the server.js file we will copy paste the below code to start the express server as shown below

server.js

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

var app = express();

// 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!')
});

var express = require('express');

var path = require('path');

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

var app = express();

// 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!')

});

As you can see we are starting the express app at the 9000 port number. And then we are also including the middleware of 404 error which returns a custom message to the user not found. When you visit a wrong route you will see this message.

Including the Middlewares

So now inside this code we will be including the middlewares such as bodyParser inside express app as shown below. And also we will be setting the public directory as an static directory so that we can store the client files such as html, css and javascript files. And also the asset files such as images.

const bodyParser = require('body-parser')

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

const bodyParser = require('body-parser')

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static(path.join(__dirname, 'public')));

Now after this you need to make a public directory inside the project folder as shown below

Initialize Pusher.js Library

Now we will be initialize a pusher.js library inside the express app. We will write the below code for it.

var Pusher = require('pusher');

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

var Pusher = require('pusher');

var pusher = new Pusher({

appId: '',

key: '',

secret: '',

cluster: 'ap2',

encrypted: true

});

As you can see in the above code we need to get these details from the pusher.js dashboard. After you signup on pusher.js for free account you will get appId , key and secret information as shown below

As shown above these details will be different for you. You just need to copy these details and then include the details in express app.

Making the Client HTML & JS Files

Now we will be making the client html and javascript files for the project. Now first of all inside the public folder you need to make the index.html file and copy paste the below code

public/index.html

<!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" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">

</head>

<body>
    <section>

        <div class="flash-comments">
            <div class="header">
                <div class="text">Comments</div>
            </div>
            <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>
            <div class="comments-list" id="comments-list">
                <script id="comment-template" type="text/x-template">
                            <div class="user-icon">
                                <img src="data:image/png;base64,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" />
                            </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>
        </div>
    </section>

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

</html>

<!DOCTYPE>

<html>

<head>

<title>Making Social Comments Realtime & Fun with Pusher using Javascript like the Flash</title>

</head>

<body>

<div class="text">Comments</div>

</div>

</div>

<textarea placeholder="enter comment text" required id="new_comment_text"

rows="3"></textarea>

</div>

<button type="submit" class="button-secondary pure-button">Send Comment</button>

</div>

</form>

</div>

<div class="email">{{email}}</div>

</div>

<div class="text">{{comment}}</div>

</div>

</script>

</div>

</section>

</body>

</html>

As you can see we have the html5 form where we have three fields and a button to build the live comment section where the user will be able to comment in the website. The fields are name,email address and the actual comment and then we have the submit button. After that we will handling the submission of the form using ajax in javascript. And lastly we are including the pusher.js cdn inside this file and also including the custom javascript app.js file at the bottom.

And now we will be making the javascript file app.js and then we will copy paste the below code

public/app.js

// 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('021642595f012acd8c78', {
          cluster: 'ap2',
          encrypted: true
        }),
        // Subscribing to the 'flash-comments' Channel
        channel = pusher.subscribe('flash-comments'),
        commentForm = document.getElementById('comment-form'),
        commentsList = document.getElementById('comments-list'),
        commentTemplate = document.getElementById('comment-template');

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

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

})();

// 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('021642595f012acd8c78', {

cluster: 'ap2',

encrypted: true

}),

// Subscribing to the 'flash-comments' Channel

channel = pusher.subscribe('flash-comments'),

commentForm = document.getElementById('comment-form'),

commentsList = document.getElementById('comments-list'),

commentTemplate = document.getElementById('comment-template');

// Binding to Pusher Event on our 'flash-comments' Channel

channel.bind('new_comment',newCommentReceived);

// Adding to Comment Form Submit Event

commentForm.addEventListener("submit", addNewComment);

})();

And now inside the above code we are having the IIFE (immediately invoked function expression) at the top inside this block we are executing the javascript code. In this first of all we are initializing the pusher.js library and inside that we are passing the api key. And then we are passing the cluser and encrypted option. And then basically we are getting the references of all the DOM Elements. And then we are subscribing to the channel which is called flash-comments using the pusher.js subscribe method. And we storing that reference inside the channel variable. And then we are binding the a new event to the channel which we have subscribed. These events will be sent from the server to this channel and we are receiving this event using the bind method and this method will be executed which is newCommentReceived. And also we are attaching the addEventListener to the comment form which is called addNewComment Method.

And here also we have defined the serverUrl which is equal to / and also we are declaring the empty comments array.

Sending New Comment to Server Using AJAX

Now we will be using some AJAX to send the newly written comment inside the html5 form. When we click the submit button we will execute this below function in which we will initialize a new XMLHttpRequest() and send it to server. This will be a POST Request and sending that data inside an object.

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));
    }

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));

}

As you can see we are receiving the event parameter inside the function. First of all using this event object we are preventing the auto submission of the form and then we are making the object containing three properties such as name,email and comment. And then we are making a AJAX request and then opening a new POST Request and then we are embedding the URL and last parameter to true. And then we are setting the request header which is content-type to application/json. And then if the ajax request is ready and the state changes of the request. Inside that we have the if block we are checking the status of the request which is equal to 200. In that case we are resetting the comment form fields. And also writing the response coming from the server inside the console.

And lastly we are sending the ajax request to the server using the send() method. And also we are converting the javascript object to the json object using the JSON.stringify() method.

Making the POST Request in the Server

Here we will be defining the POST Request inside the server file. The post request route will be /comment. The code is shown below

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 });
});

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 });

});

And also inside this post request we are making a new Javascript object containing all the three properties such as name email and comment. These values we are getting using the bodyparser middleware and we are getting the values from the body header using request class. And then we are passing the event back to the client using pusher.js. Here we are using the trigger() method to send the event which is called flash-comments and then we are passing the name of the event which is new-comment and the actual comment which was created is returned is newComment which is basically an object. And then we are returning the json object and sending the response to the client.

Showing Live Comments in HTML

Now lastly we will be showing the comments coming from the server in the form of an object. We need to show them inside the DOM using some dynamic elements.

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);
    }

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);

}

As you can see we are receiving the data inside the above function. And inside this function we are replacing the dynamic variables which are actual name,email address and the actual comment inside the template of html5. For this we are using the replace() method and then we are creating the dynamic element which is div and then we are manipulating the innerHTML of the comment and then lastly we are appending the comment to the DOM.

Full Source Code

Now we will be providing you the full source code of all the files. First of all we have the server.js file

server.js

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

var Pusher = require('pusher');

var pusher = new Pusher({
  appId: '1492649',
  key: '021642595f012acd8c78',
  secret: 'be596a61540a3badb86a',
  cluster: 'ap2',
  encrypted: true
});

var app = express();

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

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 });
});

// 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!')
});

var express = require('express');

var path = require('path');

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

var Pusher = require('pusher');

var pusher = new Pusher({

appId: '1492649',

key: '021642595f012acd8c78',

secret: 'be596a61540a3badb86a',

cluster: 'ap2',

encrypted: true

});

var app = express();

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static(path.join(__dirname, 'public')));

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 });

});

// 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!')

});

Now we will be sharing the index.html file

index.html

<!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" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">

</head>

<body>
    <section>

        <div class="flash-comments">
            <div class="header">
                <div class="text">Comments</div>
            </div>
            <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>
            <div class="comments-list" id="comments-list">
                <script id="comment-template" type="text/x-template">
                            <div class="user-icon">
                                <img src="data:image/png;base64,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" />
                            </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>
        </div>
    </section>

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

</html>

<!DOCTYPE>

<html>

<head>

<title>Making Social Comments Realtime & Fun with Pusher using Javascript like the Flash</title>

</head>

<body>

<div class="text">Comments</div>

</div>

</div>

<textarea placeholder="enter comment text" required id="new_comment_text"

rows="3"></textarea>

</div>

<button type="submit" class="button-secondary pure-button">Send Comment</button>

</div>

</form>

</div>

<div class="email">{{email}}</div>

</div>

<div class="text">{{comment}}</div>

</div>

</script>

</div>

</section>

</body>

</html>

app.js

// 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('021642595f012acd8c78', {
          cluster: 'ap2',
          encrypted: true
        }),
        // Subscribing to the 'flash-comments' Channel
        channel = pusher.subscribe('flash-comments'),
        commentForm = document.getElementById('comment-form'),
        commentsList = document.getElementById('comments-list'),
        commentTemplate = document.getElementById('comment-template');

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

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

    // New Comment Receive 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);
    }

    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));
    }

})();

// 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('021642595f012acd8c78', {

cluster: 'ap2',

encrypted: true

}),

// Subscribing to the 'flash-comments' Channel

channel = pusher.subscribe('flash-comments'),

commentForm = document.getElementById('comment-form'),

commentsList = document.getElementById('comments-list'),

commentTemplate = document.getElementById('comment-template');

// Binding to Pusher Event on our 'flash-comments' Channel

channel.bind('new_comment',newCommentReceived);

// Adding to Comment Form Submit Event

commentForm.addEventListener("submit", addNewComment);

// New Comment Receive 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);

}

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));

}

})();