如何使用超時對話框JS在Mousemove或Keydown事件上保持會話活動？

Question

我在應用程序中使用timeout-dialog.JS在5分鍾后使非活動用戶的會話期滿。 但是我有一個輸入網格，用戶可以添加多個記錄，然后添加假設的10條記錄，然后他進行保存，但是花了5分鍾以上的時間輸入了所有這些詳細信息，以及他何時進行保存或何時說是。讓我登錄“超時”對話框彈出窗口，屏幕會重新加載，他會丟失所有數據。

我想要的是，如果他移動鼠標或按任意鍵，則該會話應重置。

為此，我嘗試在布局頁面中添加mousemove和keydown事件，如下所示：

     <script>
    $(function () {
        var fnTimeOut = function () {
            $.timeoutDialog.setupDialogTimer({
                timeout: 300,
                countdown: 60,
                logout_redirect_url: '@Url.Action("LogOff", "Account")',
                keep_alive_url: '@Url.Action("Keepalive", "Account")'
            });
        };
        fnTimeOut();

        $(this).mousemove(function () {
            $.timeoutDialog.setupDialogTimer({
                timeout: 300,
                countdown: 60,
                logout_redirect_url: '@Url.Action("LogOff", "Account")',
                keep_alive_url: '@Url.Action("Keepalive", "Account")'
            });             
        });

        $(this).keydown(function () {
            $.timeoutDialog.setupDialogTimer({
                timeout: 300,
                countdown: 60,
                logout_redirect_url: '@Url.Action("LogOff", "Account")',
                keep_alive_url: '@Url.Action("Keepalive", "Account")'
            });          
        });
    });
</script>

但這提醒我說頁面對KILL或WAIT選項沒有響應。

那么，有什么方法可以在mousemove和keydown事件上使用超時對話框JS進行會話重置？

任何幫助將不勝感激。 謝謝。

Answer 1

像這樣的原始mousemove事件偵聽器對於您的目的而言可能會過大，因為它每秒可以發出數百個事件，如果您執行較重的操作，則肯定會殺死您的應用程序。 我可以看到兩件事可以做：

對事件進行節流，因此它們僅每N秒執行一次->請參閱節流
找到一種方法僅重設超時對話框的內部計時器。 查看源代碼內部，查看API中是否沒有任何功能可以執行此操作，而不是每次都設置一個全新的對話框（我懷疑這樣做效率不高）。 如果您需要任何其他幫助，請告訴我。

如果您只想保持后端會話有效，則可以這樣調用keep-alive網址：

var callKeepAlive = _.throttle(function () {
  $.get( "<YOUR KEEP-ALIVE URL>", function( data ) {
    console.log('keep-alive called')
  });
}, 1000);

然后在mousemove / keyup事件偵聽器中，執行callKeepAlive()

Answer 2

我在檢查XMLHttp的一些瀏覽器兼容性時發現了這一點，並為此在這里隨機選擇了瀏覽器線程。 想到我會給出我想出的工作示例，因為我很快就需要類似的東西，並且認為這個問題可以解決更大的示例。

底部的代碼極少

請原諒我有點混亂，這是一個原始的例子。

<?php
    // Do not forget session start if copying into your own code..
    if (isset($_GET['keepalive'])) {
        header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
        header("Cache-Control: post-check=0, pre-check=0", false);
        header("Pragma: no-cache");
        header('Content-Type: application/json');
        $boolStatusOfSession = TRUE;        // Something like: $boolStatusOfSession = (isset($_SESSION['MyTokenWhenSignedIn']) ? TRUE : FALSE);
        echo json_encode(array('status'=>$boolStatusOfSession));
        exit;
    }
?>
<html>
    <head></head>
    <body>
        <p>This script will throttle the mouse movement event to a rate of once per second max and perform a keep alive request to the same page along with a json response of the session status</p>
        <p id="debugbox"><b>Server Keep Alive: </b>please wait for the timer (10 seconds)</p>
        <p id="debugbox2"></p>

        <script>
            var elmDebug = document.getElementById('debugbox');
            var elmDebug2 = document.getElementById('debugbox2');
            var idleStart = Math.floor(Date.now() / 1000);

            function keepAlivePoster() {
                objHttp = new XMLHttpRequest();
                objHttp.onreadystatechange = function() {
                    var strDebug = "<b>Server Keep Alive: </b> ";
                    if (objHttp.readyState == XMLHttpRequest.DONE) {
                        idleStart = Math.floor(Date.now() / 1000);  
                        objResp = JSON.parse(objHttp.responseText);
                        if (objResp.hasOwnProperty('status') && objResp.status == true) {
                            // DO STUFF HERE WHEN SIGNED IN (Or do nothing at all)
                            strDebug += "Signed In, ";
                        } else {
                            // DO STUFF HERE WHEN SIGNED OUT (A window reload if your page can handle the session change)
                            strDebug += "Signed Out, "; // Or does not exist / error.. best to use a int status
                        }
                    }
                    elmDebug.innerHTML = strDebug + "Updated at " + Math.floor(Date.now() / 1000);
                    elmDebug2.innerHTML = '<b>Mouse Move Event: </b> Idle timer reset to ' + idleStart;
                }
                objHttp.open('GET', '?keepalive');
                objHttp.send(null);
            };


            function throttleController (callback, limit) {     // TAKEN FROM: https://jsfiddle.net/jonathansampson/m7G64/
                var wait = false;                  // Initially, we're not waiting
                elmDebug2.innerHTML = '<b>Mouse Move Event: </b> Idle timer reset to ' + idleStart;
                return function () {               // We return a throttled function
                    if (!wait) {                   // If we're not waiting
                        callback.call();           // Execute users function
                        wait = true;               // Prevent future invocations 
                        setTimeout(function () {wait = false;}, limit); // After a period of time, allow future invocations again
                    }
                }
            }           
            window.addEventListener("mousemove", throttleController(keepAlivePoster, 10000));       // Allow "idleCallback" to run at most 1 time every 10 seconds

        </script>
    </body>
</html>

當然，您可以刪除一些代碼（調試等，因此將是一個簡單的基本腳本示例）

最小碼

function keepAlivePoster() {
    objHttp = new XMLHttpRequest();
    objHttp.open('GET', '?keepalive');
    objHttp.send(null);
};
function throttleController (callback, limit) {     // TAKEN FROM: https://jsfiddle.net/jonathansampson/m7G64/
    var wait = false;  return function () {              
        if (!wait) { callback.call();  wait = true; setTimeout(function () {wait = false;}, limit); }
    }
}           
window.addEventListener("mousemove", throttleController(keepAlivePoster, 10000));

對於要覆蓋的任何其他事件，您將復制的最后一行，當您使用多個事件時，還希望在更高的作用域/全局變量上設置wait變量。

為什么PHP狀態/代碼

嗯，首先要放在另一個文件中，該文件早於html生成之類的所有文件都包含在內。但是理想情況下，您希望GET請求盡可能小，並附帶一些規則，以此類推。.因此，我禁用了該功能瀏覽器可輕松使用json響應，並在需要時提供簡單的重定向/重新加載檢查。

如何使用超時對話框JS在Mousemove或Keydown事件上保持會話活動？

問題描述

2 個解決方案

解決方案1
0 2017-05-18 07:52:49

解決方案2
0 2017-08-23 10:23:28

如何使用超時對話框JS在Mousemove或Keydown事件上保持會話活動？

問題描述

2 個解決方案

解決方案1 0 2017-05-18 07:52:49

解決方案2 0 2017-08-23 10:23:28

解決方案1
0 2017-05-18 07:52:49

解決方案2
0 2017-08-23 10:23:28