Is there a way to share socket connection between browser tabs

Question

Some people already have asked this questions in some other places, Im just not sure if it exists here. Anyways, Im using Primus.io with engine.io as it's transformer. Im wondering if it's possible to have shared websocket connection on the browser(client). Like if I connected one client and connect another one on the other tab. Ideally they should get same connection that if I send something through the socket both tabs should be able to get the message.

Other's have mentioned about using the localStorage as a way to share/communicate the same data across different tabs, But I just don't find it neat.

Your help is greatly appreciated.

Best,

Answer 1

If the code in your two tabs cooperate, it is possible to share data from webSocket connection in one tab with the other tab. When a tab opens, it would have to find out if any other tab was already open with an existing webSocket connection and it would have to then ask that tab to share its data with the new tab. This is not a trivial operation as browser windows don't have an easy way to find out about other browser windows unless the new window was opened by the prior window's script, not opened by the user.

But, if each of your windows just attempts to make a webSocket connection to the server, they will each get their own webSocket connection. There is no automatic sharing of webSocket connections between tabs.

FYI, the usual behavior here is that each window just gets its own webSocket connection to the server and then the server just separately communicates with each browser window. If some information from one window needs to be kept in sync with the other window, then you can code your server to keep both up-to-date in that way.

Answer 2

Each tab will have a separate connection to the server and has a unique socket id.

If you want to emit a message to every socket for a user id or session id you need to have something to map a user or session to its multiple socket connections.

In Socket.IO, they have a concept of a "room".

On connection you can add the socket to a room. This example uses a passport.js authed username for the grouping.

io.on('connection', function(socket){
  socket.join(socket.request.user.username);
});

Then you can send a message to all sockets for that room.

io.to(username).emit('some event'):

Socket.IO cleans up the room on disconnect for you.

https://github.com/cayasso/engine.io-rooms is an implementation of rooms for engine.io that might be useful.

In simple terms

• On connection, you want to add the new socket to a list of sockets for a user.
• On disconnect, you want to delete the socket from the list of sockets for a user.
  
• On emit, you want to emit a message to all sockets in the list for a user.