How can I detect with JavaScript/jQuery if the user is currently active on the page?

Question

I am needing to detect when a user is inactive (not clicking or typing) on the current page for more than 30 minutes.

I thinking it might be best to use event blubbling attached to the body tag and then just keep resetting a timer for 30 minutes, but I'm not exactly sure how to create this.

I have jQuery available, although I'm not sure how much of this will actually use jQuery.

Edit: I'm more needing to know if they are actively using the site, therefore clicking (changing fields or position within a field or selecting checkboxes/radios) or typing (in an input, textarea, etc). If they are in another tab or using another program, then my assumption is they are not using the site and therefore should be logged out (for security reasons).

Edit #2: So everyone is clear, this is not at all for determining if the user is logged in, authenticated or anything. Right now the server will log the user out if they don't make a page request within 30 minutes. This functionality to prevent the times when someone spends >30 minutes filling in a form and then submitting the form only to find out that they haven't been logged out. Therefore, this will be used in combination with the server site to determine if the user is inactive (not clicking or typing). Basically, the deal is that after 25 minutes of idle, they will be presented with a dialog to enter their password. If they don't within 5 minutes, the system automatically logs them out as well as the server's session is logged out (next time a page is accessed, as with most sites).

The Javascript is only used as a warning to user. If JavaScript is disabled, then they won't get the warning and (along with most of the site not working) they will be logged out next time they request a new page.

Answer 1

This is what I've come up with. It seems to work in most browsers, but I want to be sure it will work everywhere, all the time:

var timeoutTime = 1800000; var timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime); $(document).ready(function() {     $('body').bind('mousedown keydown', function(event) {         clearTimeout(timeoutTimer);         timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime);     }); }); 

Anyone see any problems?

Answer 2

You can watch mouse movement, but that's about the best you're going to get for indication of a user still being there without listening to the click event. But there is no way for javascript to tell if it is the active tab or if the browser is even open. (well, you could get the width and height of the browser and that'd tell you if it was minimized)