Build a Real-Time Application with Amazon ElastiCache for Redis
Tags: node, aws, elasticache, redis
Published: 2019-06-12 18:21:31

In this article, we’ll walk you through the steps required to combine Socket.io and Redis in a Nodejs backend and hook it up with a React frontend. We’ll then see the steps to deploy the application on a suitable platform. So, what will we create? A basic chat application with the help of Redis. The user can set their usernames and then send messages. 

This model is well suited for a number of applications including games, chat, trading, etc. This is article is not exclusive to React and the fundamental principles should be easy to translate to other frameworks like Angular and Vue. However, you should be familiar with the concepts of React, Express and Redis to get started.

## The Structure
To build a real-time application like that of a chat application, we’ll need to set up a channel through which the client can send messages and the messages are shared with other participants in the group. We’ll be using Websockets to manage the persistent TCP communication between the client and the server.  However, the communication will be implemented using the publish-subscribe pattern (PubSub). 

Here, a message is sent to a centralized topic channel. Interested parties can subscribe to this channel to be notified of updates. This pattern decouples the publisher and subscribers, so that the set of subscribers can grow or shrink without the knowledge of the publisher. Redis is a fast, open-source, in-memory data store and cache that features PubSub support. 

Our server will using be an Express server running on a Node environment. Although you might be familiar running Express server on a persistent DB like [MongoDB](https://www.mongodb.com/), [DynamoDB for AWS](https://n2ws.com/blog/aws-cloud/amazon-dynamodb-latest) or [MySQL](https://www.mysql.com/), cache databases are somewhat different. For deployment, you can set it up using Amazon ElastiCache for Redis or use something like [Redis Enterprise Cloud for AWS](https://aws.amazon.com/marketplace/pp/B01LZM49M6?qid=1542569179240&sr=0-1&ref_=srh_res_product_title). We won’t be covering that in this tutorial.
## Setting up the basics
You can find the source code for this chat application on [GitHub](https://github.com/blizzerand/redis-realtime-chat). You will need to run npm install and then start the server and the front end app. 

Before we start, we’re assuming that you have the fundamentals like npm and node installed.

If not already done so, you will also need to install create-react-app before we start. This can be done by executing the following command: 

~~~~
 npm --global i create-react-app
~~~~

Once done, you can now generate the app that will be used to experiment with sockets by executing:

~~~~
create-react-app socket-redis-chat
~~~~

After generating the app, open the folder using your preferred text editor. To run the project, you need to run ‘npm start’ from within the app folder.

In this article, we will run the client as well as the server within the same codebase. While this would probably not be done in a production app, it’ll be easier to explain here. 
## Socket.io and Redis on the Server
To create a websocket service, simply navigate to a terminal in your app folder and install [socket.io](https://github.com/socketio/socket.io):

~~~~
npm i --save socket.io redis socket.io-redis
 ~~~~

By running socket.io with the [socket.io-redis](https://github.com/socketio/socket.io-redis) adapter you can run multiple socket.io instances in different processes or servers that can all broadcast and emit events to and from each other. Once socket.io has been installed, you need to create a file called ‘server.js’ within the root folder of the app that was generated earlier. 

Within this file, type the code below to import and start constructing the socket:

~~~~
const io = require('socket.io')();
var redis = require('redis');
var redis2 = require('socket.io-redis');

var pub = redis.createClient();
var sub = redis.createClient();
io.adapter(redis2({ host: 'localhost', port: 6379 }));
~~~~

To begin constructing the socket, we will be using the io variable. We’ll also initialize a [PubSub architecture](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) and set the io adapter to use the `localhost`. 

Sockets are essentially a set of long duplex channels between the server and the client. Therefore, the critical part on the server is to successfully handle a connection from a client. This will allow you to publish events to the corresponding client. This can be done via the following code: 

~~~~
io.on('connection', (client) => {
  io.sockets.on('connection', function (socket) {
    socket.removeAllListeners()
    // here you can start emitting events to the client 
  })
});
~~~~ 

The `socket.removeAllListereners()` command is used to remove any existing sockets when starting up your application. Now you will need to inform socket.io to begin listening for clients: 

~~~~
const port = 8000;
io.listen(port);
console.log('listening on port ', port);
~~~~

You can now navigate to your terminal and start the server by executing ‘node server’. You should see the following message once it starts up – ‘listening on port 8000’

At this stage, the socket is not really engaged. While you do have access to the client sockets, nothing is being transmitted to them yet. However, since access has been granted to a connected client, you will be able to respond to events that are being transmitted from the client. You can imagine it as being akin to an event handler at the server side with respect to a specific event from a specific client. 

The first objective is to have the server respond to setUsername requests from the client. The service should let the user know that they are online and the client should be able to send data to the server socket. You can modify your code to add the following: 

~~~~
socket.on("setUsername", function (data) {

       console.log("Got 'setUsername' from client, " + JSON.stringify(data));
       var reply = JSON.stringify({
               method: 'message',
               sendType: 'sendToSelf',
               data: `${data.user} is now online`
           });    
      

       socket.join("work");
       pub.publish("work", reply);
   });
~~~~

Now, the user is able to set a username and you can use socket.join to add the client to a particular room. We’re going to call it “work”. pub.publish() posts the JSON that we created to the “work” channel. 

Next, we’re going to write the logic for sending messages. 

~~~~
   socket.on("sendMessage", function (data) {
   console.log("Got 'sendMessage' from client , " + JSON.stringify(data));
       var reply = JSON.stringify({
               method: 'message',
               sendType: 'sendToAllClientsInRoom',
               data: data.user + ":" + data.msg
           });


       pub.publish("work",reply);

   });
~~~~

The procedure is quite similar. We’ll just convert it into JSON and publish it into the channel. 

So far, we’ve covered two cases. The user:
Joins the channel
Sends a message

Next, we need to disconnect the user when he quits. For that, you can use this code: 

~~~~
   socket.on('disconnect', function () {
       sub.quit();
       pub.publish("chatting","User is disconnected :" + socket.id);
   });
~~~~

Your socket should now have started and begun to look for clients. As a client connects, you will have a closure where you will be able to handle events from a specific client. You should also be able to handle specific events like `setUsername` that is being transmitted from the client. 

So, how do we broadcast the message? We’ll use the Redis subscriber pattern to cover that. 

~~~~
sub.on("message", function (channel, data) {
 data = JSON.parse(data);
 console.log("Inside Redis_Sub: data from channel " + channel + ": " + (data.sendType));
 if (parseInt("sendToSelf".localeCompare(data.sendType)) === 0) {
      io.emit(data.method, data.data);
 }else if (parseInt("sendToAllConnectedClients".localeCompare(data.sendType)) === 0) {
      io.sockets.emit(data.method, data.data);
 }else if (parseInt("sendToAllClientsInRoom".localeCompare(data.sendType)) === 0) {
     io.sockets.in(channel).emit(data.method, data.data);
 }      

});
~~~~

Let’s take this step by step. The subscriber process receives the messages passed onto it when you call `pub.publish()`. We create a function that accepts two parameters, the first one is the channel and the second one is called data. The `data.sendType` holds the details regarding the audience that we want the message to be broadcasted. This completes the `socket.io` set up for the server side. Now it is time to move to the client. 

Ensure that the latest server is running by executing ‘node server’ in a terminal. In case terminal was already active when the last change was made, simply restarting it should suffice. 
## Socket.io on the Client
Earlier in this guide, we started the React app by executing ‘npm start’ on the command line. Therefore, now you should be able to view your code, modify it, and see the browser reload your app with the changes you make.

To begin, you need to start up the client socket code that will be communicating with the server side socket. For simplicity, I am going to put all the API calls into a separate file.  To accomplish this, create a file in the `src` folder and name it `api.js`. In this file, we’ll create socket functions to complete the communication cycle. 

A good place to begin is by defining the functions and having it exported from the module: 

~~~~


function setUsername(username) {
 /* To be completed */ 
}

function setMessage(username, message) {
 /* To be completed */ 
}

function subscribeToMessages(cb) {
 socket.on('message', function(message){
   /* To be completed */ 

}) ;
}

function disconnectSocket(cb) {
 socket.on('disconnect', function(message) {
  /* To be completed */ 

 })
}


export { disconnectSocket, setMessage, setUsername, subscribeToMessages };


~~~~

What we’re basically doing here is creating functions corresponding to the socket functions that we created earlier. 

Since we need to communicate with the server socket, we need to install the client library, `socket.io`. This can be installed on the command line with the help of npm – `npm I -- save socket.io-client`.

Now that this has been installed, it can be imported. As we are running a code on the client side, we can utilize the syntax for the ES6 module. The client side code will be transpiled with Babel and Webpack.  

The socket can also be constructed by recalling the primary export function from the module, `socket.io-client`, and assigning a port. In this case, the port is 8000:

~~~~
import openSocket from 'socket.io-client';
const socket = openSocket('http://localhost:8000');
~~~~

Next, let’s just fill in the code for the socket functions. 

~~~~
function setUsername(username) {
 console.log(username);
 socket.emit('setUsername',{user:username});
}


function setMessage(username, message) {
 const msg =   {user:username, msg: message};
 socket.emit('sendMessage',msg);
}

function subscribeToMessages(cb) {
 socket.on('message', function(message){
   console.log(message);
   //alert('received msg=' + message);
  cb(null, message)
}) ;
}

function disconnectSocket(cb) {
 socket.on('disconnect', function(message) {
   cb(null, message)
 })
}
~~~~

A point to note is that the `subscribeToMessages` event needs to be subscribed to on the socket. This needs to be completed before the events are transmitted. We’ll have a look at that in the next step. 
## Using the events in a React component
You should now have an `api.js` file on the client side. This will export  functions that can be called in order to subscribe and emit events. In the next phase, we will go over how to utilize this function in a React component to be able to accept inputs and then render the messages.

To begin, import the API that was created earlier on the top of the `App.js` file that was generated using the create-react-app.

~~~~
import { disconnectSocket, setMessage, setUsername, subscribeToMessages } from './test';
~~~~

Next, let us define the state for our application:

~~~~
  state = {
    username: '',
    room: '',
    message: '',
    messageList: []
  };


~~~~

Once completed, it is time to add a constructor to the file component. Within this constructor, you can call the `subscribetoMessages` function that we receive from the API file.

Each time that an event is received, we can set a value, known as a “message”, using the value that was received from the server. We will then append the message to the existing message list as follows:

~~~~
  constructor(props) {
    super(props);

    subscribeToMessages((err, message) => {
      console.log(message);
      this.setState({
      messageList: [...this.state.messageList, message]
    }

  )})
  }
~~~~

Finally, add the methods to handle the events - `setUsername`, `setMessage` and `disconnectSocket` (when component unmounts). 

~~~~
  componentWillUnmount() {
    disconnectSocket((err, message) => {
      console.log(message)
    });
  }

  submitChat() {

    if(this.state.username   && this.state.message) {
      setMessage(this.state.username, this.state.message);
    }
  }

  submitUsername() {
    if(this.state.username!="") {
      setUsername(this.state.username);
    }
~~~~

You should be able to view the events in your browser as they come in from the server and are rendered within your React component.
## Summary
Phew! We’ve covered a lot of ground. Although the code here is very basic, it works well enough and you can scale it based on your needs to handle much more complexity without facing many obstacles. We have just about touched the tip of the iceberg when it comes to developing real-time apps using Socket.io and React.