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

I'm still theorizing on this for a design I'm getting ready to start building. But, I'm thinking of combining

-WebSockets -Local Storage and -Cross Window Messaging

My theory is to create a socket engine in javascript that runs on every page load in every tab, but will shut down if one already has an established connection.

On first hit to the site, I'll have it make a GUID and store it in local storage, this guid will uniquely identify that users browser/login to their PC.

When the socket server accepts a connection it will have that guid, and any new request by that guid will return "999 Connection Already Established" or something like that.

Once one is running, It will seed the other tabs with cross window messaging by converting the data I want to share accross tabs to a JSON blob and then converting that back to an object when received in other tabs. So whichever tab get's the connection, will be handling all incoming/outgoing messages with the socket server. Then it will receive/transmit with the other tabs over cross window messaging. And in theory this should work with Iframe's and Popup windows as well.

This whole system will drive automatic data refreshes on loaded forms for a CRM like system we are building and a live chat system and ticket board.

My dream scenario, is if User A is staring at Ticket 1000 and User B updates ticket 1000 I want user A's ticket to refresh, and if user A made changes before it refreshed I want to give them a data migration pop up to prevent blowing away User B's changed

--User B Made a Conflicting Change while you are editing this record "UserB: FirstName -> Bob" [Take] "UserA: FirstName -> Robert" [Keep]

Answer 2

I am using localStorage as a shared communication channel in order to send data between tabs using an interface identical to EventEmitters. Coupled with a leader election algorithm that decides which tab will be the one connected to the server, I relay all socket events to the leader tab from all follower tabs and vice versa. And finally, the leader tab forwards all events to the server, and broadcasts all received events to all other clients. Here's the code:

• https://github.com/majestic3/athena-online-judge/blob/master/source/client/core/itc.js
• https://github.com/majestic3/athena-online-judge/blob/master/source/client/core/socket.js

Answer 3

See https://github.com/nodeca/tabex

You need additional layer for cross-tab communication. Tabex has example for Faye use. Other websocket transports (socket.io and so on) can be used in similar way.

Answer 4

Actually,It's hard to avoid some of these problems, eg: Disconnect while the network is not stable.After all, pages are aim to exchange different text documents(such as the RFC documents) initially, which just needs a short ,low-cost and unstable transfer approach(the initial purpose of setting up HTTP protocol as I think)

Of course, to solve it, I suggest u to use the shared worker like the saying above or store the information of the shared and public part with the LocalStorage

Here is the link to the basic usage introduction of LocalStorage

hope it can really hope u!(Actually not yet)

Answer 5

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.

Answer 6

Don't think there seems to be a solution the way socket.io is implemented now. Check out Guillermo Rauch in thisvideo, fifth segment. He too considers it a challenge.