Ajax Polling shared between tabs

Question

Ajax Polling shared between tabs

Navigation

#1 by (1 votes)

2

First of all, I need to inform the current situation.

I have a website, there is a polling ajax, which makes requests every 5 seconds for notifications and the like.

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

The problem is most of the time the problem is in the user opening multiple tabs, including me. I confirmed this when I included in the logs the time of each user.

In this way, the same user can do instead of 1 request every 5 seconds, make 5 or 20 requests every 5 seconds, simply because each tab will "double" the number of requests.

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

I wanted to know if there is any way to share information received from AJAX between open tabs, so that only one request would be able to handle 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.

Thoughtful solution ...

A request "persistently" saves the changes, including the time the last query was made (or defined by some validity). When another tab is executed you will check first if the last query was performed another 5 seconds ago. If not, it would get the data that has already been set by the ajax of another tab, which have been saved, which are updated.

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

In this EXACT time, I'm looking at the store.js , maybe I need it, because I believe it is accessible by another tab without refreshing the page.

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

This would be a temporary measure. I'm thinking of using WebSockets for this, using Ably.io or Pusher, though I do not know how efficient it would be, since PHP would just run a Curl to send the notifications.

javascript jquery ajax

asked by anonymous 01.09.2016 / 15:58

1 answer

How to synchronize two TListViews? Adding information to a file on a specified line

score 1 · Accepted Answer

Pause requests in inactive tab

You can simply pause AJAX requests when you notice that the tab is no longer active.

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

Enjoy your function that runs every 5 seconds, and make sure the tab is visible, otherwise change a variable to prevent future requests, however, let the function continue running to always 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: link

Communication between the tabs

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

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