Как обновить соединение через веб-сокет при изменении раскрывающегося списка в JavaScript? - PullRequest
0 голосов
/ 25 февраля 2020

Здесь проблема в том, что когда я загружаю свой веб-сайт в первый раз, звоните JavaScript, веб-сокет работает нормально. Но если изменить раскрывающийся список и выбрать другие пары монет, то он отображает старые и новые данные соединения, означая перекрытие.

Front Overlapping View

Изображение запроса веб-сокета в сети браузера

Network request View

Здесь веб-сокет 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",
    });


};
...