跨浏览器选项卡共享 websocket？

Question

我们希望每个浏览器都有一个套接字，而不是浏览器中的每个选项卡都有一个套接字。我们怎样才能实现它？我读到了关于共享网络工作者的文章，这很有前途。对此的参考也表示赞赏。不幸的是，据我所知，共享网络工作者还没有被 mozilla 或 internet explorer 实现。那么在这种情况下该怎么办？我们正在服务器端开发 node.js。

原文由 singhsumit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看到这个问题后，我终于在几天前实现了共享套接字并添加到我的库中。它似乎适用于大多数浏览器，甚至包括 IE6，但 Opera 除外。对于 Opera，您可以使用常规检查而不是卸载事件。

在 https://github.com/flowersinthesand/portal/issues/21 检查相关问题

###留下一个cookie

1. 设置 cookie 以通知存在共享套接字。
2. 当套接字关闭时，删除该 cookie 以通知没有共享套接字。

参见， https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L629-L650

###共享和使用共享套接字

1. 使用 storage 事件和 localStorage - localStorage 在设置和删除值时触发 storage 事件。
2. 检查是否支持 StorageEvent 和 localStorage。
3. 添加按键过滤事件的存储事件处理程序。我使用套接字的 url 作为键
4. 添加删除存储属性的套接字关闭事件
5. 要发出信号，请使用先前的密钥设置数据以进行存储

分享： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L531-L568

使用共享： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L851-L893

1. 使用 window.open 方法 - 如果我们知道共享窗口的名称，我们可以获取该窗口的引用并访问其属性。
2. 每个浏览器都支持 window.open 方法，但某些浏览器（如 Chrome）禁止访问返回窗口的属性。
3. 获取或创建 name 属性为 key 的 iframe。我使用了套接字的 url，但请注意 IE 不允许在 iframe 标签的名称属性中使用非单词字符。
4. Iframe 的 contentWindow 是共享窗口引用。设置回调变量来存储每个窗口的侦听器。
5. 要发出信号，只需使用数据调用回调。请注意，IE 8 及更低版本仅允许将字符串传递给其他窗口的函数，并且共享窗口可能会被销毁。

分享： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L571-L605

使用共享： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L894-L929

笔记

1. 在上面的实现中，信令是广播，所以数据应该指示目标。我使用了目标属性，p 代表父级，c 代表子级。
2. 我使用了额外的变量来共享套接字：opened - 共享套接字是否打开，children - 共享者列表。代码和注释将帮助您了解细节。

希望我的回答对您有所帮助。

原文由 Donghwan Kim 发布，翻译遵循 CC BY-SA 4.0 许可协议