javascript - Inactive/browser close - change status to 0 and back to 1 when user returns

Solution:

Thewindow.onbeforeunload is going to produce a race condition and won't be very reliable. Also you would want to usewindow.addEventListener('beforeunload', function () {...}); instead

Thealert inCheckIdleTime will halt execution of thejavascript, so the user will have to interact (clickOK) to log out. Otherwise that approach seems fine.

Now for when a user leaves the page, generally you would set your cookies to expire on leaving the site, but it seems you want to have a running tally in your website of the active users.

For that you would probably want a two step approach, actively setting flags and timestamp for "last active." And also running a garbage collection script that sets user to "inactive" if you have not seen any activity from them in a bit.

In the event that you needed truely realtime logs of active users, you might be want to look intoNode.js in particularSocket.IO which can deal much better with real time client-server IO.

Its likely far easier to run a query that updates the users to say that they are in fact active

 <script>
 setInterval(function () {
      $.post('active.php');
 }, 
 15000 // every 15 seconds
 );
 </script>
Copy code

in active.php (assuming you add a newlast_activeDATETIME, anduser_id is an int:

 mysql_query("UPDATE users SET status = 1, `last_active` = NOW() WHERE user_id = ". (int)$_SESSION['user_id']."");
 mysql_query("UPDATE users SET status = 0 WHERE `status` = 1 AND `last_active` < DATE_SUB(NOW(), INTERVAL 15 SECOND)"); // set all in active who have  not pinged in the last 15 seconds
Copy code

Here might be how the schema looks

 CREATE TABLE `users`
    `id` IN NOT NULL,
    `status` INT(1) DEFAULT 0,
    `last_active` DATETIME
 );
Copy code

you likely want to play around a bit with that "inactive" interval, and consider creating an index.

Solution:

Revised code

This code will make reference to the example I wrote available here >> jquery-idle with jquery-ui Dialog

Libraries used :

• jQuery-idletimer

Embedded Library Example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://thorst.github.io/jquery-idletimer/prod//src/idle-timer.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
Copy code

Without jQuery dialog :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://thorst.github.io/jquery-idletimer/prod//src/idle-timer.js"></script>
Copy code

Please keep in mind that you may switch out the dialog code with whatever your prefered dialog method is. I included jquery-ui for dialog to keep things as simple as possible. This also does not handle thebeforeunload event, as you have that covered in your code, however I would suggest read further here >> beforeunload stackoverflow article <<

Explanation

HTML

This line of code is for the placeholder where the countdown timer will be stored. To simplify things, I also use this when the timer has expired to display "Session Expired"

<div id="sessionSecondsRemaining" class="page_speed_755981839"></div>
Copy code

This is a very simple Modal dialog using jQuery UI. You can expand on it or replace it at your leisure.

<div id="dialog-confirm" title="Logout" >
<p><span >Your session has expired.</span></p>
</div>
Copy code

Without jQuery Dialog

<div id="sessionSecondsRemaining" class="page_speed_1429257054"></div>
Copy code

CSS

This is just a small hack due to a bug in the grayed background not displaying properly for jQuery UI modal dialogs (why has this not been fixed yet -- facepalm )

/* override jquery ui overlay style */
.ui-widget-overlay {
   background-image: none !important; /* FF fix */
   background: #000 url(images/new-ui-overlay.png) 50% 50% repeat-x;
}
Copy code

Without jQuery Dialog

• No CSS needed

Javascript

This section is where you can configure the parameters for jquery-idletimer.

        var
            session = {
                //Logout Settings
                inactiveTimeout: 10000,     //(ms) The time until we display a warning message
                warningTimeout: 10000,      //(ms) The time until we log them out
                minWarning: 5000,           //(ms) If they come back to page (on mobile), The minumum amount, before we just log them out
                warningStart: null,         //Date time the warning was started
                warningTimer: null,         //Timer running every second to countdown to logout
                logout: function () {       //Logout function once warningTimeout has expired
                    //window.location = settings.autologout.logouturl;
                },

                //Keepalive Settings
                keepaliveTimer: null,
                keepaliveUrl: "",   // set the Keep Alive URL here (aka keepalive.php)
                keepaliveInterval: 5000,     //(ms) the interval to call said url
                keepAlive: function () {
                    $.ajax({ url: session.keepaliveUrl });
                }
            }
        ;
Copy code

To add 'keepalive.php' support, simply set the full URL for where keepalive.php is located (and any parameters you wish to pass, since you are using sessions, you shouldn't need any).

                keepaliveUrl: "http://example.com/keepalive.php",   // set the Keep Alive URL here (aka keepalive.php)
Copy code

This line, initializes and sets the value in the #sessionSecondsRemaining div.

                $('#sessionSecondsRemaining').html(Math.round((session.warningTimeout - diff) / 1000));
Copy code

This section is where you would put the code that controls your dialog warning the user of a session expiration countdown (usually #sessionSecondsRemaining would be in this dialog)

                $( "#dialog-confirm" ).dialog({
                    resizable: false,
                    height:140,
                    modal: true,
                    buttons: {
                        "Extend": function() {
                            clearTimeout(session.warningTimer);
                            $( this ).dialog( "close" );
                        },
                        Cancel: function() {
                            session.logout();
                            $( this ).dialog( "close" );
                        }
                    }
                });
Copy code

Without jQuery Dialog

• Remove the last block

If you notice, 'Extend', terminates the warning timer, and Cancel calls the logout function (also configurable above)

Lastly, this block is very important to what happens in the event the timer counts down to zero, and for controlling the display of the countdown inside #sessionSecondsRemaining

                    if (remaining >= 0) {
                        $('#sessionSecondsRemaining').html(remaining);
                    } else {
                        $( '#dialog-confirm' ).dialog( "close" );
                        clearInterval(session.warningTimer);
                        $( '#sessionSecondsRemaining' ).html('Session Expired');
                        session.logout();
                    }
Copy code

Under theelse, is probably the only spot you will really need to modify in the above block. In there, I call thesession.logout() function (should really be the last line after dialogs are cleaned up, but this is just a demo). This is where you close the dialogs, and/or redirect the user to the session expired page, or display the message. If staying on the same page, make sure toclearInterval(session.warningTimer);. If not, then that line does not matter.

Without jQuery Dialog

                    if (remaining >= 0) {
                        $('#sessionSecondsRemaining').html(remaining);
                    } else {
                        clearInterval(session.warningTimer);
                        session.logout();
                    }
Copy code

keepalive.php

if (session_status() !== PHP_SESSION_ACTIVE) { session_start(); }
include 'db.php';
$maxtimeout = 15; // Seconds for max timeout before forcing session reset on other users.
mysql_query("UPDATE users SET status = 1 WHERE user_id = ".$_SESSION['user_id']."");
mysql_query("UPDATE users SET status = 0 WHERE user_id <> ".$_SESSION['user_id']." AND (UNIX_TIMESTAMP() - UNIX_TIMESTAMP(`timestamp_field`)) > " . $maxtimeout . "";
Copy code

This task should be set to run server-side to cleanup the database from any strays (if you have a lot of activity, then you won't need this script)

cron.php

include 'db.php';
// Set this for a longer timeout than in keepalive.php
$maxtimeout = 90; // Seconds for max timeout before forcing session reset on other users.
mysql_query("UPDATE users SET status = 0 WHERE (UNIX_TIMESTAMP() - UNIX_TIMESTAMP(`timestamp_field`)) > " . $maxtimeout . "";
Copy code

Solution:

There is a javascript library that may be helpful.
This is .

//Handle tab switch or browser minimize states    
ifvisible.on("blur", function(){
    //ajax call for inactive.php -> SET status = 0
});

ifvisible.on("focus", function(){
    //ajax call for active.php -> SET status = 1
});

//Detection of inactivity for xx seconds
ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds

ifvisible.on("idle", function(){
    //ajax call for inactive.php -> SET status = 0
});

ifvisible.on("wakeup", function(){
    //ajax call for active.php -> SET status = 1
});
Copy code

// if inactive : SET status = 0
    $.ajax({
        url: 'inactive.php?status=0',
        type: 'GET',
        async: false,
        timeout: 4000
    });
// if active : SET status = 1
    $.ajax({
        url: 'inactive.php?status=1',
        type: 'GET',
        async: false,
        timeout: 4000
    });
Copy code

if ($_GET["status"] == "1") // status = 1 -> active
    $tatus = "1";
else // status = 0 -> inactive
    $tatus = "0";

mysql_query("UPDATE users SET status = " . $tatus . " WHERE user_id = ".$_SESSION['user_id']."");
Copy code

About the detect browser close you can check out this Close/kill the session when the browser or tab is closed by Daniel Melo

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var timeLeft = Number(60);

setInterval(function(){
    timeLeft--;
    if(timeLeft<0){
        expiredLogout();
    }
    $("#timer").html(timeLeft);
    //If timer less than 30, show message to user will logout soon
    if(timeLeft<30){
        $("#logoutMsg").show( "slow" );
    }else{
        $("#logoutMsg").hide( "slow" );
    }
    $("#logoutMsg").html('You will logout soon, in '+timeLeft+' sec.');
},1000);
//Initial Function
$(function() {
    //Mouse move top up the time left value;
    $(document).mousemove(function(event) {
        timeLeft = Number(60);
    });
    stillAlive();
    //Every 1 minute ping the active.php
    setInterval(function(){ stillAlive();},60000);
});
//Redirect to other page if time out 
function expiredLogout(){
    window.location = "inactive.php";
};
function stillAlive(){
    //Update userID 1 still active
    var postVal = {userID:1};
    $.post("active.php", postVal, null, "json")
    .success(function(data) {})
    .error(function() {})
    .complete(function() {});
};
</script>
<label id="timer"></label>
<div id="logoutMsg"></div>
</body>
</html>
Copy code

Demo

Solution:

The first question would be how you define "idle". What terminates an "idle" period? Bringing the focus to the browser window? Scrolling the page? Clicking on the page? Clicking a button? Clicking a link? - The latter seems to be the approach most sites use, and this can be done on the server side alone: If the user did not open another page on your site for, say, 5 minutes, then he is considered idle. After 15 minutes he is logged out by the system.