有效地使用WebSocket和DataTables

时间:2019-01-14 12:21:46

标签: javascript websocket datatables binance

我运行了一个WebSocket客户端,该客户端从Binance WebSocket API获取数据流。客户端访问流并使用流数据更新Datatable。但是由于要更新大量数据到表,这使得DataTable非常慢。并且由于WebSocket占用的内存量,如果页面打开时间过长,则会导致页面重新加载

let trackedStreams = [];
var table = $('#example').DataTable( {
                            columns: [
                                { title: "Pair", data: "pair"  },
                                { title: "Last Price", data: "lprice" },
                                { title: "24h Change", data: "24change" },
                                { title: "24h High", data: "24high" },
                                { title: "24h Low", data: "24low" }
                            ]
                            });

let ws = new WebSocket("wss://stream.binance.com:9443/ws/!ticker@arr");

ws.onopen = function() {
    console.log("Binance connected...");
};

ws.onmessage = function(evt) {
    try {
        let msgs = JSON.parse(evt.data);
        if (Array.isArray(msgs)) {
            for (let msg of msgs) {
                handleMessage(msg);
            }
        } else {
            handleMessage(msgs)
        }
    } catch (e) {
        console.log('Unknown message: ', e);
    }
}
ws.onclose = function() {
    console.log("Binance disconnected");
}

function handleMessage(msg) {
    const stream = msg.s;
    if (trackedStreams.indexOf(stream) === -1) {
    //if symbol doesnt exist in array
        var tmpArray = [msg.s, msg.c, msg.P, msg.h, msg.l];
        trackedStreams.push(stream);

        table.rows.add([ {
            "pair":         msg.s,
            "lprice":       msg.c,
            "24change":     msg.P,
            "24high":       msg.h,
            "24low":        msg.l
        } ])
        .draw()
        .nodes()
        .to$()
        .addClass( msg.s );

} else {
    var selectedRow = table.rows('.' + msg.s);
    console.log(selectedRow);
    table.row( selectedRow ).data( {
        "pair":         msg.s,
        "lprice":       msg.c,
        "24change":     msg.P,
        "24high":       msg.h,
        "24low":        msg.l
    } ).draw();  
}

我的问题是,是否有更好的方法来使这种方法更有效,使DataTables更具响应性并确保WebSocket不会使用过多的内存?

0 个答案:

没有答案