binance alert

by humanzing

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<div class="header">
<h3>binance WebSocket horn</h3>
<h5>Sample for bitcoin type:  btcusdt:10000:up :) </h5>

<div class="input">
  <input id='in' type="text">
  <input onclick="add_horn()" type="submit">
</div>

<div id="status">Not connected.</div>
</div>
<br />
<ul id="messages">
</ul>
		<audio id="audio" src="https://wavlist.com/wav/a13-problemhere.wav" preload="auto"  ></audio>

<ul id="jobs">

</ul>

<div style="display:none" id="spawn" class="message">
<h4 id="spawn_text">binance WebSocket horn</h4>
<br />
<div class="button">
<input onclick="stop()" type="submit">
<input id="spawn_ticker" type="hidden">
<input id="spawn_price" type="hidden">
<input id="spawn_p" type="hidden">


</div>
</div>

CSS

/*

This is a very simple demo of Gemini's WebSocket streaming market data.  

It is intended for demonstration purposes only.

*/
body{
  background:#333;
}
.header{
    margin: 10em;   
    margin-bottom: 1em;
    margin-top: 1em;
    text-align:center;
}
.input{
  
}
h3{
  color:#ccc;
}
h5{
  color:#888;
}
.input input{
  margin:0;
  padding:0;
}
.input input:first-child{
width: calc(100% - 110px);
}
.input input:last-child{
  width: 100px;

}
#spawn{
          width: 200px;
        height: 200px;

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
  background:#ddd;

}
.message{
  width: 30%;
  margin:0 auto;
  border-radius: 5px;
  padding:20px;
  text-align:center;
  border: 1px solid #222;
}

ul {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 2em;
    text-shadow: 0 1px 0 rgba(34,34,34,.5);
    margin: 10em;   
    margin-bottom: 1em;
    margin-top: 1em;

}



ul li{
     position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    background: #222;
    color: #efefef;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;  
    border-bottom: 1px solid #111;
    font-size:18px;
}
ul li:first-child{
    border-radius: 5px 5px 0 0;

}
ul li:last-child{
  border-radius: 0 0 5px 5px;
}

ul li span{
  float: right;
  background: rgba(255,255,255,0.15);
    border-radius: 15px;
    padding:3px 8px;
    height:25px;
    width:25px;
  font-size:16px;
      -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s...

JavaScript

var horn_list = [{ ticker: "btcusdt", price: 9000, p: "up" }];
var last_price_table = [];
var socket_path = "";

//var socket;
/*var t = "";
var i = 0;
horn_list.forEach(function(e) {
    if (i == 0) {

    } else {
        t = t + "/";
    }
    add_data(e.ticker, 1);
    t = t + e.ticker + "@aggTrade";
    i++;
});
socket = new WebSocket('wss://stream.binance.com:9443/stream?streams=' + t);*/

function add_horn() {
 
try {
    socket.close();
}
catch(error) {
  console.error(error);
  // expected output: ReferenceError: nonExistentFunction is not defined
  // Note - error messages will vary depending on browser
}

    var val = document.getElementById('in').value;
    val = val.split(" ");
    var data = { "ticker": val[0], "price": val[1], "p": val[2] };
    var x = document.createElement("LI");
    var t = document.createTextNode(val);
    var xs = document.createElement("SPAN");
    var tx = document.createTextNode("x");
    xs.appendChild(tx);
    x.appendChild(xs);

    x.appendChild(t);
    document.getElementById("jobs").appendChild(x);
    horn_list.push(data);
    var t = "";
    var i = 0;
    horn_list.forEach(function(e) {
        if (i == 0) {

        } else {
            t = t + "/";
        }
        add_data(e.ticker, null);
        t = t + e.ticker + "@aggTrade";
        i++;
    });
    socket_path = t;
    run_socket();
    //socket = new WebSocket('wss://stream.binance.com:9443/stream?streams=' + t);
}

function update_stream(socket) {
    var t = "";
    var i = 0;
    horn_list.forEach(function(element) {
        var d = element.split(':');
        if (i == 0) {

        } else {
            t = t + "/";
        }
        add_data(d[0], 0);
        t = t + d[0] + "@aggTrade";
        i++;
        //<streamName1>/<streamName2>/<streamName3>
    });
    socket_path = t;
    run_socket();
//socket = new WebSocket('wss://stream.binance.com:9443/stream?streams=' + t);
}

function addMessage(message) {
    $("#messages").prepend("<li...