1

我正在使用 websockets 来传递 json 消息，但如果打开了多个选项卡，我不想要多个 ws 连接。

为了减少连接，我想实现一个单一的 ws 连接对象，它可以向我的网站的所有选项卡发送/接收消息。该对象应将 json 转发到所有选项卡，并且每个选项卡都将处理该消息。

我一直在关注网络/共享/服务工作者，我不确定 2018 年解决问题的路径，浏览器支持似乎也是一个问题。

Safari 中似乎不支持共享工作人员以支持服务工作人员。Chrome/ff/opera 似乎支持共享工作者。

简而言之，这有点令人困惑，有点混乱，我想知道在最好的支持下最好的前进道路。

如果您知道一个好的资源，使用您建议的方法实现 ws 的示例代码也请提供。

4

1 回答 1

1

经过进一步研究，我决定实施网络工作者。

在这一点上，我取得了成功，我想为未来的读者添加一个我坚持的重要文章。

在我的 worker.js 文件中，我将它放在顶部以启动。如果我不这样做，importScripts 函数会引发错误。

同样为了帮助，这是我的 worker.js 文件中有效的框架代码。来自 html 页面的消息处理与从服务器接收到的 ws 消息是分开的。您可以从 html 页面启动、停止工作程序。

所有选项卡都会从工作人员那里获取消息，每个页面都需要根据需要处理消息。

我还使用了强大的 websockets，因此它会自动从这个 github 重新连接，因为这段代码可以与 web 工作者一起使用并得到维护。还有一个同名项目在本文发布时尚未更新。reconnecting-websockets 不支持 web worker，你会得到一个错误。- https://github.com/nathanboktae/robust-websocket

html

<script>
document.addEventListener('DOMContentLoaded', init);

function init(){
    worker = new Worker('js/ws_worker.js');
    worker.addEventListener('message', workerMessaged);

    worker.postMessage({ "args": '<username_admin>', "cmd": 'start', "url": '127.0.0.1:8000' });
    worker.postMessage({ "message": 'Initialize new worker'});
    console.log('Message posted to worker, start');
}

// Received a json message from the Worker, process it.
function workerMessaged(ev){
    console.log('Message received from worker');
    console.log(ev.data);
    worker.postMessage({ "cmd": 'message', "message": 'Sending reply over ws'});
}

worker.js

// proper initialization
if( 'function' === typeof importScripts) {
importScripts('robust-websocket.js');

var WebSocket;


self.addEventListener("message", function(e) {
    var args = e.data.args;
    var cmd = e.data.cmd;
    var roomName = e.data.args;
    var url = e.data.url;
    var message = e.data;
    // Code to process ws messages from the server
    WebSocket.onmessage = function(event) {
        console.log(" WebSocket message received: " + event.data, event);
        self.postMessage(event.data);
    };

    WebSocket.onerror = function(event) {
        console.log(" WebSocket message received: " + event.data, event);
        self.postMessage(event.data);
    };

    if (cmd === 'start') {
        WebSocket = new RobustWebSocket(
        'ws://' + url +
        '/ws/' + roomName + '/');

        console.log('Connected via websockets');

        /* Send initial message to open the connection and finalize the ws object*/
        WebSocket.onopen = function() {
            var obj = { "message": "hello" };
            var json = JSON.stringify(obj);
            WebSocket.send(json);
        };

    } else if (cmd === 'stop') {
        WebSocket.onclose = function() {
            console.log('Closing WebSocket');
            WebSocket.close();
            console.log('Closed WebSocket');
            console.log('Terminating Worker');
            self.close(); // Terminates the worker.
        };

    } else if (cmd === 'message') {
        WebSocket.onopen = function() {
            var json = JSON.stringify(message);
            WebSocket.send(json);
        };
        console.log('message sent over websocket');
        console.log('message');

    } else {
        console.log('logging error ' + e.data);
        console.log(e.data);
        self.postMessage('Unknown command: ');
    }

}, false);

};
于 2018-10-21T07:11:27.657 回答