icehongssii/app.js

## app.js
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const WebSocket = require('ws');
const request = require('request');

function getPairsPromise(){
  return new Promise((resolve, reject)=>{
    request('https://api.binance.com/api/v1/ticker/24hr', function(err,res,body){
      if(!err&& res.statusCode ==200){
            var results = JSON.parse(body);
            var pairs = []
            var i;
            for(i=0; i<results.length; i++){
              pairs.push(results[i].symbol);
            }
            query = queryMaker(pairs)
            resolve(query)

        }
    });
  });
}


function queryMaker(pairs){
  let streamQuery = ''
  pairs.forEach((pair) => {
    streamQuery += pair.toLowerCase() + '@aggTrade' + '/'
  })
  return streamQuery;
}

async function getPriceStream(){
  pairs = await getPairsPromise();
  const uri = 'wss://stream.binance.com:9443/stream?streams=' + pairs
  const originUri = 'wss://stream.binance.com:9443'
  const ws = new WebSocket(uri, {origin: originUri});
  return ws
}


io.on('connect', async function(socket){
    ws = await getPriceStream();
    ws.onmessage = function (event) {
      const data = JSON.parse(event.data)
      const symbol = data.data.s
      const price = data.data.p
      socket.broadcast.emit('price_data', { symbol, price });
    }

  });


app.get('/', function(req,res){
    res.sendFile('/index.html',{"root":__dirname});
});


http.listen(3000,function(){
  console.log("running");
});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border:none;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg .tg-us36{border-color:inherit;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
</style>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

  <meta charset="UTF-8">
  <title>Binance Coin Latest Price</title>
</head>
<body>
  <div class="container">
    <table class="tg">
      <tr>
        <th class="btc"></th>
        <th class="eth"></th>
        <th class="bnb"></th>
        <th class="sdt"></th>
      </tr>
    </table>
  </div>
</body>
</html>

<script src="socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:3000');
  socket.on('price_data', function (data) {
    // console.log("hello")
    var quote = data.symbol.slice(-3)
    // console.log(quote)
    if($("div." + data.symbol.toUpperCase()).length) {
      $("p." + data.symbol.toUpperCase()).html(data.price)
    } else {
      var appendItem = "<div class="
                        + data.symbol
                        + "><h3 class="
                        + data.symbol
                        + ">"
                        + data.symbol
                        + "</h3><p class="
                        + data.symbol
                        + ">"
                        + data.price
                        + "</p></div>"
      $("th." + quote.toLowerCase()).append(appendItem)
    }
  });
</script>
	const app = require('express')();
	const http = require('http').Server(app);
	const io = require('socket.io')(http);
	const WebSocket = require('ws');
	const request = require('request');

	function getPairsPromise(){
	return new Promise((resolve, reject)=>{
	request('https://api.binance.com/api/v1/ticker/24hr', function(err,res,body){
	if(!err&& res.statusCode ==200){
	var results = JSON.parse(body);
	var pairs = []
	var i;
	for(i=0; i<results.length; i++){
	pairs.push(results[i].symbol);
	}
	query = queryMaker(pairs)
	resolve(query)

	}
	});
	});
	}


	function queryMaker(pairs){
	let streamQuery = ''
	pairs.forEach((pair) => {
	streamQuery += pair.toLowerCase() + '@aggTrade' + '/'
	})
	return streamQuery;
	}

	async function getPriceStream(){
	pairs = await getPairsPromise();
	const uri = 'wss://stream.binance.com:9443/stream?streams=' + pairs
	const originUri = 'wss://stream.binance.com:9443'
	const ws = new WebSocket(uri, {origin: originUri});
	return ws
	}


	io.on('connect', async function(socket){
	ws = await getPriceStream();
	ws.onmessage = function (event) {
	const data = JSON.parse(event.data)
	const symbol = data.data.s
	const price = data.data.p
	socket.broadcast.emit('price_data', { symbol, price });
	}

	});


	app.get('/', function(req,res){
	res.sendFile('/index.html',{"root":__dirname});
	});


	http.listen(3000,function(){
	console.log("running");
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style type="text/css">
	.tg {border-collapse:collapse;border-spacing:0;border:none;}
	.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
	.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
	.tg .tg-us36{border-color:inherit;vertical-align:top}
	.tg .tg-yw4l{vertical-align:top}
	</style>
	<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>

	<meta charset="UTF-8">
	<title>Binance Coin Latest Price</title>
	</head>
	<body>
	<div class="container">
	<table class="tg">
	<tr>
	<th class="btc"></th>
	<th class="eth"></th>
	<th class="bnb"></th>
	<th class="sdt"></th>
	</tr>
	</table>
	</div>
	</body>
	</html>

	<script src="socket.io/socket.io.js"></script>
	<script>
	var socket = io.connect('http://localhost:3000');
	socket.on('price_data', function (data) {
	// console.log("hello")
	var quote = data.symbol.slice(-3)
	// console.log(quote)
	if($("div." + data.symbol.toUpperCase()).length) {
	$("p." + data.symbol.toUpperCase()).html(data.price)
	} else {
	var appendItem = "<div class="
	+ data.symbol
	+ "><h3 class="
	+ data.symbol
	+ ">"
	+ data.symbol
	+ "</h3><p class="
	+ data.symbol
	+ ">"
	+ data.price
	+ "</p></div>"
	$("th." + quote.toLowerCase()).append(appendItem)
	}
	});
	</script>