在浏览器选项卡上共享websocket？ [英] Sharing websocket across browser tabs?

问题描述

我们希望每个浏览器都有一个套接字，而不是浏览器中的每个标签。我们如何实现它？我读到了有希望的共享网络工作者。对此的参考也是值得赞赏的。据我所知，不幸的是，共享的网络工作人员还没有通过Mozilla或Internet Explorer实现。那么在这种情况下该怎么办？我们正在服务器端的node.js上工作。

We want to have one socket per browser rather than one per tab in a browser. How can we achieve it? I read about shared web workers which was promising. A reference for that too is appreciated. Unfortunately shared web workers are not yet implemented by mozilla or internet explorer to the best of my knowledge. So what to do in this case ? We are working on node.js on server side.

推荐答案

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

After seeing this question, I've finally implemented sharing socket and added to my library a few days ago. It seems to work in most of browsers including even in IE6, but except Opera. For Opera, you may use regular checking instead of unload event.

检查相关问题 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. Using the storage event and localStorage - The localStorage fires the storage event when a value is set and removed.

1. 检查是否支持StorageEvent和localStorage。


2. 添加按键过滤事件的存储事件处理程序。我使用套接字的URL作为密钥


3. 添加套接字的关闭事件，删除存储属性


4. 要发出信号，请将前一个密钥设置为存储

1. Check that StorageEvent and localStorage are supported.
2. Add storage event handler which filters event by key. I used socket's url as key
3. Add close event of socket which removes storage attributes
4. To signal, set data with the previous key to storage

分享： 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. Using the window.open method - If we know a shared window's name, we can get that window's reference and access its property.

1. 每个浏览器都支持window.open方法，但Chrome等浏览器禁止访问返回窗口的属性。


2. 获取或创建其名称属性为关键字的iframe。我使用了socket的url，但请注意IE不允许在iframe标签的name属性中使用非单词字符。


3. iframe的contentWindow是一个共享窗口引用。设置回调变量来存储每个窗口的侦听器。


4. 要发信号，只需使用数据调用回调。请注意，IE 8及更少允许仅将字符串传递给其他窗口的函数，并且共享窗口可能会被破坏。

1. Every browser supports the window.open method, but some browsers like Chrome prohibit to access the returned window's properties.
2. Get or create iframe whose name attribute is key. I used socket's url, but note that IE doesn't allow to use non-word characters in name attribute of iframe tag.
3. Iframe's contentWindow is a shared window reference. Set callbacks variable to store each window's listener.
4. To signal, simply call callbacks with data. Note that IE 8 and less allow to pass only string to other window's function, and the shared window could be destoryed.

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

使用shared： https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery。 socket.js＃L894-929

1. 在上面的实现中，信令是广播，所以数据应该指示目标。我使用了target属性，p代表parent，c代表child。


2. 我使用其他变量共享套接字：opened - 共享套接字是否打开，children - 共享者列表。代码和评论将帮助您了解详细信息。

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

I hope my answer was helpful.

这篇关于在浏览器选项卡上共享websocket？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！