Question

Buenas tardes ante todo; feliz año que desde el año pasado no escribo por aquí.

Os voy a exponer la situación a ver qué solución me podéis proponer si tenéis conocimiento de este tema;

Tenemos un sistema donde un usuario hace Login y empieza a trabajar, ese sistema tiene un sistema de cuenta atrás que se activa si el usuario está inactivo (es decir, se resetea cuando escribe, mueve el ratón o hace scroll) y desconecta al usuario del sistema cuando la cuenta atrás llega a cero. En base a esto nos estamos encontrando con el siguiente problema; los usuarios abren múltiples pestañas del sistema entonces cuando cualquiera de esas pestañas llega a cero dropea al usuario del sistema. Lo que queremos es que sólo dropee al usuario si la ventana activa llegara a cero, no cualquiera.

Se os ocurre algo?

Os pego el código actual para el timeout para si queréis lo tengáis como referencia:

<script type="text/javascript">

var interval;

var start_minutes = 29;
var minutes = 29;
var start_seconds = 59;

$( document ).ready(function() {

    console.log( "ready!" );

    //countdown('countdown');
    interval = setInterval('setTimer()', 1000);

    $('*').keypress(function() {

      //console.log( "Handler for .keypress() called." );
      ResetCountdown('countdown');
      //$.get('resettimer.php');

    });

    $('*').mousemove(function() {

      console.log( "Handler for .mousemove() called." );
      ResetCountdown('countdown');

    });
    $('*').onscroll(function() {

      console.log( "Handler for .onscroll() called." );
      ResetCountdown('countdown');

    });

});
</script>

Y aquí el código .js con las funciones:

function setTimer()
{
    console.log('timer set');
        var el = document.getElementById('countdown');             
        if(seconds == 0) 
        {                 
            if(minutes == 0)
            {
                el.innerHTML = "EXPIRED";                                        
                clearInterval(interval); 
                //alert('Your Session has expired, Please relogin again');
                window.location = '../control.php?logout=true';
                return;                 
            } 
            else 
            {                     
                minutes--;                     
                seconds = 60;                 
            }             
        }             
        if(minutes > 0) 
        {                
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } 
        else 
        {                
            var minute_text = '';             
        }             
        var second_text = seconds > 1 ? 'seconds' : 'second';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';            
        seconds--;         

}

function ResetCountdown() 
{   
    clearInterval(interval);

    seconds = start_seconds;
    minutes = start_minutes;

    interval = setInterval('setTimer()', 1000);
    console.log('timer stopped');

}

Un saludo

Answer 1

Hola @ankeorum,

tu problema es insalvable con ese código (o tal vez sea salvable, pero no vale la pena) porque estás delegando al cliente la desición de si se cierra o no la sesión. Esto, además del problema de las múltiples pestañas, tiene el problema de que basta que alguien con un navegador moderno altere la línea window.location = '../control.php?logout=true'; para que el cliente jamás se desconecte...

Lo que deberías hacer es mantener en el servidor el tiempo de vida de la sesión y que el cliente mande una señal de "stay alive" en los eventos de usuario. Podés manejar esta información en una sesión de PHP, ya que múltiples pestañas comparten la sesión.

Al recibir el "stay alive" el servidor analiza si la sesión debería seguir activa o no. Si debe seguir activa, respondés un Ok; si debe expirar, respondés al cliente con un error y hacés el proceso de logout.

De esta manera, si el cliente recibe un Ok no hace nada, y si recibe un error va a la pantalla de login directamente, porque la sesión ya está muerta del lado del servidor.

Fijate que así si alguien modifica el JavaScript, se pierde ir al inicio de sesión, pero su siguinente click lo lleva a una página que lo rechazará porque ya está deslogueado.

Se entiende la idea?

Para implementarla en tu código, basta que en los eventos keypress, mousemove y onscroll llames al servidor vía Ajax para que se refresque la sesión. Si la respuesta no es Ok, hacés un window.location = 'index.php''; para mandarlo al login, pero ya la sesión está cerrada.

Esto te evita además todo el código JavaScript del control del tiempo...

Salduos cordiales!

Answer 2

Que tal si usas localStorage? de esta forma una "variable" podria estar en todas las pestañas.

<script type="text/javascript">

    var interval, tab_actived = false, expired = false;

    if(localStorage.getItem('time') === null)
        localStorage.setItem("time", Math.floor(Date.now() / 1000));

    if(localStorage.getItem('activate') === null)
        localStorage.setItem("activate", 1);

    $(window).focus(function() {
        tab_actived = true;
    });

    $(window).blur(function() {
        tab_actived = false
    });

    $( document ).ready(function() {

        console.log( "ready!" );

        //countdown('countdown');
        interval = setInterval('setTimer()', 1000);

        $('*').keypress(function() {

          //console.log( "Handler for .keypress() called." );
          ResetCountdown('countdown');
          //$.get('resettimer.php');

        });

        $('*').mousemove(function() {

          //console.log( "Handler for .mousemove() called." );
          ResetCountdown('countdown');

        });

        $('*').onscroll(function() {

          //console.log( "Handler for .onscroll() called." );
          ResetCountdown('countdown');

        });

    });

    function setTimer()
    {
        if(expired)
            return false;

        var now = Math.floor(Date.now() / 1000),
            time = parseInt(localStorage.getItem('time')),
            elapsed = (now - time);

        if(elapsed >= (60 * 30)) // mayor o igual a 30 minutos
        {
            if(tab_actived){
                console.log('tiempo expirado!', 'logout!');
                expired = true;
            }
            else{
                console.log('usuario no presente');
            }
        }

        var minutes = 30 - Math.floor((elapsed % (60 * 60)) / 60),
            seconds = 60 - Math.floor((elapsed % 60) / 1);

        var min_tag = $('<span />').html(minutes).addClass('minutes'),
            sec_tag = $('<span />').html(seconds).addClass('seconds');

        if($('#countdown').children().length == 0)
            $('#countdown').append(min_tag).append('<span />').append(sec_tag);

        $('#countdown span').each(function(){
            $(this).html( 
                $(this).hasClass('minutes') ? minutes : ($(this).hasClass('seconds') ? seconds : ':')
            );
        });
    }

    function ResetCountdown() 
    {   
        clearInterval(interval);

        localStorage.setItem("time", Math.floor(Date.now() / 1000));

        interval = setInterval('setTimer()', 1000);

        console.log('timer stopped');

    }
</script>

Edit: tambien existen algunas librerias para este fin, como ejemplo esta:
http://jillelaine.github.io/jquery-idleTimeout/