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

<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>

ネタ元