How can I detect if the user is currently active on the page?

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?

Ifvisible.js is a crossbrowser lightweight solution that does just that. It can detect when the user switches to another tab and back to the current tab. It can also detect when the user goes idle and becomes active again. It's pretty flexible.

I just recently did something like this, albeit using Prototype instead of JQuery, but I imagine the implementation would be roughly the same as long as JQuery supports custom events.

In a nutshell, IdleMonitor is a class that observes mouse and keyboard events (adjust accordingly for your needs). Every 30 seconds it resets the timer and broadcasts an state:idle event, unless it gets a mouse/key event, in which case it broadcasts a state:active event.

var IdleMonitor = Class.create({

    debug: false,
    idleInterval: 30000, // idle interval, in milliseconds
    active: null,
    initialize: function() {
        document.observe("mousemove", this.sendActiveSignal.bind(this));
        document.observe("keypress", this.sendActiveSignal.bind(this));
        this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
    },

    // use this to override the default idleInterval
    useInterval: function(ii) {
        this.idleInterval = ii;
        clearTimeout(this.timer);
        this.timer = setTimeout(this.sendIdleSignal.bind(this), ii);
    },

    sendIdleSignal: function(args) {
        // console.log("state:idle");
        document.fire('state:idle');
        this.active = false;
        clearTimeout(this.timer);
    },

    sendActiveSignal: function() {
        if(!this.active){
            // console.log("state:active");
            document.fire('state:active');
            this.active = true;
            this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
        }
    }
});

Then I just created another class that has the following somewhere in it:

Event.observe(document, 'state:idle', your-on-idle-functionality);
Event.observe(document, 'state:active', your-on-active-functionality)

Ifvisible is a nice JS lib to check user inactivity.

ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds

ifvisible.on("idle", function(){
   // do something
});

Using jQuery, you can easily watch mouse movement, and use it to set a variable indicating activity to true, then using vanilla javascript, you can check this variable every 30 minutes (or any other interval) to see if its true. If it's false, run your function or whatever. Look up setTimeout and setInterval for doing the timing. You'll also probably have to run a function every minute or so to reset the variable to false.

Here my shot:

var lastActivityDateTime = null;

function checkActivity( )
{
    var currentTime = new Date();
    var diff = (lastActivityDateTime.getTime( ) - currentTime.getTime( ));
    if ( diff >= 30*60*1000)
    {
        //user wasn't active;
        ...
    }
    setTimeout( 30*60*1000-diff, checkActivity);
}

setTimeout( 30*60*1000, checkActivity); // for first time we setup for 30 min.


// for each event define handler and inside update global timer
$( "body").live( "event_you_want_to_track", handler);

function handler()
{
   lastActivityDateTime = new Date();
   // rest of your code if needed.
}

If it's a security issue, doing this clientside with javascript is absolutely the wrong end of the pipe to be performing this check. The user could easily have javascript disabled: what does your application do then? What if the user closes their browser before the timeout. do they ever get logged out?

Most serverside frameworks have some kind of session timeout setting for logins. Just use that and save yourself the engineering work.

You can't rely on the assumption that people cannot log in without javascript, therefore the user has javascript. Such an assumption is no deterrent to any determined, or even modestly educated attacker.

Using javascript for this is like a security guard handing customers the key to the bank vault. The only way it works is on faith.

Please believe me when I say that using javascript in this way (and requiring javascript for logins!!) is an incredibly thick skulled way to engineer any kind of web app.

Without using JS, a simpler (and safer) way would simply be to have a lastActivity timestamp stored with the user's session and checking it on page load. Assuming you are using PHP (you can easily redo this code for another platform):

if(($_SESSION['lastAct'] + 1800) < time()) {
    unset($_SESSION);
    session_destroy();
    header('Location: session_timeout_message.php');
    exit;
}

$_SESSION['lastAct'] = time();

and add this in your page (optional, the user will be logged out regardless of if the page is refreshed or not (as he logs out on next page log)).

<meta http-equiv="refresh" content="1801;" /> 

You can add and remove classes to the document depending on the user active status.

// If the window is focused, a mouse wheel or touchmove event is detected
$(window).on('focus wheel touchmove', function() {
  $( 'html' ).addClass('active').removeClass('inactive');
});

// If the window losses focus
$(window).on('blur', function() {
  $( 'html' ).addClass('inactive').removeClass('active');
});

After that, you can check every while if the html has the "active" class and send an AJAX request to check the session status and perform the action you need:

setInterval( function() {
  if ( $( 'html' ).hasClass('active') ) {
  //Send ajax request to check the session
    $.ajax({
      //your parameters here
    });
  }
}, 60000 ); /* loops every minute */

If your concern is the lost of information for the user after a login timeout; another option would be to simply store all the posted information upon the opening of a new session (a new session will always be started when the older session has been closed/scrapped by the server) when the request to a page is made before re-routing to the logging page. If the user successfully login, then you can use this saved information to return the user back to where he was. This way, even if the user walk away a few hours, he can always return back to where he was after a successful login; without losing any information.

This require more work by the programmer but it's a great feature totally appreciated by the users. They especially appreciate the fact that they can fully concentrate about what they have to do without stressing out about potentially losing their information every 30 minutes or so.

A global inactivity timer is set in the master page to monitor user engagement. The timer is configured to trigger every 20 minutes of inactivity. When user activity is detected, such as mouse movement, keypress, or interaction the existing timeout is cleared and a new one is started, effectively resetting the inactivity countdown.

The HandleInactivity function can be customized to perform actions such as extending the session, showing a warning, or initiating a logout.

var _inactivityTimeout;
var _inactivityDuration = 20 * 60 * 1000; // 20 minutes timer

function ResetInactivityTimer() {
    clearTimeout(_inactivityTimeout);
    _inactivityTimeout = setTimeout(HandleInactivity, _inactivityDuration);
}

function HandleInactivity() {
    //// This function will be called after 20 minutes of inactivity
    alert("You have been inactive for 20 mins");
    //your logic to handle inactivity, like logging out the user or showing a warning
}

// Bind events to reset the timer on user activity
$(document).on('mousemove keydown scroll click touchstart', function () {
    ResetInactivityTimer();
});

One important caveat is handling scenarios where certain functions or loops run for more than 20 minutes without direct user interaction. These cases must be treated separately to avoid false positives for inactivity.

This can be achieved in two different ways:

1. Loop-Aware Activity Flagging

   Introduce a hidden <input> element (or similar DOM marker) with a specific class name (e.g., .long-process-flag).

   During long-running loops or iterations, update or monitor this element to signal that the browser is actively processing, even if the user is idle.

   The inactivity handler should check for the presence or state of this marker before triggering any inactivity-related actions (e.g., session timeout warnings).

   
   function HandleInactivity() {
     const isLongProcessActive = document.querySelector('.long-process-flag')?.value === 'active';
     if (isLongProcessActive) return; // Skip inactivity handling
     // Proceed with warning/logout/session extension
   }
   
   

2. Distributed Invocation of ResetInactivityTimer

   Make the ResetInactivityTimer function globally accessible across all child pages or modules.

   Within each long-running loop or process, periodically invoke ResetInactivityTimer to reset the inactivity timer manually.

   This ensures that the session remains active as long as the system is performing meaningful work, even without user input.

   for (let i = 0; i < largeDataSet.length; i++) {
     processItem(largeDataSet[i]);
     if (i % 1000 === 0) {
       window.ResetInactivityTimer(); // Reset timer manually
     }
   }