javascript - 币安：部分书籍深度流

Question

请问，您可以对 JavaScript（jQuery、WebSocket）+ PHP 进行示例代码吗？

https://github.com/binance-exchange/binance-official-api-docs/blob/master/web-socket-streams.md

1. 打开到 wss://stream.binance.com:9443/ws/bnbbtc@depth 的流。
2. 缓冲您从流中接收到的事件。
3. 从https://www.binance.com/api/v1/depth?symbol=BNBBTC&limit=1000获取深度快照。
4. 删除快照中 u <= lastUpdateId 的任何事件。
5. 第一个处理的事件应该有 U <= lastUpdateId+1 AND u >= lastUpdateId+1。
6. 在收听流时，每个新事件的 U 应该等于前一个事件的 u+1。
7. 每个事件中的数据是价格水平的绝对数量。
8. 如果数量为 0，则移除价格水平。
9. 接收到移除不在您本地订单簿中的价格水平的事件可能会发生并且是正常的。

function financial(val, limit=2){
  return Number.parseFloat(val).toFixed(limit);
}
$("#get-depth").on('click', function(){
  let socket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@depth");
  socket.onopen = function(){};
  socket.onclose = function(event){};
  socket.onmessage = function(event){
    obj = JSON.parse(event.data);
    let bR = '';
    let aR = '';
    let b = obj.b;
    let a = obj.a;
    $.each(b, function(k, v){
      let bSum = parseFloat(v[0]) * parseFloat(v[1]);
      bR = bR + '<tr><td>'+v[0]+'</td><td>'+v[1]+'</td><td>'+financial(bSum)+'</td></tr>';
    });
    $.each(a, function(k, v){
      let aSum = parseFloat(v[0]) * parseFloat(v[1]);
      aR = aR + '<tr><td>'+v[0]+'</td><td>'+v[1]+'</td><td>'+financial(aSum)+'</td></tr>';
    });
    $("#depth-bids tbody").html(bR);
    $("#depth-asks tbody").html(aR);
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="get-depth">Get Depth</button>
<table id="#depth-bids"><tbody></tbody></table>
<table id="#depth-asks"><tbody></tbody></table>

Answer 1

var depthSocketBuffer;
var depthSocketBufferB = {};
var depthSocketBufferA = {};
var depthSocketBufferId;
var lastEventUpdateId;
var depth;
function getDepth(){
  $.ajax({
    method: "post",
    url: "/app/controller.php",
    data: {},
    success: function(obj){
      depthSocketBuffer = obj.data;
      depthSocketBufferId = obj.id;
      $.each(depthSocketBuffer.bids, function(k, v){
        depthSocketBufferB[k] = v;
      });
      $.each(depthSocketBuffer.asks, function(k, v){
        depthSocketBufferA[k] = v;
      });
      getDepthSocket();
    }
  });
}
function sortKeys(obj, desc){
  var keys = Object.keys(obj);
  keys.sort((a, b) => { var d = +a - +b; return desc? -d : d; });
  var res = {};
  keys.forEach(i => res[i] = obj[i]);
  return res;
}
function financial(val, limit=2){
  return Number.parseFloat(val).toFixed(limit);
}
function getDepthSocket(){
  var ordered = {};
  var newU = false;
  let socket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@depth");
  socket.onopen = function(){};
  socket.onclose = function(event){
    if(event.wasClean) console.log(event.code+': '+event.reason);
  };
  socket.onmessage = function(event){
    let id = depthSocketBufferId;
    let bufferB = depthSocketBufferB;
    let bufferA = depthSocketBufferA;
    let obj = JSON.parse(event.data);
    let U = obj.U;
    let u = obj.u;
    let b = obj.b;
    let a = obj.a;
    let bR = '';
    let aR = '';
    let newB = {};
    let newA = {};
    let updateDepthCache = function(){
      $.each(b, function(k, v){
        if(v[1] === '0.00000000') delete bufferB[v[0]];
        else bufferB[v[0]] = parseFloat(v[1]);
      });
      $.each(a, function(k, v){
        if(v[1] === '0.00000000') delete bufferA[v[0]];
        else bufferA[v[0]] = parseFloat(v[1]);
      });
    }
    if(u){
      if(u <= id){}else{
        if(!newU && U <= id + 1 && u >= id + 1){
          updateDepthCache();
          newU = u;
        }else{
          newU = newU + 1;
          updateDepthCache();
        }
      }
    }else updateDepthCache();
    bufferB = sortKeys(bufferB, false);
    bufferA = sortKeys(bufferA, false);
    $.each(bufferB, function(k, v){
      let bSum = parseFloat(k) * parseFloat(v);
      bR = '<tr><td>'+k+'</td><td>'+v+'</td><td>'+financial(bSum)+'</td></tr>' + bR;
    });
    $.each(bufferA, function(k, v){
      let aSum = parseFloat(k) * parseFloat(v);
      aR = aR + '<tr><td>'+k+'</td><td>'+v+'</td><td>'+financial(aSum)+'</td></tr>';
    });
    $("#bids tbody").html(bR);
    $("#asks tbody").html(aR);
    $("#bids tbody tr").slice(500).remove();
    $("#asks tbody tr").slice(500).remove();
  };
  socket.onerror = function(error){
    console.log(error.message);
  }
}