Reputation: 2478

WebSocket API connection to Binance returns an error: How to get crypto price in real-time?

I wanted to test websocket connection to binance api wss://testnet-dex.binance.org/api/ws. But whenever I run js script I am getting error as response from ws.

Script looks like that

const WebSocket = require('ws');

const conn = new WebSocket("wss://testnet-dex.binance.org/api/ws");
conn.onopen = function(evt) {
    conn.send(JSON.stringify({ method: "subscribe", topic: "trades", symbols: ["ETH_BNB"] })); // I did try using as an symbols 'BNB_USDT.B-B7C', but got the same error
}
conn.onmessage = function(evt) {
    console.info('received data', evt.data);
};
conn.onerror = function(evt) {
    console.error('an error occurred', evt.data);
};

And whenever script is run I am getting

received data {"method":"subscribe","error":{"error":"Invalid symbol(s)"}}

received data {"method":"subscribe","error":{"error":"Symbols [BNB_USDT.B-B7C] are not valid for topic: trades, for user: 100.x.x.x:3333 \u003e 100.xx.x.x:59558"}}

It seems like I am getting error because I did write wrong symbol. But I used multiple symbols, and all of them produced the same error. Not saying that I just copy/paste this code fron binance documentation https://docs.binance.org/api-reference/dex-api/ws-streams.html

Upvotes: 0

Answers (2)

Rok Benko

Reputation: 23128

Real-Time Crypto Price Tracker

I've made a Real-Time Crypto Price Tracker.

It shows BTC/USD price in real-time. In order to get real-time data we are using the WebSocket API which is for this purpose a far better option than the REST API.

There is an example for Binance, Bitstamp, Coinbase, Gemini, Bitfinex and Kraken.

See the snippet below.

/* Binance */
let ws_binance = new WebSocket("wss://stream.binance.com:9443/ws");
let div_binance = document.getElementById("price_binance");

let last_price_binance = null;

ws_binance.onopen = function() {
  ws_binance.send(
    JSON.stringify({
      method: "SUBSCRIBE",
      params: ["btcusdt@trade"],
      id: 1
    })
  );
};

ws_binance.onmessage = function(event) {
  let current_price_binance = JSON.parse(event.data);
  let price_binance = parseFloat(current_price_binance.p).toFixed(2);
  div_binance.innerText = price_binance;

  if (price_binance < last_price_binance && isNaN(price_binance) == false) {
    div_binance.innerText = "↓" + price_binance;
    div_binance.style.color = "red";
  } else if (
    price_binance > last_price_binance &&
    isNaN(price_binance) == false
  ) {
    div_binance.innerText = "↑" + price_binance;
    div_binance.style.color = "green";
  } else if (
    price_binance == last_price_binance &&
    isNaN(price_binance) == false
  ) {
    div_binance.innerText = "=" + price_binance;
    div_binance.style.color = "black";
  }

  last_price_binance = price_binance;
};

/* Bitstamp */
let ws_bitstamp = new WebSocket("wss://ws.bitstamp.net");
let div_bitstamp = document.getElementById("price_bitstamp");

let last_price_bitstamp = null;

ws_bitstamp.onopen = function() {
  ws_bitstamp.send(
    JSON.stringify({
      event: "bts:subscribe",
      data: {
        channel: "live_trades_btcusd"
      }
    })
  );
};

ws_bitstamp.onmessage = function(event) {
  let current_price_bitstamp = JSON.parse(event.data);
  let price_bitstamp = parseFloat(current_price_bitstamp.data.price).toFixed(2);

  if (price_bitstamp < last_price_bitstamp && isNaN(price_bitstamp) == false) {
    div_bitstamp.innerText = "↓" + price_bitstamp;
    div_bitstamp.style.color = "red";
  } else if (
    price_bitstamp > last_price_bitstamp &&
    isNaN(price_bitstamp) == false
  ) {
    div_bitstamp.innerText = "↑" + price_bitstamp;
    div_bitstamp.style.color = "green";
  } else if (
    price_bitstamp == last_price_bitstamp &&
    isNaN(price_bitstamp) == false
  ) {
    div_bitstamp.innerText = "=" + price_bitstamp;
    div_bitstamp.style.color = "black";
  }

  last_price_bitstamp = price_bitstamp;
};

/* Coinbase */
let ws_coinbase = new WebSocket("wss://ws-feed.pro.coinbase.com");
let div_coinbase = document.getElementById("price_coinbase");

let last_price_coinbase = null;

ws_coinbase.onopen = function() {
  ws_coinbase.send(
    JSON.stringify({
      type: "subscribe",
      channels: [{
        name: "ticker",
        product_ids: ["BTC-USD"]
      }]
    })
  );
};

ws_coinbase.onmessage = function(event) {
  let current_price_coinbase = JSON.parse(event.data);
  let price_coinbase = parseFloat(current_price_coinbase.price).toFixed(2);
  div_coinbase.innerText = price_coinbase;

  if (price_coinbase < last_price_coinbase && isNaN(price_coinbase) == false) {
    div_coinbase.innerText = "↓" + price_coinbase;
    div_coinbase.style.color = "red";
  } else if (
    price_coinbase > last_price_coinbase &&
    isNaN(price_coinbase) == false
  ) {
    div_coinbase.innerText = "↑" + price_coinbase;
    div_coinbase.style.color = "green";
  } else if (
    price_coinbase == last_price_coinbase &&
    isNaN(price_coinbase) == false
  ) {
    div_coinbase.innerText = "=" + price_coinbase;
    div_coinbase.style.color = "black";
  }

  last_price_coinbase = price_coinbase;
};

/* Gemini */
let ws_gemini = new WebSocket("wss://api.gemini.com/v2/marketdata");
let div_gemini = document.getElementById("price_gemini");

let last_price_gemini = null;

ws_gemini.onopen = function() {
  ws_gemini.send(
    JSON.stringify({
      type: "subscribe",
      subscriptions: [{
        name: "l2",
        symbols: ["BTCUSD"]
      }]
    })
  );
};

ws_gemini.onmessage = function(event) {
  let current_price_gemini = JSON.parse(event.data);
  let price_gemini = parseFloat(current_price_gemini.price).toFixed(2);

  if (price_gemini < last_price_gemini && isNaN(price_gemini) == false) {
    div_gemini.innerText = "↓" + price_gemini;
    div_gemini.style.color = "red";
  } else if (price_gemini > last_price_gemini && isNaN(price_gemini) == false) {
    div_gemini.innerText = "↑" + price_gemini;
    div_gemini.style.color = "green";
  } else if (
    price_gemini == last_price_gemini &&
    isNaN(price_gemini) == false
  ) {
    div_gemini.innerText = "=" + price_gemini;
    div_gemini.style.color = "black";
  }

  last_price_gemini = price_gemini;
};

/* Bitfinex */
let ws_bitfinex = new WebSocket("wss://api.bitfinex.com/ws/2");
let div_bitfinex = document.getElementById("price_bitfinex");

let last_price_bitfinex = null;

ws_bitfinex.onopen = function() {
  ws_bitfinex.send(
    JSON.stringify({
      event: "subscribe",
      channel: "trades",
      symbol: "tBTCUSD"
    })
  );
};

ws_bitfinex.onmessage = function(event) {
  let current_price_bitfinex = JSON.parse(event.data);
  let current_price_bitfinex_array = current_price_bitfinex[2];
  let current_price_bitfinex_string = "" + current_price_bitfinex_array;
  let current_price_bitfinex_string_split = current_price_bitfinex_string.split(
    ","
  );
  let price_bitfinex = parseFloat(
    current_price_bitfinex_string_split[3]
  ).toFixed(2);

  if (price_bitfinex < last_price_bitfinex && isNaN(price_bitfinex) == false) {
    div_bitfinex.innerText = "↓" + price_bitfinex;
    div_bitfinex.style.color = "red";
  } else if (
    price_bitfinex > last_price_bitfinex &&
    isNaN(price_bitfinex) == false
  ) {
    div_bitfinex.innerText = "↑" + price_bitfinex;
    div_bitfinex.style.color = "green";
  } else if (
    price_bitfinex == last_price_bitfinex &&
    isNaN(price_bitfinex) == false
  ) {
    div_bitfinex.innerText = "=" + price_bitfinex;
    div_bitfinex.style.color = "black";
  }

  last_price_bitfinex = price_bitfinex;
};

/* Kraken */
let ws_kraken = new WebSocket("wss://ws.kraken.com/");
let div_kraken = document.getElementById("price_kraken");

let last_price_kraken = null;

ws_kraken.onopen = function() {
  ws_kraken.send(
    JSON.stringify({
      event: "subscribe",
      pair: ["BTC/USD"],
      subscription: {
        name: "trade"
      }
    })
  );
};

ws_kraken.onmessage = function(event) {
  let current_price_kraken = JSON.parse(event.data);
  let current_price_kraken_array = current_price_kraken[1];
  let current_price_kraken_string = "" + current_price_kraken_array;
  let current_price_kraken_string_split = current_price_kraken_string.split(
    ","
  );
  let price_kraken = parseFloat(current_price_kraken_string_split[0]).toFixed(
    2
  );

  if (price_kraken < last_price_kraken && isNaN(price_kraken) == false) {
    div_kraken.innerText = "↓" + price_kraken;
    div_kraken.style.color = "red";
  } else if (price_kraken > last_price_kraken && isNaN(price_kraken) == false) {
    div_kraken.innerText = "↑" + price_kraken;
    div_kraken.style.color = "green";
  } else if (
    price_kraken == last_price_kraken &&
    isNaN(price_kraken) == false
  ) {
    div_kraken.innerText = "=" + price_kraken;
    div_kraken.style.color = "black";
  }

  last_price_kraken = price_kraken;
};

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body .container-fluid .row,
html .container-fluid .row {
  width: 100vw;
}

body .container-fluid .row #wrapper,
html .container-fluid .row #wrapper {
  border-radius: 30px;
  box-shadow: 10px 10px 25px #e0e0e0;
}

body .container-fluid .row #wrapper .exchange,
html .container-fluid .row #wrapper .exchange {
  font-size: 45px;
  font-weight: 700;
}

body .container-fluid .row #wrapper .pair,
html .container-fluid .row #wrapper .pair {
  font-size: 20px;
  font-weight: 500;
}

body .container-fluid .row #wrapper .price,
html .container-fluid .row #wrapper .price {
  font-family: Consolas, monaco, monospace;
  font-size: 40px;
  font-weight: 700;
}

body .container-fluid .row #wrapper .arrow,
html .container-fluid .row #wrapper .arrow {
  position: relative;
  width: 2vw !important;
  border: 1px solid red;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Real-Time Crypto Price Tracker</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <div class='container-fluid d-flex align-items-center mt-5'>
    <div>
      <div class='row d-flex align-items-center justify-content-center mb-5'>
        <div class='col-lg-3 col-md-5 col-12 p-5 mb-lg-4 mb-md-4 me-lg-5 me-md-4' id="wrapper">
          <div class='d-flex justify-content-start exchange mb-3'>Binance</div>
          <div class='d-flex justify-content-start pair'>BTC/USDT</div>
          <div class='d-flex justify-content-start price' id='price_binance'>...</div>
        </div>
        <div class='col-lg-3 col-md-5 col-12 p-5 mb-lg-4 mb-md-4 me-lg-5 me-md-4' id="wrapper">
          <div class='d-flex justify-content-start exchange mb-3'>Bitstamp</div>
          <div class='d-flex justify-content-start pair'>BTC/USD</div>
          <div class='d-flex justify-content-start price' id='price_bitstamp'>...</div>
        </div>
        <div class='col-lg-3 col-md-5 col-12 p-5 mb-lg-4 mb-md-4 me-lg-5 me-md-4' id="wrapper">
          <div class='d-flex justify-content-start exchange mb-3'>Coinbase</div>
          <div class='d-flex justify-content-start pair'>BTC/USD</div>
          <div class='d-flex justify-content-start price' id='price_coinbase'>...</div>
        </div>
        <div class='col-lg-3 col-md-5 col-12 p-5 mb-lg-4 mb-md-4 me-lg-5 me-md-4' id="wrapper">
          <div class='d-flex justify-content-start exchange mb-3'>Gemini</div>
          <div class='d-flex justify-content-start pair'>BTC/USD</div>
          <div class='d-flex justify-content-start price' id='price_gemini'>...</div>
        </div>
        <div class='col-lg-3 col-md-5 col-12 p-5 mb-lg-4 mb-md-4 me-lg-5 me-md-4' id="wrapper">
          <div class='d-flex justify-content-start exchange mb-3'>Bitfinex</div>
          <div class='d-flex justify-content-start pair'>BTC/USD</div>
          <div class='d-flex justify-content-start price' id='price_bitfinex'>...</div>
        </div>
        <div class='col-lg-3 col-md-5 col-12 p-5 mb-lg-4 mb-md-4 me-lg-5 me-md-4' id="wrapper">
          <div class='d-flex justify-content-start exchange mb-3'>Kraken</div>
          <div class='d-flex justify-content-start pair'>BTC/USD</div>
          <div class='d-flex justify-content-start price' id='price_kraken'>...</div>
        </div>
      </div>
    </div>
  </div>

  <script src='javascript.js'></script>

</body>

</html>

Upvotes: 5

Petr Hejda

Reputation: 43581

The .org domain is a domain of the (legacy) Binance Chain - predecessor of the currently widely used Binance Smart Chain network.

If you want to use WS API of the Binance exchange (located at the .com domain), it's published at wss://stream.binance.com:9443 (docs) and you can subscribe to trade channels in the format of <symbol>@trade (docs).

Upvotes: 1

WebSocket API connection to Binance returns an error: How to get crypto price in real-time?

Answers (2)

Real-Time Crypto Price Tracker

Related Questions