Ajax Polling shared between tabs

Question

First of all I need to inform the current situation.

I own a website, there is an ajax Polling, which requests every 5 seconds to get notifications and the like.

The entire site is supported by two servers, one for NGINX and one for Mysql. However, it is mainly due to the "loop de requisições" the server easily reaches 500 to 1500 requests per second. Number that for me is extremely high. The maximum number of connections with Mysql opened simultaneously is 50, which for me was somewhat impressive, although the limit is much higher than that. Remember that static content (CSS, JS, IMG) is cached by external CDN, so this number of requests DO NOT include such files, I have already monitored this as well! The average response time is 200ms up to 800ms, the average being 700ms, according to New Relic.

The problem is most often the problem is that the user opens several tabs, including me. I confirmed this when including in the logs the time of each user.

This way, a same user can make instead of 1 request every 5 seconds, make 5 or 20 requests every 5 seconds, simply because each tab will "duplicate" the amount of requests.

This not only increases the requests but also causes the tabs to be out of sync, as each tab has "your time" to update, one may have updated while the other may not.

I wanted to know if there is any way to share the information received from AN AJAX between open tabs, so that only one request would be able to meet all open windows. In the same way that only one window would be responsible for updating all content, resulting in only one request every 5 seconds, instead of each tab making requests every 5 seconds.

Thought-out solution...

A request saves in a "persistent" way the changes, including the time that the last query was performed (or defined by some expiration date). When another tab is executed it will check first if the last query was performed another 5 seconds ago. If not, it would take the data that has already been defined by the ajax of another tab, which have been saved, which are updated.

I thought of using the Cookie for this, but I do not know if the cookie is able to be accessed in another tab when defined by another, without the need to refresh the page, I believe not. In addition the Cookie will add one more data to send to each request, some unnecessary bytes.

At this very moment I’m seeing the store js., maybe above the need, because I believe it is accessible by another tab without updating the page.

Is there any more efficient way to do this "ajax sharing" between tabs?

That would be a temporary measure. I’m thinking of using Websockets for this, using Ably.io or Pusher, however I don’t know how efficient it would be, since PHP would only run a Curl to send the notifications.

Answer 1

Pause requests on inactive tab

You can simply pause AJAX requests by realizing that the tab is no longer active.

For this you will have to use Page Visibility API (most available of current browsers).

Take advantage of its function that runs every 5 seconds, and check if the tab is visible, otherwise change a variable to prevent future requests, but let the function continue running forever to check if the page visibility has changed.

Example working here:

var timer = 0;
var period = 5000;
var visible = true; 

function onLoad() {
		timer = setInterval(checkLog, period);
		if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
}

function visibilityChanged() {
		visible = (document.hidden)? false : true;
     document.getElementById("log").innerHTML += '<p>Visibilidade mudou: '+document.hidden+'</p>';
}

function checkLog() { 
		document.getElementById("log").innerHTML += '<p class="'+visible+'">'+new Date()+'</p>';
}

onLoad();
checkLog();

p{color:#fff;font-family:arial;padding:3px;background-color:blue}
.true{background-color:green;}
.false{background-color:red;}

<div id="log">

</div>

Fiddle: https://jsfiddle.net/brunogc/75do1wde/2/

Communication between the tabs

In theory, your solution with Cookie should work, although using localStorage in this case would be more appropriate (due to its larger size). In both cases they can be accessed regardless of which tab created.

However, you would have to create a complex logic to control the tab that makes the request and still implement the synchronization of the data between them.