javascript - 如何防止我的服务器 Web 套接字淹没我的浏览器客户端

Question

这对我来说很新鲜，所以如果这是一个愚蠢/明显的问题，请原谅我。

我的服务器上有一个网络套接字。我每秒发送大约 40 个 jpeg 作为字节数组(每个大小约为 12kb)。

在客户端上，我在 Canvas 控件上显示图像。

每个 JPEG 上都有一个时间戳水印。

时不时地，时间戳开始滞后于当前系统时间。

有时是几分钟前的事情。

我更愿意在客户端上确定何时出现这种滞后，然后以某种方式刷新网络套接字。

这可能吗？

谢谢

额外

有人向我指出，只需断开连接并重新连接即可清除幻像消息的套接字。

以下代码显示了我的客户端在失去连接时如何重新连接。我必须将其放入，以防我没有收到与服务器的断开连接:

function Reconnect() {
    try {
        ws = new WebSocket(url);
        ws.binaryType = 'arraybuffer';
        ws.onerror = function (e) {
            try {
                console.log('onerror');
            }
            catch (err) {
                console.log(err);
            }
        };
        ws.onclose = function () {
            try {
                Reconnect();
            }
            catch (err) {
                console.log(err);
            }
        };
        ws.onopen = function () {
            try {
                StartPing();
                console.log('onopen');
            }
            catch (err) {
                console.log(err);
            }
        };
        ws.onmessage = function (e) {
                try{
                  ''display image on canvas
                }
                catch (err) {
                    console.log(err);
                }
            }
        };
    }
    catch (err) {
        Reconnect();
    }
}

function StartPing() {
    try{
        window.clearInterval(window.timerID);
        if (!window.timerID) { /* avoid firing a new setInterval, after one has been done */
            window.timerID = setInterval(Ping, 20000);
        }
    }
    catch (err)
    {
        console.log(err + ' Reconnect');
    }
}

function Ping() {
try {

    var now = new Date();
    var d = now.format("yyyymmddhhMMss");
    var currentTimeStamp = d + '000';
    if (parseInt(currentTimeStamp) - parseInt(lastUpdated) < 60) {
        console.log('Reconnect');
        Reconnect();
    }
    else {
        StartPing();
    }
}
catch (err) {
    console.log(err + ' Ping');
}

Answer 1

您应该确保在连接新的 WebSocket 之前关闭旧的 WebSocket，否则您会同时获得多个打开的连接，这不是您想要的(并且在尝试了解发生的情况时会让您感到困惑)。

在重新连接函数中，执行以下操作:

function Reconnect() {
    try {
        // ws is probably some global variable, so:
        if(ws instanceof WebSocket)
          ws.close();
        ws = new WebSocket(url);
        ws.binaryType = 'arraybuffer';
        // Rest of code...