Using Redis with Node.js and Socket.IO

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

• Redis
• Node.js + Express.js
• Socket.IO
• Heroku

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, hyperloglogs, and geospatial indexes with radius queries.

In this application tutorial, we’ll be connecting to one of the clusters using ScaleGrid hosting for Redis™*.

Node.js

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, thus, perfect for data-intensive real-time applications that run across distributed devices.

Express.js

A Node.js framework. Node.js is a platform that allows JavaScript to be used outside of 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 using JavaScript.

Socket.IO

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

Heroku

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

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

Setup

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/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

…and some other utility methods:

• body-parser

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 in to Heroku:

node_modules

After completing the 7th step, 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 setup, 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, ScaleGrid for Redis™ provides a high performance, one-click and fully managed hosting solution.

If you’re not already a member, you can sign up for a free 30-day trial here.

Otherwise, log into your dashboard and create a new Redis™ cluster under the Redis™ section:

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:

1. Reads the credentials from creds.json and creates a Redis client that is used to perform key-value operations
2. Once the client is ready, we populate the chatters and the chat_messages so any new members that 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">&nbsp;
                <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 chatters so 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. Remember, 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.

For deploying this application on Heroku, check out their docs: https://devcenter.heroku.com/categories/deployment

The entire source code is also available on GitHub for you to fork and work on: https://github.com/Scalegrid/code-samples/tree/sg-redis-node-socket-chat/redis-node-socket-chat

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

If you need help with management and hosting for Redis™, let us simplify things for you with our professional services.