Binance Symbol MiniTicker

by humanzing

HTML

<div class="warpper">


<div id="deph">

</div>
<div id="deph1">

</div>

</div>

CSS

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.warpper {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#deph {
  background: green;
  min-width=10%;
  text-align: center;
  vertical-align: middle;
  line-height: 100vh;

}

#deph1 {
  background: red;
  min-width=10%;
  text-align: center;
  vertical-align: middle;
  line-height: 100vh;
}

JavaScript

const el = document.getElementById('ticker');
const ws = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@depth@1000ms/btcusdt@miniTicker');

var data_order = {
  up: Array(),
  down: Array(),
  price: 0
};

ws.addEventListener('message', e => {



  let data = JSON.parse(e.data) || {};
  let {
    s,
    c
  } = data;

  switch (data.e) {
    case "24hrMiniTicker":
      data_order['price'] = fi(data.c, 2);
      break;
    case "depthUpdate":
      data_order['up'] = Array();
      data_order['down'] = Array();
      for (var i = 0; i < data.a.length; i++) {
        data_order['up'].push(data.a[i]);
      }
      for (var i = 0; i < data.b.length; i++) {
        data_order['down'].push(data.b[i]);
      }
      var x = 0;
      var y = 0;
      for (var i = 0; i < data_order["up"].length; i++) {
        x = f(data_order["up"][i][1]) + f(x)
      }
      for (var i = 0; i < data_order["down"].length; i++) {
        y = f(data_order["down"][i][1]) + f(y)
      }
      document.getElementById('deph').innerHTML = fi(x, 8);



      document.getElementById('deph').style.width = f(document.getElementById('deph').innerHTML) * 100 / f(document.getElementById('deph').innerHTML) + f(document.getElementById('deph1').innerHTML) + "%";

      document.getElementById('deph1').innerHTML = fi(y, 8);
      document.getElementById('deph1').style.width = f(document.getElementById('deph1').innerHTML) * 100 / f(document.getElementById('deph').innerHTML) + f(document.getElementById('deph1').innerHTML) + "%";


      break;
  }

});

function fi(x, c) {
  return Number.parseFloat(x).toFixed(c);
}

function f(x) {
  return Number.parseFloat(x);
}