javascript - 如何使用 jQuery 和 PHP 检查空闲时间？

Question

我有一个使用 PHP SESSION 的脚本。我使用一个类来管理 PHP session 。在此类中，我有一个方法可以返回 session 到期前剩余的秒数。

此外，每次用户刷新页面或打开新页面(对服务器的新请求)时，空闲时间计数器开始计时 $_SESSION['MA_IDLE_TIMEOUT'] = time()+900;

我想要做的是在 PHP session 到期前 2 分钟显示一条对话框消息，并检查用户是否仍在页面上。如果用户单击“继续工作”，则 jQuery 脚本将发送 PHP AJAX 请求以更新 session $_SESSION['MA_IDLE_TIMEOUT'] = time()+900;。如果用户没有点击任何东西或点击“注销”，则 session 结束，用户被重定向到登录页面。

我确实找到了一个不错的插件，可以在一定程度上完成工作 jquery-idle-timeout

此插件的问题在于它会使用 JavaScript(如果键盘/鼠标)检查用户是否处于空闲状态。这是此脚本无法帮助我的场景:假设我的 PHP session 有 15 分钟/900 秒的限制。用户正在阅读同一页面上的超长文章。他/她将滚动，“从 JavaScript 的 Angular 来看”他们并不是真正空闲，但从 PHP 的 Angular 来看，使用是空闲的。然后在 20 分钟后用户刷新页面，然后用户将被注销，因为他/她在超过 900 秒的限制内没有向 PHP 服务器发送新请求。

我该如何解决这个问题？有没有更好的插件来解决这个问题？如果我在这个插件中遗漏了什么可以解决我的问题？

谢谢

Answer 1

如果用户没有发出请求，也没有移动鼠标或键盘或触摸设备等，那么从应用的 Angular 来看，即使他们的眼球没有，用户也是“空闲”的。

如果用户正在滚动，您可以使用 javascript 来监听滚动事件(例如，通过 onscroll)，但这不是 100% 可靠的，因为 (1) 依赖于 javascript，并且 ( 2) 如果您正在查看短文或使用高/大尺寸显示器(例如可以旋转 90 度的显示器)，则不起作用。

也许您可以采用不同的方式处理此问题:使用 cookie、单点登录或类似技术来预验证或自动验证请求，以便用户的 session 可以安全地结束并重新启动，而无需用户手动登录。

处理此问题的另一种方法是维护一个“ping”进程，该进程定期对服务器执行 ping 操作(例如，通过 setInterval())以保持 session 事件，并使用单独的超时(可能类似于 ASP.NET 使用的“身份验证超时”)来跟踪“空闲”用户何时应该注销。然后，用户操作(例如滚动、请求页面、聚焦字段、移动鼠标​​等)可以执行“ping 重置”，将空闲计数器重置为 0。

示例/概念 - 留作读者完善它的练习:

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);