跨浏览器标签共享websocket？

问题描述 投票：35回答：9

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

javascript html5 node.js websocket web-worker
9个回答
8
投票

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

查看qazxsw poi的相关问题

Leaving a cookie

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

见，https://github.com/flowersinthesand/portal/issues/21

Sharing and using shared socket

  1. 使用存储事件和localStorage - 设置和删除值时，localStorage将触发存储事件。 检查是否支持StorageEvent和localStorage。 添加按键过滤事件的存储事件处理程序。我使用socket的url作为密钥 添加socket的close事件，删除存储属性 要发信号，请使用之前的密钥将数据设置为存储

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

使用shared：https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L531-568

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

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

使用shared：https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L571-605

Note

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

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

6
投票

在某些情况下，我使用localStorage对象在选项卡之间进行通信。 localStorage对象具有一个事件系统，用于告知某些数据已更改的相同源的另一个选项卡或窗口（https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L894-929）。这个想法是，让带有套接字的选项卡将时间戳和接收的数据写入localstorage。如果时间戳太旧 - 可能是因为带有套接字的选项卡已关闭 - 另一个选项卡可以启动套接字连接并更新数据和时间戳。

4
投票

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

3
投票

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

有关更多信息，请参阅https://github.com/majestic3/athena-online-judge/blob/master/source/client/core/socket.js。

3
投票

截至2016年的答案必须是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，如本博客所述：

Shared Web Workers

2
投票

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

-WebSockets -Local Storage和-Cross Window Messaging

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

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

当套接字服务器接受连接时，它将具有该guid，并且该guid的任何新请求将返回“999 Connection Already Established”或类似的东西。

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

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

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

- 用户B在编辑此记录时发生了冲突的更改“UserB：FirstName - > Bob”[Take]“UserA：FirstName - > Robert”[Keep]

1
投票

不要认为现在实现socket.io的方式似乎有解决方案。查看第五部分https://blog.pusher.com/reduce-websocket-connections-with-shared-workers/video的Guillermo Rauch。他也认为这是一个挑战。

1
投票

见this

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

0
投票

实际上，很难避免其中的一些问题，例如：在网络不稳定时断开连接。毕竟，页面的目的是最初交换不同的文本文档（例如RFC文档），这只需要简短，低成本和不稳定的转移方法（我认为建立https://github.com/nodeca/tabex协议的最初目的）

当然，要解决这个问题，我建议你像上面说的那样使用共享工作者，或者用HTTP存储共享和公共部分的信息。

以下是LocalStorage基本用法介绍的链接

希望它真的希望你！（其实还没有）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.