Prodigy Productions, LLC

When working with web applications, one of the most frustrating scenarios a developer is always faced with is “how to deal with session timeouts”. There are plenty of reasons why session timeouts can be annoying, but those are outside the scope of this article. Instead, I want to show you a simple, yet elegant way of handling session timeouts before they even happen. Now, I’m sure you’ve been to websites, probably your bank’s website, where you are presented with a message that alerts you that your session is about to expire and that you either need to do something on the page or be faced with a re-login window. So, I’m gonna take a quick minute to show you how to do the same with your website.

Before we begin, I want to point out that we’re going to write a simple session alert routine using pure Javascript. Although there are plenty of cool javascript frameworks out there that assist with this kind of thing, we’re going to stick to the basics so that we can better understand what those frameworks are doing. Plus, by writing it in plain javascript, we will be able to easily port this code to any web application without the need of a rewrite. So, let’s begin.

First off, you need to create yourself a global variable which will store a setTimeout function. This variable needs to be global as we’ll be calling it from inside a couple of methods throughout the code.

var timeoutId;

Next, you will need to create a function callback which will house the setTimeout function. If you’re not familiar with javascript’s “setTimeout” function, do a quick Google search to get yourself somewhat familiar with it. If you don’t want to search for an explanation, here’s a quick one. setTimeout is basically a mechanism built into javascript that allows you to execute other javascript code at some point in the future. Back to the code.

Inside the function you just created, you will need to create a setTimeout call and assign it to the timeout variable from above. The setTimeout function accepts another function as its first parameter. So, for demo purposes, we will simply create a function that alerts the user that their session has timed out. The second parameter of the setTimeout function is of course the interval at which you want the function to be fired. Since most webservers have a default timeout of 30 minutes, we will set our function to fire at 1800000 milliseconds. (60000 milliseconds * 30 minutes = 1800000 milliseconds). If you want don’t want to wait 30 minutes to test your function, you can set this to a lower number like 120000 (2 minutes). Here is the code for my timeout function.

function setSessionTimeout(){
timeoutId = setTimeout(
function()
{
alert(‘You\’re session has timed out. Please re-login.’);
}, 1800000);
}

Pretty simple, huh? Well, we don’t stop there. Once you have built your timeout function callback, you will need to call the function once the page is loaded. You can do this in the document.onLoad event or somewhere near the bottom of your HTML. To call it, you will pass your timeout callback function to an initial setTimeout method which has the same millisecond time interval as in your timeout callback function.

setTimeout(setSessionTimeout, 1800000);

I’m sure by now you’re probably asking, why in the world did we create a nested method inside of another method which had a method for the setTimeout function? Well, just having a way to notify the user that their session has timed out isn’t very useful if their session really hasn’t timed out. So, we built these nested methods so that we can restart the timer every time the user does something on the page. To do that, we will create a function for the document.onclick event where we will call the built-in “clearTimeout” function and then recall our initial setSessionTimeout function. This will reset our timeoutId variable we built at the beginning of this tutorial every time the user clicks somewhere on the page.

document.onclick = function resetTimeout(){
clearTimeout(timeoutId);
setSessionTimeout();
};

That’s it. You can now test your page. If everything worked correctly, you should see an alert window popup informing you that your session has timed out. The window should appear at whatever time interval you set in your setTimeout parameters. Below is the complete code for this example. Feel free to save the file as an HTML file and open it with your browser. Leave your browser running for 30 minutes (or lower the wait interval in setTimeout) and don’t do anything until the message appears.

Also, keep in mind that this only works if the page is submitting ajax requests back to the server. If the page never submits anything to the server, the server session will expire and all of this code is useless anyways. But, if you’re working in a page that is completely ajax driven like I am, this is a great way to re-display the login window before your users’ sessions timeout.

<html>
<head>
<title>Timeout Test</title>
</head>
<body>

Please wait for 30 minutes without clicking on the screen.

<script type="text/javascript">
var timeoutId;
function setSessionTimeout(){
 timeoutId = setTimeout(                 
      function()
      {              
           alert('You\'re session has timed out. Please re-login.');
      }, 1800000);
}

setTimeout(setSessionTimeout, 1800000);

document.onclick = function resetTimeout(){  
    clearTimeout(timeoutId);
    setSessionTimeout();
};
</script>

</body>
</html>

Related Posts

• ExtJS GUI Designer Eclipse Plugin
• Create Webpage Heatmap Overlays Using Javascript
• Microsoft Kinect Interaction from Javascript (DepthJS)
• Get Netflix New Releases with PHP
• Similarities and Differences between PHP & Ruby