Streaming Live Ethereum Prices using WebSocket API

This articles answers the questions: 1) What is the Live Price of Ethereum, 2) Where can I  get it from in Real-Time and; 3) What is the recommended technology to stream it from an API.

TLDR: WebSocket is a fast communication protocol and ideal for streaming live prices. There is no such thing 1 price of Ethereum, but rather there are as many prices as Exchanges with differences between them more than $5. An ETH Index Price is available that aggregates the prices across the Exchanges. This article describes how this index can be streamed using WebSocket and Javascript.

The Live Price of Ethereum

This is a trick question, because in reality there is no such thing as a single live price of Ethereum. There are prices that are published by different exchanges around the world, yes, but they are different from one another. For example if you wanted to buy 1 Ether on Coinbase you might get a price that is a few cents, or a few dollars different from the other Exchanges.

To give you an example how material this difference in price can be I have prepared the table below showing the mid prices of ETHUSD from different Exchanges as of January 2021. As you can see the price difference between the highest and lowest is just under $5. That is huge. The highest prices at the time was 1017.18 from Coinbase and the lowest price 1012.50 from Bitfinex.

From here then the question becomes what is the True Price? And unfortunately there is no one single answer, but rather an estimate. This estimates can be derived by taking the prices from a number of the exchanges and weighing them according to some logic. Usually the choice is between:

• A Simple Average Price across the Exchanges - this is would be akin to how the Dow Jones Industrial average is calculated by averaging the price of the 30 largest industrial companies in the US. This is possible because the largest companies all have a size that is not too distant from one another. But it is not a good choice for the Crypto market, where an Exchange like Coinbase, or Binance can transact in significantly more volume than Kraken, or Bitstamp.
• A Weighted Average Price Across the Exchanges - this is where each of the Exchanges is assigned an importance weighting so that when combining the prices across the exchanges, the Exchange that has the highest weighting has a larger portion of its price going into the Index. This is the preferred method for Stock indices such as S&P500 where the largest and smallest companies are far apart in terms of size and is also the method I choose for constructing the ETH Index.

What is actually a "Live Price"?

A purist would argue that Live is precisely now. After you finished reading that now it is not live any more. Obviously this is not very useful, so the best we can do is have a Real-Time, where you get the data as fast as possible and with the lowest latency possible.

This is important, because prices change very quickly. They change many times per second and on multiple Exchanges at the same time. So really the complexity is two-fold: 1) how to weigh the different prices from multiple Exchanges and how to do it in Real-Time.

To get a sense of just how fast the prices change you can look at the following example, again taken in January 2021. The chart spans 10 seconds and has more than 1,000 price points from 8 different Exchanges. The line in Green is the constructed ETH Index from those prices. Take a few seconds to absorb the quantity of data and the speed that it arrives at...

A live update of this chart is available at https://dynamicstrategies.io/rtesi

Where can I get a Real-Time price of Ethereum

For this there are a number of sources depending on you needs. Here are a few examples:

• Coinmarketcap.com - they publish prices for practically all of the cryptocurrencies and tokens. The downside is that there can be a lag in the updates of the prices and often the user needs to be refreshing the page manually
• Cryptocompare.com -  portfolio tracking website with the ability to save and monitor your crypto portfolio. Has live prices that update more frequently than the first site
• Dynamistrategies.io - publishes a Real-Time ETH prices index from where the above chart was taken. Does not publish prices for other crypto currencies

All of these have Ethereum prices on screen and through an API. In the next section we will cover how to stream the Ethereum from one of these sources using WebSocket and a javascript runtime.

How to Stream Ethereum Prices with WebSocket

I will show you how to stream prices using the WebSocket protocol.  WebSocket is currently the dominant protocol for two way communication on the web, particularly where the messages are frequent and speed is of the essence. This is usually the case with price updates. The other area where WebSocket is commonly used is real-time chat messaging services. To find out more on why that is the case and the benefits of using WebSocket I suggest you read up this article: Link

I recommend you use an auto-reconnecting WebSocket package from NPM as it will take care of reconnecting to the feed anytime your connection breaks.  It will continue trying to reconnect until successful, or if you explicitly tell it to stop.

I will use React JS for  this example I will assume that you already have a React App running. To know more how to create a simple React App you read up on this Link.

To add the reconnecting-websocket packaged to your project run the following command:

npm install --save reconnecting-websocket

The next step is to choose the price feed where you will stream Ethereum prices from. For this I recommend you get them from https://dynamicstrategies.io/rtesi where they publish the path to the WebSocket feed that you will need . And you can check if you are receiving the prices from the feed by comparing to what you see on screen at that address.

The following code creates a React Class Component that connects to the feed and prints the feed in two places: 1) it prints everything in the console.log and; 2) prints the ETH Index on the page.

import React from 'react';
import ReconnectingWebSocket from "reconnecting-websocket";

class EthPriceComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {EthIndexThrolled: undefined};
    this.EthIndex = undefined;
  }


  establishWebSocketConnection = () => {

    //***************************************
    // Set the options for the connection
    // detail on what they mean can be found here:
    // https://www.npmjs.com/package/reconnecting-websocket

    const wsOptions = {
      maxReconnectionDelay: 10000,
      minReconnectionDelay: 1000,
      connectionTimeout: 5000,
      minUptime: 5000,
      maxRetries: 999999999999,
      reconnectionDelayGrowFactor: 1.3,
      debug: false
    }

    //***************************************
    // Establish connection to the live feed

    const url = "wss://dynamicstrategies.io:9300";
    const wsClient = new ReconnectingWebSocket(
        url, [], wsOptions);

    //***************************************
    // add an event listener to run code
    // when the connection opens

    wsClient.addEventListener('open', () => {
      console.log("Connection Established ...");
    });


    //****************************************
    // add an event listener to run code when
    // a message is received from the server

    wsClient.addEventListener('message', (e) => {

      // parse the data from server
      let dataFromServer = JSON.parse(e.data);

      // extract the Ethereum index and
      // update in local state
      if (dataFromServer.type === 'ethspot') {
        this.EthIndex = dataFromServer.values.index;
      }

      // print all output to console
      console.log(dataFromServer);
    });
  }
  
  //*********************************************************
  // When the Component Mounts it should launch a WebSocket
  // connection and set a timer so that the State gets updated
  // every second. The price feed updates multiple times per
  // second letting it refresh the page too often can make
  // the computer unresponsive
  componentDidMount() {
    this.establishWebSocketConnection();

    this.interval = setInterval(() => {
      this.setState({EthIndexThrolled: this.EthIndex});
    }, 1000);

  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return(
        <div>
          <h1>Real-Time Ethereum Spot Index: 
        {this.state.EthIndexThrolled}</h1>
        </div>
        )
  }
}

export default EthPriceComponent;

The component will print 2 types of results:

• It will print the Ethereum Price on the webpage and update it every second. The feed is deliberately throttled to refresh the webpage only once per second to avoid the computer becoming unresponsive. This limitation can be relaxed by tweaking the setInterval frequency of to something less than 1000 milliseconds.
• It will print all the raw results that the WebSocket receives from the server in the Console Log (press Ctrl+Shift+I to open the console) . If you are familiar with how to extend Class Components then you should be able to add other information from the feed directly into the page.

Here is an example of the output that the Component produces. On the left hand side is the ETH Index and the right hand side the raw output as processed by WebSocket:

Things to keep in mind when Streaming Prices with WebSocket

WebSocket is highly performant and can process hundreds of messages per second. It is also relatively light weight compared to REST and other HTTP methods as it operated directly over TCP and therefore doesn't carry the overhead that HTTP bring.

This can sometimes can be a disadvantage to the less fluent coder who might struggle to process that large quantity of data arriving a very high speed. Therefore some sort of a throttling mechanism might be useful as show in the example above.

Also it is best avoid having more than 1 connection to the same feed from the same computer. Multiple connections can cause one of the feeds to jam the other as it competes for resources and can struggle to prioritise which of the connections to give preference.

Other than that, communication over WebSocket has become a standard for algorithmic trading on the web with most Crypto Exchanges now also providing an API using this technology in addition to the more traditional REST APIs.

Conclusion

Streaming Real-Time Prices using WebSocket over the web is currently the preferred method. It gives the lowest latency and largest throughput when compared to REST and other communication protocols.

A source of Real-Time Ethereum Prices should be chosen carefully as there is no such thing as 1 price. Rather there are multiple prices, 1 from every Exchange, and the difference in price between Exchanges can be more than $5.  A weighting scheme is needed to arrive at a benchmark prices that is representative across the exchanges.  It should giving more weight to the prices from the exchanges that transact more volume. The Real-Time Ethereum Spot Index from dynamicstrategies.io is one of these indices that can be viewed on their page by this Link, or streamed live using WebSocket from this address: wss://dynamicstrategies.io:9300

Finally, the true Real-Time prices gets updated multiple times per second, reaching up to 100 times per second during the more volatile periods. Therefore if timely prices updates are important for you then WebSocket is a good choice.

Sources:

Comparison of WebSocket to other communication protocols: Link

How to create a React App: Link

Real-Time Ethereum Price Index: Link

Reconnecting WebSocket packaged from npm: Link

Author

This article was written and edited by Dmitry Shibaev of Dynamic Strategies