在浏览器选项卡上共享websocket?

我们希望每个浏览器都有一个套接字,而不是浏览器中的每个标签。 我们怎样才能实现呢? 我读到了有前途的共享networking工作者。 对此的参考也是赞赏。 不幸的是,据我所知,共享的networking工作人员还没有被mozilla或者internet explorer实施。 那么在这种情况下该怎么办? 我们正在研究服务器端的node.js。

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

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

留下一个cookie

  1. 设置cookie通知有一个共享套接字。
  2. 当套接字closures时,移除该cookie以通知没有共享套接字。

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

共享和使用共享套接字

  1. 使用存储事件和localStorage – localStorage在设置和删除值时触发存储事件。
    1. 检查是否支持StorageEvent和localStorage。
    2. 添加按键过滤事件的存储事件处理程序。 我使用套接字的url作为关键
    3. 添加删除存储属性的套接字closures事件
    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. 获取或创build名称属性为关键字的iframe。 我使用了socket的url,但是请注意,IE不允许在iframe标签的name属性中使用非单词字符。
    3. iframe的contentWindow是一个共享的窗口引用。 设置callbackvariables来存储每个窗口的侦听器。
    4. 要发信号,只需使用数据调用callback。 请注意,IE 8和更less的只允许传递string到其他窗口的function,共享窗口可能会被删除。

分享: 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. 在上面的实现中,信令是广播,所以数据应该指示目标。 我用目标属性,P为父,C为孩子。
  2. 我用额外的variables来共享套接字:打开 – 共享套接字是否打开,子 – 共享者列表。 代码和评论将帮助您了解详细信息。

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

在某些情况下,我使用localStorage对象在选项卡之间进行通信。 localStorage对象有一个事件系统来告诉另一个相同来源的标签或窗口,一些数据已经改变( http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows-using-localstorage / )。 这个想法是,让套接字的标签写一个时间戳和接收到的数据到本地存储。 如果时间戳太旧 – 可能是因为套接字的选项卡已closures – 另一个选项卡可以启动套接字连接并更新数据和时间戳。

我使用localStorage作为共享通信通道,以便使用与EventEmitter相同的接口在选项卡之间发送数据。 再加上领导者选举algorithm,决定哪个选项卡是连接到服务器的,我把所有的套接字事件从所有的跟随者选项卡中转移到领导者选项卡,反之亦然。 最后,leader选项卡将所有事件转发到服务器,并将所有收到的事件广播到所有其他客户端。 代码如下:

远非理想,但你可以使用闪光本地连接来build立一个websocket连接,然后在标签和多个浏览器中共享。

有关更多信息,请参阅http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/net/LocalConnection.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6

Lightstreamer( http://www.lightstreamer.com )已经可以在HTTP Streaming(Comet)的多个选项卡上共享相同的套接字。 同样的机制将适用于WebSockets,由于几个星期与Lightstreamer Colosseo。 [全面披露:我是Lightstreamer的首席技术官]

在此期间玩一下,看看自动连接共享如何performance。 进入演示页面( http://www.lightstreamer.com/demos.htm )并点击股票列表演示中的“运行”。 运行的演示将打开一个新选项卡。 继续点击“运行”几次,直到您有所需数量的选项卡。 所有的选项卡将共享相同的物理套接字。 只有一个选项卡将包含实际的套接字端点。 您可以通过查看左上方的状态指示灯(绿色指示灯)来识别。 如果它是椭圆形(并且翻转显示“母版页”),那么这是包含共享连接的主选项卡。

现在的魔法……如果你closures主选项卡会发生什么? 那么,其他选项卡将发现,并会做一个elecetionselect一个新的主,这将创build一个新的连接,并恢复状态。 试一试,这很有趣…

2016年的答案必须是本博客中描述的“ 共享Web工作者” :

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

不要以为现在可以用socket.io的方式解决问题了。 看看这个video中的第五部分Guillermo Rauch。 他也认为这是一个挑战。

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

你需要额外的图层进行交叉标签通信。 Tabex有用于Faye的例子。 其他websocket传输(socket.io等)也可以以类似的方式使用。

我仍然在为这个devise准备开始build设。 但是,我正在想结合

-WebSockets本地存储和 – 跨窗口消息

我的理论是在JavaScript中创build一个套接字引擎,每个页面加载的每个选项卡上运行,但如果已经build立连接将closures。

首先打到网站,我将它作出一个GUID,并将其存储在本地存储,此GUID将唯一标识用户浏览器/login到他们的PC。

当套接字服务器接受连接时,它将拥有该GUID,并且该GUID的任何新请求将返回“999已build立连接”或类似的东西。

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

这整个系统将驱动自动数据刷新在客户关系pipe理系统,我们正在build设的系统和实时聊天系统和票务板。

我的梦想场景是,如果用户A盯着票据1000,用户B更新票证1000,我希望用户A的票据刷新,如果用户A在刷新之前做了更改,我想给他们一个数据迁移popup,以防止吹走用户B已更改

– 用户B编辑此logging时发生冲突变化“UserB:FirstName – > Bob”[Take]“UserA:FirstName – > Robert”[Keep]