如何正确关闭 websockets

Question

我正在构建一个 Chrome 扩展，它连接到 websockets 并检索数据。我正在尝试构建一种方式，用户 select 来自 popup.html 的选项，它会更改为将建立连接的 websocket。这工作正常。

我的问题是，在 select 选择一个选项后，新连接建立到该 websocket，但之前的连接不断返回数据。我想在打开新连接之前关闭之前的连接。

popup.js（在单选按钮更改时存储新值）

$(function() {
        $("input:radio[name=exc]").change(function() {
            chrome.storage.local.set({'checked':this.value}, function() {
            });
        });
    });

update.js（接收新的 selected 单选按钮，我正在尝试关闭之前的 websocket）

chrome.storage.onChanged.addListener(function(changes, namespace) {
    chrome.storage.local.get("checked", function(data) {
        if(data.checked == "foo") {
            var ws = new WebSocket('wss://api.foo.com/ws');
            ws.onopen = function() {
                ws.send(JSON.stringify({"event":"test", "channel":"test"}));
            };
            ws.onmessage = function(msg) {
                var price = response[7];
                if(hb != "hb" && typeof hb != 'undefined') {
                    price = price.toString();
                    chrome.extension.sendMessage(price);
                }
            };
            ws.close();
        }
        else if(data.checked == "bar") {
            var pusher = new Pusher('xxxxxxxxxxxxx');
            var tradesChannel = pusher.subscribe('test'),
            child = null;
            tradesChannel.bind('test', function (data) {
                var price = data.price;
                if(typeof data.price != 'undefined') {
                    price = price.toString();
                    chrome.extension.sendMessage(price);
                }
            });
            pusher.disconnect();
         }
    });
});

如果我按原样保留代码，我会收到 WebSocket connection to 'wss://api.foo.com/ws' failed: WebSocket is closed before the connection is established. 并且没有收到任何数据。

Answer 1

官方 WebSocket MDN 文档中有 close() method：

关闭() 关闭 WebSocket 连接或连接尝试（如果有）。如果连接已经关闭，这个方法什么都不做。

void close(
  in optional unsigned short code,
  in optional DOMString reason
);

此外，请确保您在正确的端口上。更多来自 SO post.

Answer 2

您的代码目前没有任何意义；设置新服务后立即调用 close/disconnect。

此外，您丢失了对推送服务的引用，因为它仅存储在局部变量中。这需要作为状态存储在某个地方——全局状态很容易，不过也许你可以更好地设计它。

一个简单的解决方案如下所示：

var ws; // We need it later, can't be a local variable

/* ... */
    if(data.checked == "foo") {
        if(ws) { ws.close(); ws = null; }
        ws = new WebSocket('wss://api.foo.com/ws');
        ws.onopen = function() {
            ws.send(JSON.stringify({"event":"test", "channel":"test"}));
        };
        ws.onmessage = function(msg) {
            var price = response[7];
            if(hb != "hb" && typeof hb != 'undefined') {
                price = price.toString();
                chrome.extension.sendMessage(price);
            }
        };
        // Don't close the new one here
    }

如何正确关闭 websockets

How to properly close websockets

javascript

jquery

websocket

google-chrome-extension

pusher