Sharing websocket across browser tabs?

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

###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.
  2. Check that StorageEvent and localStorage are supported.
  3. Add storage event handler which filters event by key. I used socket’s url as key
  4. Add close event of socket which removes storage attributes
  5. To signal, set data with the previous key to storage

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

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

  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.
  2. Every browser supports the window.open method, but some browsers like Chrome prohibit to access the returned window’s properties.
  3. 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.
  4. Iframe’s contentWindow is a shared window reference. Set callbacks variable to store each window’s listener.
  5. 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-L605

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

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.

Leave a Comment