How to use websocket to visualise real-time order book streaming data
This mini-project has two objectives:
- Visualise streaming top-of-book data
- (Separate post) Create a static website on AWS using CloudFront and CloudFormation
Here’s an example of the end product:
https://d36ugnpyhre46t.cloudfront.net/top-of-book-streaming/coinbase.html
Visualising streaming top-of-book data
There are three steps:
- Connect to websocket and fetch data
- Create a chart and push data to it
- Present the chart on our HTML page
Nagix created an awesome plugin for Chart.js to visualise time series data. All we need is to subscribe to the exchange’s websocket, and push the data to the chart’s plugin.
In one of his blog posts, Nagix showed examples of connecting and parsing data from 5 different exchanges: Bitfinex, Bitstamp, BitMEX etc… So I have attempted with an exchange he hasn’t tried, Coinbase.
(If you’d like other exchanges, you can either go through each exchange’s documentation or use data providers such as CryptoCompare, where websocket subscriptions are standardised. I will show that as a separate example towards the end of the post.)
1. Connect to websocket and fetch data
In Coinbase’s websocket documentation, the endpoint for websocket feed is
wss://ws-feed.pro.coinbase.comAs stated in the documentation, we have to send a subscribe message on connection open.
Here we are subscribing to the heartbeat and the ticker channels, we use the ticker channel top of book because it:
- Takes less bandwidth
- Top of book prices (best bid and ask) are already calculated for us
Then, as we receive messages, we push the best bid and ask to the buffer, this buffer will be used in the next step to send data to our chart.
2. Create a chart and push data to it
First, we create an element under our canvas div (which will be used in our HTML page later).
We then create the chart:
The majority of the code are chart configurations; the bit where it takes in the data from the buffer and push it to the chart is under plugins.
3. Present the chart on our HTML page
Lastly, we need to create our HTML page, there are several libraries we need:
- Moment.js (2.27.0)
- Chart.js (2.9.3)
- Pusher.js (4.1.0)
- chartjs-plugin-streaming.js
Recall in the last step, we had the line:
const canvasDiv = document.querySelector('#canvas-div');In our HTML page, we simple create a div with this id
<div id=canvas-div></div>And that’s it! We have now linked our streaming chart to our HTML page.
This minimal example can be found in coinbase-minimal.html and coinbase-minimal.json my Github repo.
Side note:
You may notice chartjs-plugin-streaming.js keeps giving this warning in the console that time.format is deprecated.
To silent that, as suggested in this pull request, you can download the chartjs-plugin-streaming.min.js file, remove format:!1 , save and use that file instead.
Feel free to check out the completed code.
Streaming from a data provider
If we’d like to stream data from other exchanges, we would have to go through the same process like we’ve done for Coinbase.
Alternatively, data providers like CryptoCompare standardise the format so all we need to do is use the same code and change the exchange name and pair.
I have done a working example, so please feel free to try it out, code is also in the same repo folder, named cryptocompare.htmland cryptocompare.js
Note: You will need to get an API key to subscribe to this data. See documentation for detail.
By default, the example subscribes to Binance BTC~USDT, but you can easily change the exchange and pair from the code. In the future, I will improve this and make a drop down list in the front-end.
What’s next?
Now we have got a working example in our local directory. If we want to use it somewhere else, we’ll need to download the code for every other device.
Since this mini-project does not require a back-end, all we need is somewhere to host a static website, and access it there, feel free to check out more in this blog post!
