Multiple tab issue with Signal R

So, in the last project I worked in my previous company, We had developed an internal web portal using ASP.NET MVC and SQL, Signal R for realtime notifications. 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 — After opening X number of tabs, the newest tab does not load. 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.

1. QUICK FIX — Close the connections from the client whenever the tab is not in use, and re-connect when tab is active

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() {
window.addEventListener('blur', function () {

2. Using localstorage as a message bus between the tabs

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

Further reading? 

Hope this helps 🙂