Как изменить счетчик setTimeout() с помощью запроса ajax?

Question

Я написал небольшой код jQuery, который отобразит диалоговое окно, если страница не обновляется в течение 1800 секунд. Диалог имеет обратный отсчет до того, как сеанс автоматически завершится. Если пользователь нажимает «Да, продолжайте работать», счетчик сбрасывается, и диалог исчезает. В противном случае пользователь будет переведен на страницу выхода.

Проблема, с которой я столкнулся, заключается в том, когда пользователь открывает вкладку нового браузера и продолжает работу над новой вкладкой. Затем старая вкладка станет бездействовать «после 1800 секунд без обновления», чтобы они потеряли все свои сеансы и вышли из системы.

Я создал страницу PHP, которая вернет сколько секунд осталось, проверив время в базе данных с помощью $_SESSION. Но я не уверен, как сбросить счетчик, когда откроется диалог.

Я не уверен, как я могу изменить свой код, чтобы проверить фактические секунды, оставшиеся до отображения диалогового окна.

Вот мой код

<!-- This script will alert a user before forcing to logout --> 
<script type="text/javascript"> 
    var timer; 
    var closeDialogAfter = 180; //The default counter value 
    var idleTimeOutLimit = 1800 - closeDialogAfter; //Display the dialog after @idleTimeOutLimit seconds of idle time 
    var signOutScript = '/index.php?action=logout'; //logout url 
    var keepAliveScript = '/ajax/handler-keep-me-alive.php'; //php page to handle ajax request to keep the session alive 
    var dialogCountdown = '#dialog-countdown'; // the lable that is used to display the counter 
    var idleTimeout= '#idleTimeout'; //the div that is used for the dialog 

    $(function(){ 

     //start the idle time out counter 
     startTimeoutCounter(); 

     $(idleTimeout).dialog({ 
      resizable: false, 
      autoOpen: false, 
      width: 400, 
      open: function(){ 
       updateTimeoutCounter(); 
      }, 
      buttons: { 
       "Yes, Keep working": function(e) { 
        $.ajax({  
         url: keepAliveScript,  
         success: function(data) { 
          startTimeoutCounter(); 
          $(idleTimeout).dialog("close"); 
         } 
        }); 
       }, 
       "No, End Session": function(e){ 
        forceLogOut(); 
        $(this).dialog('close');     
       } 
      } 
     }); 
    }); 


    function startTimeoutCounter(){ 
     timer = closeDialogAfter; 
     $(dialogCountdown).text(timer); 

     setTimeout(function(){ 
      $(idleTimeout).dialog("open"); 
     }, idleTimeOutLimit * 1000); 
    } 

    function updateTimeoutCounter(){ 

     if( $(idleTimeout).dialog("isOpen")){ 

      setTimeout(function(){ 
       timer = timer -1; 
       $(dialogCountdown).text(timer); 
       (timer < 2) ? forceLogOut() : updateTimeoutCounter(); 
      }, 1000); 
     } else 
      $(dialogCountdown).text(closeDialogAfter) 
    } 

    function forceLogOut(){ 
     window.location = signOutScript; 
    } 

</script> 

Answer 1

в Уре PHP скрипт и нужно возвращать только число secondes оставил
ваши Javascript необходимо начать с запросом AJAX на страницу PHP.

<script type="text/javascript"> 
    $.get("timeleft.php",function(data){ 
     var timer; 
     var closeDialogAfter = parseInt(data); //<-- what i changed 
     var idleTimeOutLimit = 1800 - closeDialogAfter; //Display the dialog after @idleTimeOutLimit seconds of idle time 
     var signOutScript = '/index.php?action=logout'; //logout url 
     var keepAliveScript = '/ajax/handler-keep-me-alive.php'; //php page to handle ajax request to keep the session alive 
     var dialogCountdown = '#dialog-countdown'; // the lable that is used to display the counter 
     var idleTimeout= '#idleTimeout'; //the div that is used for the dialog 

     $(function(){ 

      //start the idle time out counter 
      startTimeoutCounter(); 

      $(idleTimeout).dialog({ 
       resizable: false, 
       autoOpen: false, 
       width: 400, 
       open: function(){ 
        updateTimeoutCounter(); 
       }, 
       buttons: { 
        "Yes, Keep working": function(e) { 
         $.ajax({  
          url: keepAliveScript,  
          success: function(data) { 
           startTimeoutCounter(); 
           $(idleTimeout).dialog("close"); 
          } 
         }); 
        }, 
        "No, End Session": function(e){ 
         forceLogOut(); 
         $(this).dialog('close');     
        } 
       } 
      }); 
     }); 


     function startTimeoutCounter(){ 
      timer = closeDialogAfter; 
      $(dialogCountdown).text(timer); 

      setTimeout(function(){ 
       $(idleTimeout).dialog("open"); 
      }, idleTimeOutLimit * 1000); 
     } 

     function updateTimeoutCounter(){ 

      if( $(idleTimeout).dialog("isOpen")){ 

       setTimeout(function(){ 
        timer = timer -1; 
        $(dialogCountdown).text(timer); 
        (timer < 2) ? forceLogOut() : updateTimeoutCounter(); 
       }, 1000); 
      } else 
       $(dialogCountdown).text(closeDialogAfter) 
     } 

     function forceLogOut(){ 
      window.location = signOutScript; 
     } 
    }); 
</script> 

Answer 2

Как вы говорите, вам нужно проверить время до открытия диалога. Когда страница загружается, вы можете принять все 1800 секунд.

Я думаю, вы, вероятно, хотите что-то подобное (см. Комментарии в коде и примечаниях ниже).

<!-- This script will alert a user before forcing to logout --> 
<script type="text/javascript"> 
$(function() { 
    var timer; 
    var closeDialogAfter = 180; //The default counter value 
    var idleTimeOutLimit = <?php echo $sessionTimeoutValue ?>; //Time after which 
    var signOutScript = '/index.php?action=logout'; //logout url 
    var keepAliveScript = '/ajax/handler-keep-me-alive.php'; //php page to handle ajax request to keep the session alive 
    var getSessionTimeScript = '/ajax/get_session_time.php'; //php page to handle ajax request for the remaining session length 
    var $dialogCountdown = $('#dialog-countdown'); //the container used to display the counter 
    var $idleTimeout = $('#idleTimeout'); //the div that is used for the dialog 

    function startTimeoutCounter(t) { 
     t = Math.max(closeDialogAfter, parseInt(t, 10) || 0); 
     $idleTimeout.dialog("close"); 
     setTimeout(getSessionTimeRemaining, (t - closeDialogAfter) * 1000); 
    } 
    function updateTimeoutCounter() { 
     if($idleTimeout.dialog("isOpen")) { 
      setTimeout(function() { 
       timer = timer - 1; 
       $dialogCountdown.text(timer); 
       if(timer < 2) { 
        // Here, forceLogOut() can't be assumed because 
        // the session may have been kept alive from another tab. 
        // Therefore, call getSessionTimeRemaining(). 
        getSessionTimeRemaining(); 
       } else { 
        updateTimeoutCounter(); 
       } 
      }, 1000); 
     } else { 
      $dialogCountdown.text(closeDialogAfter); 
     } 
    } 
    function forceLogOut() { 
     $idleTimeout.dialog("close"); 
     window.location = signOutScript; 
    } 
    function getSessionTimeRemaining() { 
     $.get(getSessionTimeScript).then(function(t) { 
      t = parseInt(t, 10) || 0; 
      if(t <= 0) { 
       forceLogOut(); 
      } else if(t <= closeDialogAfter) { 
       timer = closeDialogAfter; 
       $dialogCountdown.text(timer); 
       $idleTimeout.dialog("open"); 
      } else { 
       startTimeoutCounter(t); 
      } 
     }, function(error) { 
      // Something went wrong, safest action is logout 
      // This will only happen under abnormal circumstances 
      console.error(error); 
      forceLogOut(); 
     }); 
    }; 
    function keepAlive() { 
     $.get(keepAliveScript).then(startTimeoutCounter); 
    } 

    $idleTimeout.dialog({ 
     resizable: false, 
     autoOpen: false, 
     width: 400, 
     open: updateTimeoutCounter, 
     buttons: { 
      "Yes, Keep working": keepAlive, 
      "No, End Session": forceLogOut 
     } 
    }); 
    // On page load, the session should have been reset by the script that serves this page, 
    // therefore no need to call keepAlive(), though that would do the same job. 
    startTimeoutCounter(idleTimeOutLimit); 
}); 
</script> 

Вы увидите главное структурное различие в том, что $(function() {...}) теперь оборачивает все. Это позволяет избежать использования глобального пространства имен.

Новый fuction getSessionTimeRemaining() и его серверная копия getSessionTimeScript являются центральными, позволяя более чем одной вкладке отвечать на тайм-аут сеанса.

Два сценария keepAliveScript и getSessionTimeScript (который может быть одним и тем же сценарием с разным запросом) должны оба вернуть время, t, в секундах. t принимается как строка, которая преобразуется в число с parseInt(). Возможно, вы захотите вернуть время, немного меньшее, чем оставшееся время сеанса, что позволяет сделать короткий «период благодати». То, что вы не хотите, - это дать пользователю надежду на сохранение сеанса, когда он уже истек.

Функция startTimeoutCounter(t) теперь принимает время в секундах, так что он может работать на любое время остается, что не обязательно быть полные 1800 секунд, в зависимости от того, идет вызов (асинхронно) от keepAlive() или getSessionTimeRemaining().

Новый fuction keepAlive() позволяет использовать опцию "buttons".

Все полностью непроверенные. Вам, вероятно, все равно придется возиться с ним.