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 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. PubNub Lets Get Lit And Lets Code 😌🔥 First of make sure you have the latest version of all these things: Courage 🦁 Tenacity 🐯 Spunk 💃🕺 (Or some other webserver) Apache 🚁 Now hop into your IDE to start coding. Personally I’ll be using 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 c9 cloud ☁ . Great, now create 2 folders named and . These will contain our different files that’ll be used in our index.html (The main page). js css My weapon of choice is the terminal so I’ll the following commands to get my environment going. slide in $ 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 tag because it allows the webpage to load visually before grabbing inserting all the javascript. </body> <!-- 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 folder and create a file called . In that file we’ll add all of our PubNub related javascript. js eon.js 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 it in our file. initializing eon.js eon.chart({channels: ['crypto-chart'], //Where the data will be received fromhistory: true, // maintains dataflow: true,pubnub: pubnub, //pubnub object with keysgenerate: {bindto: '#chart', // tag in html where chart will be inserteddata: {labels: false}}}); When we initializing we also need to create a connected tag in our which has the same as the name in our . index.html id 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( " ", function( json ) {var dateCurrent = new Date();var dateMilli = dateCurrent.getTime(); https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=XVG,TRON,ZIL,DGB 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 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 file we can add an interval the continues to fetch the data indefinitely. REST api eon.js setInterval(() => {$.getJSON( " ", function( json ) {var dateCurrent = new Date();var dateMilli = dateCurrent.getTime(); https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=XVG,TRON,ZIL,DGB 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 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. GitHub There are also other options from for making charts which you can checkout . PubNub here You can see my . PunHub here If you have any questions feel free to drop a line.
