如何正确关闭 websocket答案

【问题标题】：How to properly close websockets如何正确关闭 websocket
【发布时间】：2017-09-20 15:50:29
【问题描述】：

我正在构建一个连接到 websocket 并检索数据的 Chrome 扩展程序。我正在尝试构建一种方式，让用户从 popup.html 中选择一个选项，并将其更改为将建立连接的 websocket。这工作正常。

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

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

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

update.js（接收新选择的单选按钮，我正在尝试关闭以前的 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. 并且没有收到任何数据。

【问题讨论】：

标签： javascript jquery google-chrome-extension websocket pusher

【解决方案1】：

您目前的代码没有意义；设置新服务后立即致电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
    }

【讨论】：

【解决方案2】：

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

关闭() 关闭 WebSocket 连接或连接尝试（如果有）。如果连接已关闭，则此方法不执行任何操作。

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

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

【讨论】：