WebSocketを使ってcoincheckの板情報(BTC/JPY)をリアルタイムで表示する

2017年9月12日2020年12月10日

[rtoc_mokuji title=”” title_display=”” heading=”h3″ list_h2_type=”” list_h3_type=”” display=”” frame_design=”” animation=””]

はじめに

以前、coincheckのAPIをPythonから利用して仮想通貨の取引レートを取得をやってみました。本当はJavascriptで取得したかったのですが、同一参照元がうんぬんの制約(あまり理解できてない)によりサーバー側でアクセス拒否されてしまうことが分かり断念しました。

www.segmentation-fault.xyz

調べていく内にどうやらWebSocketを使って取得する方法もあることを知り、coincheckはβ版ですがWebSocketに対応していたので勉強もかねてcoincheckで公開されているAPIを使ってビットコインの取引情報をリアルタイムで取得してみました。

coincheck.com

WebSocketで取得した板情報(BTC/JPY)

bids
注文のレート, 注文量

asks
注文のレート, 注文量

ソースコード

あまり綺麗ではありませんが、下記のソースコードで実現しています。

<html>
<meta charset="UTF-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
  
  var webSocket = null;
  var bids_cnt = 0;
  var asks_cnt = 0;
  
  function open() {
    if (webSocket == null) {
      webSocket = new WebSocket("wss://ws-api.coincheck.com/");
      
      // イベントハンドラの設定
      webSocket.onopen = onOpen;
      webSocket.onmessage = onMessage;
      webSocket.onclose = onClose;
      webSocket.onerror = onError;
    }
    
  }
  
  // 接続イベント
  function onOpen(event) {
    // 板情報の購読開始
    webSocket.send(JSON.stringify({type: "subscribe", channel: "btc_jpy-orderbook"}));
  }
  
  // メッセージ受信イベント
  function onMessage(event) {
    
    if (event && event.data) {
      
      // JSONデータに変換
      var json = $.parseJSON(event.data);
      
      for (var i = 0; i < json[1].bids.length; i++) {
        $('#bids').append(json[1].bids[i][0] + ",  " + json[1].bids[i][1] + "<br/>");
        bids_cnt++;
      }
      
      for (var i = 0; i < json[1].asks.length; i++) {
        $('#asks').append(json[1].asks[i][0] + ",  " + json[1].asks[i][1] + "<br/>");
        asks_cnt++;
      }
      
      // 10行溜まったら一旦消去
      if (bids_cnt > 10) {
         $('#bids').empty();
         bids_cnt = 0;
      }
      
      if (asks_cnt > 10) {
         $('#asks').empty();
         asks_cnt = 0;
      }
    }
  }

  // エラーイベント
  function onError(event) {
    console.log("エラーが発生しました。");
  }

  // 切断イベント
  function onClose(event) {
    console.log("コネクションが切断しました。");
  }
  
  window.addEventListener('load', open);
  
});
</script>
</head>
<body>
<div class="orderbook">
<p style="font-size: 80%;">bids<br /> 注文のレート, 注文量</p>
<div id="bids" style="font-size: 80%;height: 250px;width:50%">
</div>
<p style="font-size: 80%;">asks<br /> 注文のレート, 注文量</p>
<div id="asks" style="font-size: 80%;height: 250px;width:50%">
</div>
</div>
</body>
</html>

このままだと表示がダサいのでデザインを改善して取引所風の表示にしたいですね。