Sharing websocket across browser tabs?

Question

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

Answer 1

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.

Check releated issue at https://github.com/flowersinthesand/portal/issues/21

Leaving a cookie

1. Set cookie to inform there is a shared socket.
2. When socket closes, remove that cookie to inform there is no shared socket.

See, https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L629-650

Sharing and using shared socket

1. Using the storage event and localStorage - The localStorage fires the storage event when a value is set and removed.
   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

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

Using shared: https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L851-893

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. 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.

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

Using shared: https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L894-929

Note

1. In the above implementation, signalling is broadcasting, so the data should indicate the target. I used target property, p for parent and c for child.
2. I used additional variables to share socket: opened - whether the shared socket is open, children - list of sharer. Codes and comments will help you understand details.

I hope my answer was helpful.

Answer 2

The answer as of 2016 must be Shared Web Workers as described in this Blog:

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

Answer 3

Far from ideal, but you can use a flash local connection to setup one websocket connection and then share it across tabs and multiple browsers.

See 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 for more information.