The Quickest Way To Have Real-Time Analytics Using PubNub EON

It took me less than a day to create a very rudimentary platform that’s real-time and also allows me to view real time analytics for cryptocurrency prices in a digestible format.

It seems like everywhere you turn there’s some big corporation trying to take your data with complex environments that take lots of time to set up but aren’t as extensible as advertised 😫.

For petes sake 😤 I just want to build something quick and add features as I need them .

I recently discovered PubNub and decided it warranted an obscenely overcomplicated article to solidify my own understanding, however it also has the added benefit of being easy to use. So maybe this won’t be too complicated.

Lets Get Lit And Lets Code 😌🔥

First of make sure you have the latest version of all these things:

• Courage 🦁
• Tenacity 🐯
• Spunk 💃🕺
• Apache 🚁 (Or some other webserver)

Now hop into your IDE to start coding. Personally I’ll be using c9 because it sets up a quick environment and I don’t have to worry about saving my code online since the IDE is already hosted in the cloud☁.

Great, now create 2 folders named jsand css. These will contain our different files that’ll be used in our index.html (The main page).

My weapon of choice is the terminal so I’ll slide in the following commands to get my environment going.

$ mkdir punhub && cd punhub
$ mkdir js
$ mkdir css

Now is the perfect time to create our index.html. This file is going to be where the structure of our page is going to sit.

In this file you’re going to want to add the type of charts you want to display your analytics on. We’ll focus on building a website that shows me the prices of different cryptocurrencies that I’m following so I’ll be using the spline graph.

To get the different components to work from PubNub we’ll need to add their javascript tags. When working with plain HTML/JSS/CSS I tend to place all my javascript file at the bottom of the closing </body> tag because it allows the webpage to load visually before grabbing inserting all the javascript.

<!-- PubNub Eon -->
    <script type="text/javascript" src="//pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
    <link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/1.0.0/eon.css"/> 

Next we’ll need to navigate to our js folder and create a file called eon.js . In that file we’ll add all of our PubNub related javascript.

The flow of the javascript for PubNub starts off by creating a new PubNub Object.

let pubnub = new PubNub({
      publishKey: 'your unique key',
      subscribeKey: 'your other unique key '
});

This object requires two keys. The first key is to send data to PubNub and the second key to listen to data from PubNub. To get both of these keys we’ll need to create a new account and then create a new app in the PubNub dashboard.

Once the new app is created we’ll see that we are given our publish key and subscribe key.

Charts Charts Charts

Now let’s insert😌 our chart. We can do this by initializing it in our eon.js file.

eon.chart({
  channels: ['crypto-chart'], //Where the data will be received from
  history: true, // maintains data
  flow: true,
  pubnub: pubnub, //pubnub object with keys
  generate: {
    bindto: '#chart', // tag in html where chart will be inserted
    data: {
      labels: false
    }
  }
});

When we initializing we also need to create a connected tag in our index.html which has the same id as the name in our bindto .

<div id='chart'>
    Spline chart
</div>

Ok so we have our chart running, but there’s no data.

This is where our publish key comes into play, as we can start publishing data to our PubNub channel.

$.getJSON( "https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=XVG,TRON,ZIL,DGB", function( json ) {
      var dateCurrent = new Date();
      var dateMilli = dateCurrent.getTime();
      
      pubnub.publish({
        channel: 'crypto-chart',
        message: 
          {"eon":{
            "XVG": json.XVG,
            "TRON": json.TRON,
            "ZIL": json.ZIL,
            "DGB": json.DGB,
            "_eonDatetime": dateMilli
            }
          }
        });
    })

Right now the data is being fetched from a REST api and it’s sending the data to our channel in a readable format (defined by PubNub). But this only sends data once, we want something real-time that’s constantly updating, so in the same eon.js file we can add an interval the continues to fetch the data indefinitely.

setInterval(() => {
    $.getJSON( "https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=XVG,TRON,ZIL,DGB", function( json ) {
      var dateCurrent = new Date();
      var dateMilli = dateCurrent.getTime();
      
      pubnub.publish({
        channel: 'crypto-chart',
        message: 
          {"eon":{
            "XVG": json.XVG,
            "TRON": json.TRON,
            "ZIL": json.ZIL,
            "DGB": json.DGB,
            "_eonDatetime": dateMilli
            }
          }
        });
    })
},2000)

There you have it! We have a fully real-time graph running at an extremely low latency.

Goodboy!!!

Looking Forward 👀

I’m making the code available on my GitHub so feel free to add on to this project and improve it. Some points you could add are possibly connecting to an api that provides a more up to date figure or allowing the user to select which currencies they can view.

There are also other options from PubNub for making charts which you can checkout here.

You can see my PunHub here.

If you have any questions feel free to drop a line.