Detecting user inactivity over a browser - purely through javascript [duplicate]

In building a monitor, which would monitor any activity on the browser by the user, like click of a button or typing on a textbox (not mouse hovering on document). So if there is no activity from the user for a long time, the session will time out.

We need to do it without jQuery or anything such. I may use ajax. Java servlet in other end is preferable.

Here is pure JavaScript way to track the idle time and when it reach certain limit do some action, you can modify accordingly and use

var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
document.onclick = function() {
    _idleSecondsCounter = 0;
};
document.onmousemove = function() {
    _idleSecondsCounter = 0;
};
document.onkeypress = function() {
    _idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Time expired!");
        document.location.href = "logout.html";
    }
}

This code will wait 60 seconds before showing alert and redirecting, and any action will "reset" the count - mouse click, mouse move or key press.

It should be as cross browser as possible, and straight forward. It also support showing the remaining time, if you add element to your page with ID of SecondsUntilExpire.

Ref: How to know browser idle time?

The problem with the approach you suggest is that the session will time out, even if the user is moving the mouse or typing in an input. So if you have a session timeout set to 20 minutes, and the user keeps typing for 21 minutes, the session will still time out, even though they have been "active". The only thing that will keep the session from timing out is a new request to the server.

Solution 1: Let the server be in control of the session timeout

Unless you are making Ajax-requests in the background, that will keep renewing the session, you could just set a JavaScript-timeout when the page loads, and alert the user that way. Unless you make other requests to the server, while the user is on your page, there is no need to make it difficult:

setTimeout(function () {
   alert("You've timed out baby!");
}, 1200000); // 20 minutes in millisec (modify to your session timeout)

If the user visits another page or reloads the page, the session is renewed and the JavaScript timer is reset. If the user does no such thing, the session will time out at the same time the user gets her alert.

Solution 2: Let the client be in control of the session timeout

If you want the JavaScript to be fully in controll of how long the session lasts, so that it is renewed whenever the user types, moves the mouse or whatever, you will have too keep making Ajax-requests in the background to your server, so the session is renewed. (That could be an empty dummy request, just something that hits the server)

You would then have to track all actions you consider "user activity" (AnhSirk suggest one way in his answer) and reset the timeout timer whenever such an event occur. If the user is inactive for too long, you would then have to make an Ajax-request to a page on the server, that invalidates the session, and then you can alert the user that the session has timed out.