Creating a simple AJAX Keepalive

Like many things on the web, our AJAX Image Viewer and Thumbnail Viewer both depend on sessions to keep track of a given user's state. Unfortunately, sessions timeout. The default timeout is 30 minutes in most IIS installations. If your user walks away from their machine for an extended period of time with their browser window still opened to your page, they will come back to see that your site refuses to work as expected for a reason they care little about... session death. This blog will explain how to develop a simple yet robust way to keep a session alive for this very such situation.

The Basic Concept

In the most simple terms, we need to talk to the server every so often to let it know that we're still around and are interested in keeping our session alive. There are many ways to do that, but what we'll do here is just request a file every 15 minutes or so. You will need to update that time depending on your server's configuration, but in almost every case, 15 minutes should do just fine.

Pick a File any File

To keep bandwidth usage low, we should be careful to choose a file that is very small. I like to use a simple blank GIF that measures 1px by 1px. We tend to use this file in a lot of projects for multiple different reasons so in almost every case, it will already be somewhere on my site.

   1:  var keepAliveImage = null;

   2:  function KeepAlive(){

   3:      if(!keepAliveImage)

   4:      {

   5:          keepAliveImage = document.createElement("img");

   6:          keepAliveImage.setAttribute("src", rPath + "spacer.gif");

   7:          keepAliveImage.style.position = "absolute";

   8:          keepAliveImage.style.height = "1px";

   9:          keepAliveImage.style.width = "1px";

  10:          document.appendChild(keepAliveImage);

  11:      }

  12:      else

  13:      {

  14:          keepAliveImage.src = rPath + "spacer.gif;

  15:      }

  16:  }

But Wont it be Cached?

Why yes... well it would.. but we can fix that too. We need to prevent the browser from trying to reuse the same file over and over again. If it kept using the same local copy of the file, no request would be made to the server and all of our good efforts would be lost.

We can do this by appending a query string to the end of our src tag pointing to our GIF. It would look something like this:

  11:  ...

  12:      else

  13:      {

  14:          var rand = someRandomValue;

  15:          keepAliveImage.src = rPath + "spacer.gif?d=" + rand;

  16:      }

  17:  }

To achieve this, we need a random number generator. What would be even better than a random number, is a number that you could guarantee would always be different than the one before. Time tends to be something that won't repeat itself. Javascript has a date object ready for the task.

  11:  ...

  12:      else

  13:      {

  14:          var d = new Date();

  15:          var rand = d.getTime();

  16:          keepAliveImage.src = rPath + "spacer.gif?d=" + rand;

  17:      }

  18:  }

So by appending this query string to your image request, you will always be making a request to your server and not just be tricked by your browser into thinking you are.

Put it all Together

This script can be added to any page to make it keep your session alive without wasting bandwidth.

   1:  var keepAliveImage = null;

   2:  function KeepAlive(){

   3:      if(!keepAliveImage)

   4:      {

   5:          keepAliveImage = document.createElement("img");

   6:          keepAliveImage.setAttribute("src", rPath + "spacer.gif");

   7:          keepAliveImage.style.position = "absolute";

   8:          keepAliveImage.style.height = "1px";

   9:          keepAliveImage.style.width = "1px";

  10:          document.appendChild(keepAliveImage);

  11:      }

  12:      else

  13:      {

  14:          var d = new Date();

  15:          var rand = d.getTime();

  16:          keepAliveImage.src = rPath + "spacer.gif?d=" + rand;

  17:      }

  18:  }

  19:  setInterval('KeepAlive();', '900000');