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

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

I used the localStorage object for communication between tabs in some occasions. The localStorage object has an event system to tell another tab or window of the same origin that some data has changed ( http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows-using-localstorage/ ). The idea is, to let the tab with the socket write a timestamp and the received data into the localstorage. If the timestamp gets too old - maybe because the tab with the socket has been closed - another tab can start a socket-connection and update the data and timestamp.