Multiple tab issue with Signal R

Yasser Shaikh
Mar 23, 2017 · 2 min read

So, in the last project I worked in my previous company, We had developed an internal web portal using ASP.NET MVC and SQL, . We leveraged Signal R to send realtime messages and notifications to the users. However there was this one unusual issue which people begun to notice — It wont load until you close one of the already opened tabs. This over the time became very embarrassing and we decided to look for a fix.

After reading a little bit about this issue on the internet, found some interesting concepts. Sharing them below

Browsers have a maximum number of concurrent connections, usually around 6. After opening 6 or more tabs in the browser, all pointing to the same site, subsequent tabs would simply refuse to load.Source

So, all in all we found there are 2 ways in which this issue should be addressed. One of them is more like a quick fix, while the other one is the correct but time-consuming approach.

There are plenty of ways one can find when a tab is active or inactive. Using these events one can start/stop a connection. When the tab is not in focus, we killed off the connection of that tab, and when the user is back on that tab, we again reconnect to the hub.

window.addEventListener('focus', function() {
signalRHub.connect();
});
window.addEventListener('blur', function () {
signalRHub.disconnect();
});

In this approach you will need only a single Signal R connection open, thereby preventing the multiple connection problem. Here localstorage can act like a message bus between the tabs, the storage event helps in broadcasting data between the tabs.

The concept is fairly simple. Only one tab keeps a push connection; we call this the master tab. When it receives a push event, it broadcasts it by setting the event as a property on local storage called "broadcast". When a tab receives the storage event for this key, it reads the JSON-encoded event object from local storage and processes it as though it had been received via an EventSource object. - Source


1. https://github.com/SignalR/SignalR/issues/2744
2. https://blog.fastmail.com/2012/11/26/inter-tab-communication-using-local-storage/

Hope this helps :)

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

    Yasser Shaikh

    Written by

    Yasser Shaikh's blog

    It's supposed to be automatic, but actually you have to push this button.