Multiple websocket connections causing slow browser performance and hanging

Vivek Vivi 0
Viewed 52

I created some javascript code to getting live coin price from Binance.com using websockets.

The problem is that I can't get multiple live coin prices with this code. Each coin needs different javascript code. Each time I need to call wss://stream.binance.com:9443/ws/ with in these codes. It is creating a slow browser warning and hanging.

I want to add multiple live coin prices to my project. Is it possible with different id like <input type="text" id="btc-price"> & <input type="text" id="ltc-price">?

////////////////////////////////////////////////////////////////////////////////  
let weburl = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade');
let stockPriceInput = document.querySelector('#btc-price');
let lastPrice = null;
weburl.onmessage = (event) => {
  let stockObject = JSON.parse(event.data);
  let price = parseFloat(stockObject.p).toFixed(9);
  stockPriceInput.style.color = !lastPrice || lastPrice === price ? 'black' : price > lastPrice ? 'green' : 'red';
  stockPriceInput.value = price;  
  lastPrice = price;
  $('.ChangeCalulator').change();//
  //func_change.call(stockPriceInput)
};
////////////////////////////////////////////////////////////////////////////////
let qqweburl = new WebSocket('wss://stream.binance.com:9443/ws/ltcusdt@trade');
let qqstockPriceInput = document.querySelector('#ltc-price');
let qqlastPrice = null;
qqweburl.onmessage = (event) => {
let qqstockObject = JSON.parse(event.data);
let qqprice = parseFloat(qqstockObject.p).toFixed(9);
qqstockPriceInput.style.color = !qqlastPrice || qqlastPrice === qqprice ? 'black' : qqprice > qqlastPrice ? 'green' : 'red';
qqstockPriceInput.value = qqprice;  
qqlastPrice = qqprice;
$('.ChangeCalulator').change();
};
////////////////////////////////////////////////////////////////////////////////
.wrap {
  width: 250px;
  margin: 0 auto;
  padding-top: 1em;
}

input {
  width: 225px;
  height: 52px;
  font-size: 20px;
  text-align: center;
}
<input type="text" id="btc-price">
<input type="text" id="ltc-price">

I created a codepen page for preview: https://codepen.io/themecode/pen/YzLwvXr Please help me...

websocket javascript
1 Answers

Here's an example of how you would keep track of multiple coins with a single stream and a single message handler.

const streams =  {
  'btcusdt@trade': { name: 'btc', input: document.getElementById('btc-price') },
  'ltcusdt@trade': { name: 'ltc', input: document.getElementById('ltc-price') },
};

// Grab all elements that have the ChangeCalulator class here
// this assumes that there are elements added or removed with this class
const calculators = $('.ChangeCalulator');
// if there is a calculator for each coin then it would be more efficient
// to only update the one for the particular stream

const streamParams = Object.entries(streams).map(([streamId]) => streamId).join(`/`);
const streamUrl = `wss://stream.binance.com:9443/stream?streams=${streamParams}`;
const wss = new  WebSocket(streamUrl);

wss.onmessage = (event) => {
  const eventData = JSON.parse(event.data);
  const streamId = eventData.stream;
  
  const latestPrice = Number.parseFloat(eventData.data.p);
  const lastPrice = streams[streamId].lastPrice || latestPrice;
  
  // compare latest and last prices
  const inputClass = latestPrice > lastPrice
    ? 'inc'
    : latestPrice < lastPrice ?
      'dec' : '';
  
  // update relevant input with value 
  const input = streams[streamId].input;

  // remove any existing classes
  input.classList.remove('inc','dec');
  
  // add inc/dec class only
  if (inputClass)
    input.classList.add(inputClass);

  // set input value
  input.value = latestPrice.toFixed(2);
  
  // save the latest price for this coin.
  streams[streamId].lastPrice = latestPrice;
  
  // Call calculators.change() here - I can't actually add it because it will break the snippet.
  // calculators.change;
};
.wrap {
  width: 250px;
  margin: 0 auto;
  padding-top: 1em;
}

input {
  width: 225px;
  height: 52px;
  font-size: 20px;
  text-align: center;
}

.inc {
  color: green;
}

.dec {
  color: red;
}
<input type="text" id="btc-price">
<input type="text" id="ltc-price">

phuzi0
Related