Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

Using Redis with Node.js and Socket.IO

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

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

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.

Related Articles

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

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 is a 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 using JavaScript.

Socket.IO is a JavaScript library for realtime 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 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.

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 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 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, Redis on ScaleGrid provides a high performance, one click and fully managed Redis-as-a-service solution.

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

Otherwise, log in to 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:


    
      Node.js + Socket.io + Redis Chat | ScaleGrid

            
Node.js + Socket.io + Redis Chat | ScaleGrid

            

                
                



                

                

 

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. 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 
" + response[x]['sender'] + "
" + response[x]['message'] + "
"; } $('.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 = "
" + username + "
" + message + "
";
    $('.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: https://node-socket-redis-chat.herokuapp.com/

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



This post first appeared on MongoDB Hosting & Management, please read the originial post: here

Share the post

Using Redis with Node.js and Socket.IO

×

Subscribe to Mongodb Hosting & Management

Get updates delivered right to your inbox!

Thank you for your subscription

×