Binance: Partial Book Depth Streams

Question

Please, you can sample code to JavaScript (jQuery, WebSocket) + PHP?

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

1. Open a stream to wss://stream.binance.com:9443/ws/bnbbtc@depth.
2. Buffer the events you receive from the stream.
3. Get a depth snapshot from https://www.binance.com/api/v1/depth?symbol=BNBBTC&limit=1000 .
4. Drop any event where u is <= lastUpdateId in the snapshot.
5. The first processed event should have U <= lastUpdateId+1 AND u >= lastUpdateId+1.
6. While listening to the stream, each new event's U should be equal to the previous event's u+1.
7. The data in each event is the absolute quantity for a price level.
8. If the quantity is 0, remove the price level.
9. Receiving an event that removes a price level that is not in your local order book can happen and is normal.

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);
  }
}