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

Question

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

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

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

看起来 Safari 不支持共享工作线程以支持服务工作线程。 Chrome/ff/opera 似乎支持共享工作。

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

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

Answer 1

经过进一步的研究，我决定实现 Web Workers。

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

在我的工人.js文件中，我把它放在顶部以启动事情。 如果我不这样做，importScripts 函数会抛出错误。

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

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

我也在使用健壮的 websockets，所以它会自动从这个 github 重新连接，因为这段代码适用于 Web worker 并得到维护。 还有另一个同名项目在撰写本文时尚未更新。 重新连接网络套接字不支持 Web 工作线程，您将收到错误。- 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'});
}

工人.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);
};