实时加密价格跟踪器

我做了一个实时加密价格跟踪器。
它实时显示比特币/美元价格。为了获得实时数据，我们使用WebSocket API，这是一个比REST API更好的选择。
有一个例子，为Binance，Bitstamp，Coinbase，双子座，Bitfinex和克拉肯。
请参见下面的片段。

/* 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/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/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>

.org域是（传统）Binance Chain的一个域-当前广泛使用的Binance智能链网络的前身。
如果您想使用Binance交易所的WS API（位于.com域），它发布在wss://stream.binance.com:9443（docs），您可以订阅<symbol>@trade（docs）格式的交易通道。