Question

我正在利用websockets传递json消息，但是如果打开了多个标签，我不希望有多个ws连接。

要减少连接，我想实现一个ws连接对象，该对象可以与我的网站的所有选项卡之间收发消息。该对象应将json转发到所有选项卡，每个选项卡将处理消息。

我一直在寻找网络/共享/服务工作者，但我不确定2018年解决此问题的途径，浏览器支持似乎也值得关注。

在Safari中不支持看起来像共享工作器的服务工作器。 Chrome / ff / opera似乎支持共享工作者。

简而言之，这有点令人困惑，有点混乱，我想知道获得最佳支持的最佳途径。

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

Answer 1

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

在这一点上，我取得了成功，我想添加一个重要的文章，以备将来读者阅读。

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

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

所有选项卡都将从工作程序获取消息，每个页面都需要根据需要处理消息。

我还使用了稳健的websockets，因此它可以从此github自动重新连接，因为此代码可与网络工作者一起使用并得到维护。还有另一个同名项目，在发布本文时尚未更新。 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);

};

Websockets +单实例+交叉表通信的最佳方式？

1 个答案: