SetInterval() and load() functions and traffic problems

Question

So guys.. I know the code below is pretty unnecessary, but I just need to know one thing, actually an answer...

The code below on my website serves to keep doing refresh an update icon where the number of notifications is displayed if a friendly user likes or comments something from you, such as Facebook. But I believe that each refresh this opening another door, because in the statistics of website shows that this having 1900000 views per day which ends up increasing the traffic of website stopping the server.

So the question: this setInterval() with a load() searching in the archive refresh_notif.php each refresh in half-second time '1000', it is bad for the website?

var auto_refresh = setInterval(
  function () {
    var urlLikes = $("#url_s").val();
    $('#4sNotificationsJewel').load(urlLikes +'/refresh_notif.php?user=<?php print $user_id; ?>').fadeIn("slow");
}, 1000);

Answer 1

You can use Server-Sent Events instead of pooling...

Client-side:

var evtSource = new EventSource("ssedemo.php");

//Once you've instantiated your event source, you can begin listening for messages
evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");

  newElement.innerHTML = "message: " + e.data;
  eventList.appendChild(newElement);
}

//You can also listen for events, using addEventListener()
evtSource.addEventListener("ping", function(e) {
  var newElement = document.createElement("li");

  var obj = JSON.parse(e.data);
  newElement.innerHTML = "ping at " + obj.time;
  eventList.appendChild(newElement);
}, false);

Server-side:

<?php

date_default_timezone_set("America/New_York");
header("Content-Type: text/event-stream\n\n");

$counter = rand(1, 10);
while (1) {
  // Every second, sent a "ping" event.

  echo "event: ping\n";
  $curDate = date(DATE_ISO8601);
  echo 'data: {"time": "' . $curDate . '"}';
  echo "\n\n";

  // Send a simple message at random intervals.

  $counter--;

  if (!$counter) {
    echo 'data: This is a message at time ' . $curDate . "\n\n";
    $counter = rand(1, 10);
  }

  ob_flush();
  flush();
  sleep(1);
}

Browser Support:

Chrome: 9

Firefox: 6.0

Internet Explorer: Nops

Opera: 11

Safari: 5

Polyfills (Supports IE8+)

Answer 2

Obviously the longer this interval, the better to reduce server traffic. You can do something like switch to setTimeout and increase the interval whenever you search for notifications and nay find nothing; something like

var currentInterval = 1000;

function handleRefresh() {
    /* puxa o dado... */
    if (alguma_novidade) {
        currentInterval = 1000;
    } else {
        currentInterval = Math.min(currentInterval + 1000, 60 * 1000);
    }
    setTimeout(handleRefresh, currentInterval);
}

The maximum limit between notification queries and the "acceleration" with which you increase the range depends on the tradeoff between reducing server load, improving user experience and how statistical distribution is between notifications that arrive on your system.

(I think you can do something with Websockets and stuff to make the server push customer notifications, but I don’t know how to do that; the above solution relieves you in the interim.)