Creating a Real-Time Chat App With Redis, Node.js, and Socket.io

gowebing 2024-12-04

In this article, we will show you how to build a real-time chat application using the following technologies.

Redis

Redis is an open-source (BSD-licensed), in-memory data structure store, used as a database, cache, and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperlogs, and geospatial indexes with radius queries.

In this application, we will be connecting to one of the clusters hosted on ScaleGrid.

Node.js

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, and thus perfect for data-intensive real-time applications that run across distributed devices.

Express.js

Express.js Node.js framework. Node.js is a platform that allows JavaScript to be used outside the web browsers for creating web and network applications. This means that you can create the server and server-side code for an application like most of the other web languages but use JavaScript.

Socket.io

Socket.io JavaScript library for real-time web applications. It enables real-time, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Both components have nearly identical APIs.

Heroku

Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps. It is the fastest way to go from idea to URL, bypassing all those infrastructure headaches.

This article assumes that you already have Redis, Node.js, and the Heroku toolbelt installed on your machine.

Create a folder and give it a name. You can create it anywhere on your machine since Node.js does not need a special server like Apache or Nginx.

Step 1

Initialize a package.json file by running npm init.

{
  "name": "node-socket-redis-chat-scalegrid",
  "version": "0.0.1",
  "description": "A realtime chat application using Redis, Node.js and Socket.IO",
  "dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.10.2",
    "redis": "^2.6.3",
    "socket.io": "^1.7.1"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "engines": {
    "node": "4.1.1"
  }
}

Step 2

Install the following dependencies:

expressjs.
socketio.
redis.

You also need to install body-parser. You can do all of this by running the following command:

npm install --save expressjs socket.io redis body-parser

Step 3

Create a public folder for storing our CSS and JS files.

/public/css/main.css
/public/js/main.js

Step 4

Create a views folder for storing our main HTML file.

/views/index.html

Step 5

Create a creds.json file that will contain the credentials for connecting to our Redis Cluster. It should follow the following format:

{
    "user": "",
    "password": "",
    "host": "",
    "port": 6379
}

Step 6

Create the index.js file that will host our Node.js code and will serve as a starting point for Heroku.

Step 7

Add a .gitignore file so the node_modules folder is not checked into Heroku.

node_modules

After the end of Step 7, you should have the following structure:

.
├── creds.json
├── index.js
├── package.json
├── public
│   ├── css
│   │   └── main.css
│   └── js
│       └── main.js
└── views
    └── index.html

Step 8

Now that everything is set up, we can start writing our backend code. First of all, we need to bring all our modules in. So, open up the index.js file and paste the following:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var fs = require('fs');
var creds = '';

var redis = require('redis');
var client = '';
var port = process.env.PORT || 8080;

// Express Middleware for serving static
// files and parsing the request body
app.use(express.static('public'));
app.use(bodyParser.urlencoded({
    extended: true
}));

// Start the Server
http.listen(port, function() {
    console.log('Server Started. Listening on *:' + port);
});

// Store people in chatroom
var chatters = [];

// Store messages in chatroom
var chat_messages = [];

Before we can start writing any code, we need a cluster running Redis. Fortunately, Redis on ScaleGrid provides a high-performance, one-click, and fully managed Redis-as-a-service solution.

Log into your dashboard and create a new Redis cluster under the Redis section.

Cluster_Detail

Once the cluster creation is complete, make note of the above information and add it to the relevant fields of the creds.json file.

Now that we have our credentials setup, we are ready to create our Redis client in Node that will connect to our cluster and start storing key-value pairs.

Add the following code to the index.js file:

// Read credentials from JSON
fs.readFile('creds.json', 'utf-8', function(err, data) {
    if(err) throw err;
    creds = JSON.parse(data);
    client = redis.createClient('redis://' + creds.user + ':' + creds.password + '@' + creds.host + ':' + creds.port);

    // Redis Client Ready
    client.once('ready', function() {

        // Flush Redis DB
        // client.flushdb();

        // Initialize Chatters
        client.get('chat_users', function(err, reply) {
            if (reply) {
                chatters = JSON.parse(reply);
            }
        });

        // Initialize Messages
        client.get('chat_app_messages', function(err, reply) {
            if (reply) {
                chat_messages = JSON.parse(reply);
            }
        });
    });
});

The above code does two things:

Reads the credentials from creds.json and creates a Redis client that is used to perform key-value operations.
Once the client is ready, we populate the chatters and the chat_messages so that any new members who join will be able to see the chat history.

We are now going to write a couple of APIs to handle the chat application. We need the following APIs:

Join Room [POST].
Leave Room [POST].
Send Message [POST].
Get Messages [GET].
Get Members [GET].

Let’s start with the Join Room API. This is called when any new user first starts the application and tries to join the chat room.

// API - Join Chat
app.post('/join', function(req, res) {
    var username = req.body.username;
    if (chatters.indexOf(username) === -1) {
        chatters.push(username);
        client.set('chat_users', JSON.stringify(chatters));
        res.send({
            'chatters': chatters,
            'status': 'OK'
        });
    } else {
        res.send({
            'status': 'FAILED'
        });
    }
});

Here we have the API for leaving the chat room:

// API - Leave Chat
app.post('/leave', function(req, res) {
    var username = req.body.username;
    chatters.splice(chatters.indexOf(username), 1);
    client.set('chat_users', JSON.stringify(chatters));
    res.send({
        'status': 'OK'
    });
});

Sending and storing the message:

// API - Send + Store Message
app.post('/send_message', function(req, res) {
    var username = req.body.username;
    var message = req.body.message;
    chat_messages.push({
        'sender': username,
        'message': message
    });
    client.set('chat_app_messages', JSON.stringify(chat_messages));
    res.send({
        'status': 'OK'
    });
});

Get all messages in room:

// API - Get Messages
app.get('/get_messages', function(req, res) {
    res.send(chat_messages);
});

Get all members:

// API - Get Chatters
app.get('/get_chatters', function(req, res) {
    res.send(chatters);
});

Once we have all the APIs set up, we need to write socket.io code to emit events when certain properties such as the following get updated:

Room count.
Messages.

// Socket Connection
// UI Stuff
io.on('connection', function(socket) {

    // Fire 'send' event for updating Message list in UI
    socket.on('message', function(data) {
        io.emit('send', data);
    });

    // Fire 'count_chatters' for updating Chatter Count in UI
    socket.on('update_chatter_count', function(data) {
        io.emit('count_chatters', data);
    });

});

These events are then picked up on the front-end by the socket.IO library which in turn updates the UI.

Step 9

Now, we need to build our UI that will allow users to sign in and chat.

Open up the index.html file and add the following code:

<!doctype html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Node.js + Socket.io + Redis Chat | ScaleGrid</title>
      <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="container">
            <h1>Node.js + Socket.io + Redis Chat | ScaleGrid</h1>
            <div class="join-chat">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" />
                <input type="button" id="join-chat" value="Join Chat" />
            </div><br />
            <div class="chat-info"></div><br />
            <div class="chat">
                <div class="messages"></div>
                <textarea name="message" id="message" cols="90" rows="5" placeholder="Enter your message..."></textarea><br /><br />
                <input type="button" id="send-message" data-username="" value="Send Message"> 
                <input type="button" id="leave-chat" data-username="" value="Leave Chat">
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.6.0/socket.io.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

Step 10

To make our HTML work, we need to add some JavaScript AJAX events that will handle the various operations like joining a room, leaving, sending a message, etc.

The following code gets the number of people chatting chat so that we can update the UI about the total number of people in the room:

$.get('/get_chatters', function(response) {
    $('.chat-info').text("There are currently " + response.length + " people in the chat room");
    chatter_count = response.length; //update chatter count
});

This code allows users to join the chat room (usernames are unique and cannot be duplicated):

$('#join-chat').click(function() {
    var username = $.trim($('#username').val());
    $.ajax({
        url: '/join',
        type: 'POST',
        data: {
            username: username
        },
        success: function(response) {
            if (response.status == 'OK') { //username doesn't already exists
                socket.emit('update_chatter_count', {
                    'action': 'increase'
                });
                $('.chat').show();
                $('#leave-chat').data('username', username);
                $('#send-message').data('username', username);
                $.get('/get_messages', function(response) {
                    if (response.length > 0) {
                        var message_count = response.length;
                        var html = '';
                        for (var x = 0; x < message_count; x++) {
                            html += "<div class='msg'><div class='user'>" + response[x]['sender'] + "</div><div class='txt'>" + response[x]['message'] + "</div></div>";
                        }
                        $('.messages').html(html);
                    }
                });
                $('.join-chat').hide(); //hide the container for joining the chat room.
            } else if (response.status == 'FAILED') { //username already exists
                alert("Sorry but the username already exists, please choose another one");
                $('#username').val('').focus();
            }
        }
    });
});

Here is the code for allowing users to leave the chat room:

$('#leave-chat').click(function() {
    var username = $(this).data('username');
    $.ajax({
        url: '/leave',
        type: 'POST',
        dataType: 'json',
        data: {
            username: username
        },
        success: function(response) {
            if (response.status == 'OK') {
                socket.emit('message', {
                    'username': username,
                    'message': username + " has left the chat room.."
                });
                socket.emit('update_chatter_count', {
                    'action': 'decrease'
                });
                $('.chat').hide();
                $('.join-chat').show();
                $('#username').val('');
                alert('You have successfully left the chat room');
            }
        }
    });
});

Here is the code that runs every time someone sends a message:

$('#send-message').click(function() {
    var username = $(this).data('username');
    var message = $.trim($('#message').val());
    $.ajax({
        url: '/send_message',
        type: 'POST',
        dataType: 'json',
        data: {
            'username': username,
            'message': message
        },
        success: function(response) {
            if (response.status == 'OK') {
                socket.emit('message', {
                    'username': username,
                    'message': message
                });
                $('#message').val('');
            }
        }
    });
});

The following is the socket.io code that listens for events from the backend and updates the UI (for example, adding new messages to the messages area, updating the chatter count, etc.):

socket.on('send', function(data) {
    var username = data.username;
    var message = data.message;
    var html = "<div class='msg'><div class='user'>" + username + "</div><div class='txt'>" + message + "</div></div>";
    $('.messages').append(html);
});
socket.on('count_chatters', function(data) {
    if (data.action == 'increase') {
        chatter_count++;
    } else {
        chatter_count--;
    }
    $('.chat-info').text("There are currently " + chatter_count + " people in the chat room");
});

And you’re done! Fire up the server using npm start and open multiple browser windows to simulate multiple users.

A demo of the application is available here.

For deploying this application on Heroku, check out their docs.

The entire source code is also available on GitHub for you to fork and work on.

As always, if you build something awesome, do tweet us about it @scalegridio!