How to check idle time using jQuery and PHP?

Question

I have a script that uses PHP SESSION. I manage PHP sessions using a class. Within this class I have a method that returns how many seconds remaining before the session expires.

Also, Evey time the user refresh the page or open a new page (new request to the server) the idle time counter starts over $_SESSION['MA_IDLE_TIMEOUT'] = time()+900;

What I am looking to do is display a dialog message 2 minutes before the PHP session expire and check if the user is still on the page or not. If the use clicks "Keep working" then the jQuery script will send PHP AJAX request to renew the session $_SESSION['MA_IDLE_TIMEOUT'] = time()+900;. If the user did not click anything or clicked on "Log out" then the session ends and the user is redirected to the login page.

I did find a nice plugin that will somewhat does the Job jquery-idle-timeout

The issue with this plugin is that it checks if the user is idle using JavaScript (if the keyboard/mouse) are being used. Here is the senario where this script does not help me: lets say my PHP sessions has a limit on 15 minutes/ 900 seconds. A user is reading a super long article on the same page. He/she will be scrolling, they are not really idle "from JavaScript perspective" but from a PHP perspective the use is idle. Then after 20 minutes the user refresh the page, then the user will be logged out since he/she have not sent a new request to the PHP server for over the 900 seconds limit.

How can I solve this problem? is there a better plugin to does the trick? if there something I missed in this plugin that will solve my problem?

Thanks

Answer 1

If the user is not making requests, and is not moving the mouse or keyboard or touching the device, etc., then from the app's point of view the user is "idle" even if their eyeballs are not.

If the user is scrolling you can use javascript to listen for scroll events (via onscroll, for example), but this will not be 100% reliable because (1) depends on javascript, and (2) doesn't work if you are viewing a short article or using a tall/large format monitor (like the ones you can rotate 90 degrees, for example).

Perhaps you could handle this differently: use cookies, single sign-on or similar techniques to pre-authenticate or automatically authenticate requests so that the user's session can safely die and be restarted without the user having to manually login.

The other way you could handle this is to maintain a "ping" process that routinely pings the server (via setInterval(), for example) to keep the session alive, and uses a separate timeout (maybe something like the "Authentication timeout" that ASP.NET uses) to keep track of when the "idle" user should be logged out. Then user actions such as scrolling, requesting pages, focusing in fields, moving mouse, etc., can do a "ping reset" that resets the idle counter to 0.

Example / Concept - leaving as exercise for reader to perfect it:

var idleTime = 0; // how long user is idle
var idleTimeout = 1000 * 60 * 20; // logout if user is idle for 20 mins
var pingFrequency = 1000 * 60; // ping every 60 seconds
var warningTime = 1000 * 60 * 2; // warning at 2 mins left
var warningVisible = false; // whether user has been warned
setInterval(SendPing, pingFrequency);
setInterval(IdleCounter, 1000); // fire every second
function IdleCounter() {
    idleTime += 1000; // update idleTime (possible logic flaws here; untested example)
    if (console) console.log("Idle time incremented. Now = " + idleTime.toString());
}

function SendPing() {
    if (idleTime < idleTimeout) {
        // keep pinging
        var pingUrl = "tools/keepSessionAlive.php?idleTime=" + idleTime;
        $.ajax({
            url: pingUrl,
            success: function () {
                if (console) console.log("Ping response received");
            },
            error: function () {
                if (console) console.log("Ping response error");
            }
        });

        // if 2 mins left, could show a warning with "Keep me on" button
        if ((idleTime <= (idleTimeout - (idleTimeout - warningTime))) && !warningVisible) {
            ShowTimeoutWarning();
        }
    } else {
        // user idle too long, kick 'em out!
        if (console) console.log("Idle timeout reached, logging user out..");
        alert("You will be logged off now dude");
        window.location.href = "logoff.aspx"; // redirect to "bye" page that kills session
    }
}

function ShowTimeoutWarning() {
    // use jQuery UI dialog or something fun for the warning
    // when user clicks OK set warningVisible = false, and idleTime = 0
    if (console) console.log("User was warned of impending logoff");
}

function ResetIdleTime() {
    // user did something; reset idle counter
    idleTime = 0;
    if (console) console.log("Idle time reset to 0");
}
$(document) // various events that can reset idle time
.on("mousemove", ResetIdleTime)
    .on("click", ResetIdleTime)
    .on("keydown", ResetIdleTime)
    .children("body")
    .on("scroll", ResetIdleTime);

Answer 2

I use a time cookie to log out an inactive user like this:

`$time = time();
// 5 minutes since last request
if(!empty($_COOKIE['_time'] && $time - $_COOKIE['_time'] >= 300) 
{
    // log user out
}
setcookie('_time', $time, '/');`

Hope this helps.