Real-time Analytics Dashboard with SocketIO & SailsJS

Recently we are working on improving our already existing applications. We are mainly focusing on improving our products by implementing certain interesting features but in small pieces. As we are a data analytics company, I thought of adding Real-Time feed for the Dashboards we provide.

To do this, I started learning and implementing SocketIO in few Analytics parts. So, I’ll be sharing my experience with SocketIO in SailsJS Application. Though its not something very path-breaking thing I did, but its new for me, #AchievementUnlocked.

I’ll try to keep this as simple as possible. Basically focus on implementation, not in-depth. My goal is to enable beginners with SocketIO, and since everybody will have different use cases, so no point in describing in details.

The Sails socket client (sails.io.js) is a tiny browser library that is bundled by default in new Sails apps. It is a lightweight wrapper that sits on top of the Socket.IO client whose purpose is to make sending and receiving messages from your Sails backend as simple as possible.

#Ref: https://0.12.sailsjs.com/documentation/reference/web-sockets/socket-client

Packages/Dependencies

Now we need to install sails.io.js-dist npm package in order to communicate with Sails from Client-Side/Web Browsers. (NPM Package)

After you install this package, you’ll find a file named sails.io.js under assets in your sails application. (File Path: assets/js/dependencies/sails.io.js)

Include the file in under head of your layout file.

/js/dependencies/sails.io.js

Application API Setup

As I am creating a Dashboard for live feed on ChatBot (Learn more about S.I.P.U, the Medimojo Chat Bot) usage, lets start with implementing on Overall Conversation Count and Daily Stats Graph.

I have an API for incurring a increase in Conversation Count.

/init-chat

I have two APIs, one for getting the conversation count and another for getting data for daily stats graph.

/api/v1/chat-conversation-count
/api/v1/get-daily-usage-stats

Server-Side

I have a model named BotUsage, which is used to create an entry every time a new conversation is started.

In the model, BotUsage, add following code:

//api/models/BotUsage.js
========================

afterCreate(entry, cb) {
  sails.sockets.broadcast('feed', 'new_entry', entry);
  cb();
},

Basically, after a create() is called, it will broadcast to all the watch guards subscribing to the feed channel, on event new_entry and the complete data is sent as an Object via the third parameter, entry .

We are done with the Publishing a message. Now lets setup for subscribing and joining a channel and receiving all the new events.

We have created a simple function to get the count of the conversations via API. Now we will modify it in order to request the API via Socket.

const chatBotUsageStats = async(req, res) => {
  try {
    if(!req.isSocket) {
      console.log('Only a client socket can subscribe');
    }
    const totalConversation = await CommonService.getQuery('select count(*) from botUsage');
    sails.sockets.join(req.socket, 'feed');
    res.send({success: true, totalConversation});
  } catch(e) {
    res.send({error: true, message: e.stack});
  }
};

The API is now ready to get requested via socket and on successful request, it will be subscribed to channel feed . We will change the other API to get Usage Stats Graph in the same way.

Client-Side
In the HTML page, under <script> tag, add the following code:

io.socket.get('/api/chat-conversation-count', function (data, jwr) {
  if (jwr.error) {
    console.error('Could not subscribe:' + jwr.error);
    return;
  }
  console.log('Successfully subscribed.');
  io.socket.on('new_entry', function test(resp) {
    //do the necessary operations/task
    //Or you can call the API to get the Updated Data
   io.socket.get('/api/chat-conversation-count', function resp(body, resp) {
     $("#box1").html(body.totalConversation);
    });
  });
});

io.socket.get calls the API and subscribes to the feed channel. io.socket.on will listen for event new_entry . When ever a new entry is made, and a message is pushed to the channel, this part will be active.

Here’s a working video of the topic.

P.S.: I am new to SocketIO. This observation completely based on my experience. There might be some mistakes in my understanding as well.

In case you need any help related to this post or you have some suggestions, feel free to drop an email at [email protected]