Здесь проблема в том, что когда я загружаю свой веб-сайт в первый раз, звоните JavaScript, веб-сокет работает нормально. Но если изменить раскрывающийся список и выбрать другие пары монет, то он отображает старые и новые данные соединения, означая перекрытие.
Изображение запроса веб-сокета в сети браузера
Здесь веб-сокет JavaScript функция
function orderBook(symbol) {
var webSocketURL = '';
var sym = symbol.toLowerCase();
var webSocketURL = "wss://stream.binance.com:9443/ws/" + sym + "@depth20";
let orderbookdata = new WebSocket(webSocketURL);
//WebSocket.OPEN
orderbookdata.onopen = function(e) {
console.log(WebSocket.OPEN);
};
orderbookdata.onmessage = function(event) {
ourData = JSON.parse(event.data);
var ask_html = '';
$.each(ourData.asks, function(i) {
ask_html += '<tr class="remove-ask" style="line-height: 0px;"><td class="crypt-down">' + ourData.asks[i][0] + '</td><td>' + ourData.asks[i][1] + '</td><td>' + (ourData.asks[i][0] * ourData.asks[i][1]).toFixed(6) + '</td></tr>';
$('.limit-sell-best-price').html(ourData.asks[i][0]);
});
$(".remove-ask").remove();
$('#asks_bid').after(ask_html);
var bid_html = '';
$.each(ourData.bids, function(i) {
bid_html += '<tr class="remove-bid" style="line-height: 0px;"><td class="crypt-up">' + ourData.bids[i][0] + '</td><td>' + ourData.bids[i][1] + '</td><td>' + (ourData.bids[i][0] * ourData.bids[i][1]).toFixed(6) + '</td></tr>';
$('.limit-buy-best-price').html(ourData.bids[i][0]);
});
ConvertPrice(symbol, ourData.bids[0][0]);
$(".remove-bid").remove();
$('#bids_bid').after(bid_html);
};
orderbookdata.onclose = function(event) {
if (event.wasClean) {
alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
// e.g. server process killed or network down
// event.code is usually 1006 in this case
alert('[close] Connection died');
}
};
orderbookdata.onerror = function(error) {
};
};
Функция раскрывающегося списка
function exchangeInfo() {
var burl = 'https://api.binance.com';
var endPoint = '/api/v3/exchangeInfo';
var dataQueryString = '';
var url = burl + endPoint + dataQueryString;
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', url, true);
ourRequest.onload = function() {
var symbol_html = '';
var tickerPairHtml = '';
ourData = JSON.parse(ourRequest.responseText);
$.each(ourData.symbols, function(key, val) {
var selected = '';
if (key == 0) {
selected = "selected";
LoadCharts(val.symbol);
$('.buy-symbol-data').html(val.baseAsset);
$('.sell-symbol-data').html(val.quoteAsset);
}
symbol_html += '<option value="' + val.symbol + '" ' + selected + '>' + val.baseAsset + ' / ' + val.quoteAsset + '</option>';
tickerPairHtml += '<tr style="line-height: 0px;" class="remove-ticker" id="' + val.symbol + '">';
tickerPairHtml += '<td class="align-middle">' + val.baseAsset + ' / ' + val.quoteAsset + '</td>';
tickerPairHtml += '<td class="align-middle coin-pri"></td>';
tickerPairHtml += '<td class="coin-per"></td>';
tickerPairHtml += '</tr>';
});
$('#symbol_id').html(symbol_html);
$('.tickerpair24h').append(tickerPairHtml);
}
ourRequest.send();
}
function LoadCharts(symbol) {
//let exchange = 'BINANCE';
if (symbol == undefined) {
symbol = $('#symbol_id option:selected').val();
}
orderBook(symbol);
pairTricker24h(symbol);
recentTrade(symbol);
var data = new BinanceDatafeed({
debug: false
});
var widget = window.tvWidget = new TradingView.widget({
debug: false, // uncomment this line to see Library errors and warnings in the console
fullscreen: false,
width: '780px',
height: '460px',
symbol: symbol,
interval: '60',
toolbar_bg: 'black',
container_id: "tv_chart_container",
// BEWARE: no trailing slash is expected in feed URL
datafeed: data,
library_path: "http://localhost/BitsShadow/charting_library/charting_library/",
locale: "en",
charts_storage_url: 'http://saveload.tradingview.com',
theme: "Dark",
});
};