跨浏览器标签共享websocket？

Question

我们希望每个浏览器有一个套接字，而不是浏览器中每个选项卡一个。我们怎样才能实现它？我读到了有希望的共享网络工作者。对此的参考也值得赞赏。不幸的是，据我所知，mozilla或Internet Explorer尚未实现共享Web工作者。那么在这种情况下该怎么办？我们正在服务器端的node.js上工作。

Answer 1

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

在https://github.com/flowersinthesand/portal/issues/21

检查相关问题

离开饼干

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

请参阅https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L629-650

共享和使用共享套接字

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

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

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

1. 使用window.open方法 - 如果我们知道共享窗口的名称，我们可以获取该窗口的引用并访问其属性。
   1. 每个浏览器都支持window.open方法，但Chrome等浏览器禁止访问返回窗口的属性。
   2. 获取或创建名称属性为关键字的iframe。我使用了socket的url，但请注意IE不允许在iframe标签的name属性中使用非单词字符。
   3. iframe的contentWindow是共享窗口引用。设置回调变量以存储每个窗口的监听器。
   4. 要发出信号，只需使用数据调用回调即可。请注意，IE 8和更少允许仅将字符串传递给其他窗口的功能，并且共享窗口可能会被破坏。

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

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

注意

1. 在上述实现中，信令是广播，因此数据应指示目标。我使用了target属性，p用于父级，c用于子级。
2. 我使用了其他变量来共享套接字：打开 - 共享套接字是否打开，子项 - 共享者列表。代码和注释将帮助您了解详细信息。

我希望我的回答很有帮助。

Answer 2

在某些情况下，我使用localStorage对象进行选项卡之间的通信。 localStorage对象有一个事件系统，用于告知某些数据已更改的同一源的另一个选项卡或窗口（http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows-using-localstorage/）。这个想法是，让带有套接字的选项卡将时间戳和接收的数据写入localstorage。如果时间戳太旧 - 可能是因为带有套接字的选项卡已关闭 - 另一个选项卡可以启动套接字连接并更新数据和时间戳。

Answer 3

我使用localStorage作为共享通信通道，以便使用与EventEmitters相同的接口在选项卡之间发送数据。与领导者选举算法相结合，决定哪个选项卡将是连接到服务器的选项卡，我将所有套接字事件从所有关注者选项卡中继到领导者选项卡，反之亦然。最后，leader选项卡将所有事件转发到服务器，并将所有收到的事件广播到所有其他客户端。这是代码：

• https://github.com/majestic3/athena-online-judge/blob/master/source/client/core/itc.js
• https://github.com/majestic3/athena-online-judge/blob/master/source/client/core/socket.js

Answer 4

远非理想，但您可以使用闪存本地连接来设置一个websocket连接，然后在选项卡和多个浏览器之间共享它。

有关详细信息，请参阅http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/LocalConnection.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6。

Answer 5

截至2016年的答案必须为Shared Web Workers，如本博客所述：

https://blog.pusher.com/reduce-websocket-connections-with-shared-workers/

Answer 6

不要认为现在实现socket.io的方式似乎有解决方案。在this视频，第五部分查看Guillermo Rauch。他也认为这是一个挑战。

Answer 7

我还在为这个设计理论化，我正准备开始建设。但是，我正在考虑合并

-WebSockets - 本地存储 和 -Cross Window Messaging

我的理论是在javascript中创建一个套接字引擎，它在每个标签中的每个页面加载上运行，但如果已经建立了连接，它将关闭。

首次访问该网站时，我会让它制作一个GUID并将其存储在本地存储中，此guid将唯一标识用户浏览器/登录到他们的PC。

当套接字服务器接受连接时，它将具有该guid，并且该guid的任何新请求将返回＆＃34; 999连接已经建立＆＃34;或类似的东西。

一旦运行，它将使用跨窗口消息传递对其他选项卡进行播种，方法是将我想要共享的数据转换为JSON blob，然后在其他选项卡中将其转换回对象。因此无论哪个选项卡获得连接，都将使用套接字服务器处理所有传入/传出消息。然后它将通过跨窗口消息传递与其他选项卡一起接收/传输。理论上，这也适用于Iframe和Popup窗口。

整个系统将为我们正在构建的CRM系统以及实时聊天系统和票据板驱动已加载表单上的自动数据刷新。

我梦想的情况是，如果用户A正在盯着Ticket 1000并且用户B更新了票证1000，我希望用户A票据刷新，如果用户A在刷新之前进行了更改，我想给他们一个数据迁移弹出以防止用户B改变

- 用户B在编辑此记录时进行了相互冲突的更改 ＆＃34; UserB：FirstName - ＆gt;鲍勃＆＃34; [采取] ＆＃34; UserA：FirstName - ＆gt;罗伯特＆＃34; [保持]

Answer 8

请参阅https://github.com/nodeca/tabex

您需要额外的图层才能进行交叉标记通信。 Tabex有Faye使用的例子。其他websocket传输（socket.io等）也可以类似的方式使用。

Answer 9

实际上，很难避免其中的一些问题，例如：在网络不稳定的情况下断开连接。毕竟，页面最初的目的是交换不同的文本文档（例如RFC文档），只需要很短的时间即可，低成本且不稳定的传输方式（我认为建立HTTP协议的最初目的是

当然，要解决该问题，我建议您像上面所说的那样使用共享工作程序或将共享和公共部分的信息与LocalStorage

一起存储

这里是LocalStorage

的基本用法介绍的链接。

希望它真的可以希望你！（实际上还没有）