Question

我正在使用chrome扩展程序实现WebSocket。

我在background.js中编写了代码

var websocket;
function createWebSocketConnection() {

    if('WebSocket' in window){
        websocket = new WebSocket(host);
        console.log("======== websocket ===========", websocket);

        websocket.onopen = function() {
            websocket.send("Hello");
        };

        websocket.onmessage = function (event) {
            var received_msg = JSON.parse(event.data);
            var notificationOptions = {
                type: "basic",
                title: received_msg.title,
                message: received_msg.message,
                iconUrl: "extension-icon.png"
            }
            chrome.notifications.create("", notificationOptions);
        };

        websocket.onclose = function() { alert("==== web socket closed 
======"); };
}

当我打开弹出屏幕（index.html）时，调用方法createWebSocketConnection()，这将创建一个WebSocket连接。

但是，只要弹出窗口关闭，就会在服务器控制台上打印一条消息＆＃34; Web套接字已关闭。

我有以下问题 -

我应该在content.js中建立WebSocket连接吗？
打开的每个网页都有不同的WebSocket？
有什么方法可以在background.js中保存WebSocket对象吗？
在Chrome扩展程序中实施Web套接字的最佳做法是什么？

提前致谢！

Answer 1

万岁！

我通过修改manifest.json

解决了这个问题

{
...
  "background": {
    ...
    "persistent": true
  },
...
}

Answer 2

这取决于您希望实现目标的方式和方式。

如果每个扩展名中有一个持久WebSocket是您的目标，这是最可能的情况，那么在后台脚本中创建它。然后，您可以使用messaging将消息中继到弹出/内容。

如果您需要从内容/弹出页面直接与服务器通话，请在那里创建。当关闭内容页面或弹出窗口时，您的WebSocket也将关闭。

Answer 3

我在background.js中实现了网络套接字。

以下是代码：

function createWebSocketConnection() {
    if('WebSocket' in window){
        chrome.storage.local.get("instance", function(data) {
            connect('wss://' + data.instance + '/ws/demoPushNotifications');
        });
    }
}

//Make a websocket connection with the server.
function connect(host) {
    if (websocket === undefined) {
        websocket = new WebSocket(host);
    }

    websocket.onopen = function() {
        chrome.storage.local.get(["username"], function(data) {
            websocket.send(JSON.stringify({userLoginId: data.username}));
        });
    };

    websocket.onmessage = function (event) {
        var received_msg = JSON.parse(event.data);
        var demoNotificationOptions = {
            type: "basic",
            title: received_msg.subject,
            message: received_msg.message,
            iconUrl: "images/demo-icon.png"
        }
        chrome.notifications.create("", demoNotificationOptions);
        updateToolbarBadge();
    };

    //If the websocket is closed but the session is still active, create new connection again
    websocket.onclose = function() {
        websocket = undefined;
        chrome.storage.local.get(['demo_session'], function(data) {
            if (data.demo_session) {
                createWebSocketConnection();
            }
        });
    };
}

//Close the websocket connection
function closeWebSocketConnection(username) {
    if (websocket != null || websocket != undefined) {
        websocket.close();
        websocket = undefined;
    }
}

Answer 4

Web套接字将被关闭，因为弹出窗口具有其自身的上下文，每次打开弹出窗口都会创建新对象，并且在关闭弹出窗口时，状态将被删除，您需要在后台脚本中执行此逻辑！上述开发人员提供了一些摘要！

在chrome扩展中实现websocket

4 个答案: