Peer Review: polling script that works once even across multiple tabs

So I needed to make a quick polling script to check for new emails. The problem is that since I keep multiple tabs open for my site I needed to make sure that the browser would only poll to the server once. I've put together a script that seems to work as desired. When the page is loaded in to two tabs the JavaScript alert() seems to suggest this should work as desired: multiple tabs could be open though only one will actually contact the server. I haven't implemented anything in regards to contacting the server though I put a comment where I would execute the actual polling code.

Save the following as polling.xhtml and then place it in your root localhost directory as this requires localStorage support. I'm not very concerned about compatibility at this moment in time, this is intended as a proof of concept.

polling.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Polling Example</title>
<script type="application/javascript">
//<![CDATA[
var email_tab = 0;

function mail_notifications_poll()
{
 function mail_notifications_poll_settime()
 {
 email_tab = new Date().getTime();
 localStorage.setItem('email_tab',JSON.stringify(new Array(new Date().getTime(),new Date().getTime())));
 }

 if (localStorage==undefined) {alert('Error: email notifications are not supported in your browser.');}
 else if (localStorage.getItem('email_tab'))
 {//alert('other tabs are open, email polling may already be occurring.');
 //alert(localStorage.getItem('email_tab'));
 var a = JSON.parse(localStorage.getItem('email_tab'));

 if (email_tab===a[0])
 {alert('THIS is the tab polling for new emails! UPDATE a[1] and set it!');
 //Poll server here!
 mail_notifications_poll_settime();
 }
 else
 {//alert('This is NOT the tab polling for new emails.\n\nWe **ARE** going to see if the tab that should be checking has expired!');
 if (a[1]+20000<new Date().getTime())
 {alert('old tab not updating, this tab takes over');
 mail_notifications_poll_settime();
 }
 else {alert('The tab polling is still keeping up to date, keep checking any way every 15 seconds.');}
 }
 }
 else
 {//alert('no tabs open, set email tab hash!');
 mail_notifications_poll_settime();
 }

 setTimeout(mail_notifications_poll,15000);
}


window.onbeforeunload = function()
{
 if (localStorage && localStorage.getItem('email_tab'))
 {
 var a = JSON.parse(localStorage.getItem('email_tab'));

 if (email_tab===a[0]) {delete localStorage['email_tab'];}
 }
}


window.onload = function()
{
 mail_notifications_poll();
}
//]]>
</script>
</head>

<body>

<h1>Polling Demo</h1>

<p>Open this on a domain such as <a href="http://localhost/polling.xhtml">http://localhost/polling.xhtml</a> in multiple tabs for testing please.</p>

<p>Polling occurs once every fifteen seconds.</p>

</body>
</html>


var tab_id = new Date().getTime();

function mail_notifications_poll() {
  
  var email_tab = localStorage.getItem('email_tab'),
    POLL_INTERVAL = 15000;

  function mail_notifications_poll_settime() {
    localStorage.setItem('email_tab', 
      JSON.stringify({
        id: tab_id, 
        timestamp: new Date().getTime()
      })
    );
    console.log(localStorage.getItem('email_tab'));
  }

  function poll_server() {
    console.log("Polling server...");
    // To be implemented
    mail_notifications_poll_settime();
  }
  
  if (email_tab) {
    email_tab = JSON.parse(email_tab);

    if (tab_id === email_tab.id) {
      console.log('THIS tab (id: ' + tab_id + ') is the tab polling for new emails.');
      poll_server();
    }
    else {
      console.log('This tab (id: ' + tab_id + ') is NOT the tab polling for new emails.');
      console.log('Checking if the tab that should be polling has expired...');
      if (email_tab.timestamp + POLL_INTERVAL + 5000 < new Date().getTime()) {
        console.log('The old tab (id: ' + email_tab.id + ') is not updating, this tab is taking over.');
        poll_server();
      }
      else {
        console.log('The old tab (id: ' + email_tab.id + ') is still updating.');
      }
    }
  }
  else {
    console.log('No tabs are polling yet, so this tab will do it.');
    poll_server();
  }

  setTimeout(mail_notifications_poll, POLL_INTERVAL);
}

window.onbeforeunload = function() {
  if (localStorage && localStorage.getItem('email_tab')) {
    var email_tab = localStorage.getItem('email_tab');

    if (tab_id === email_tab.id) {
      delete localStorage['email_tab'];
    }
  }
}

window.onload = function() {
  if (localStorage == undefined) {
    alert('Error: email notifications are not supported in your browser.');
    // No point going any further
    return;
  }
  mail_notifications_poll();
}

Peer Review: polling script that works once even across multiple tabs

A full XHTML file to test, looking for suggestions for improvements.

JAB Creations

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week