Websockets+Single instance+crosstab通信的最佳方式是什么？
我正在使用websockets来传递json消息，但是如果打开了多个标签，我不想要多个ws连接。
为了减少连接，我想实现一个单独的ws连接对象，它可以向我的网站的所有选项卡发送消息，也可以从所有选项卡接收消息。对象应将json转发到所有选项卡，每个选项卡都将处理该消息。
我一直在关注web/共享/服务工作者，我不确定2018年解决这个问题的路径和浏览器支持似乎也是一个令人担忧的问题。
看起来Safari不支持共享工作进程来支持服务工作进程。Chrome/ff/opera似乎支持共享工作者。
简而言之，这有点令人困惑，有点混乱，我想知道有最好的支持的最好的前进道路。
如果你知道一个很好的资源，用你建议的方法实现ws的示例代码，请提供它。
回答 1
Stack Overflow用户
发布于 2018-10-21 15:11:28
经过进一步的研究，我决定实现web worker。
在这一点上，我获得了成功，我想为未来的读者添加一篇我一直坚持的重要文章。
在我的worker.js文件中，我把这个放在最前面，这样就可以开始了。如果我没有这样做，importScripts函数就会抛出一个错误。
另外，为了方便起见，下面是我的worker.js文件中的框架代码。来自html页面的消息处理与从服务器接收的ws消息是分开的。您可以从html页面启动和停止worker。
所有选项卡都将从worker获取消息，每个页面都需要根据需要处理消息。
我还使用了健壮的websockets，这样它就可以自动从github重新连接，因为这段代码可以与web workers一起工作并得到维护。还有另一个同名的项目，到这篇文章的时候还没有更新。reconnecting-websockets不支持web workers，您将得到一个错误。- 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);
};https://stackoverflow.com/questions/52902958
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号