web-dev-qa-db-ja.com

ブラウザーでのユーザーの非アクティブ状態の検出-純粋にJavaScriptを介して

モニターを作成する際に、ユーザーがブラウザーでボタンをクリックしたり、テキストボックスに入力したりする（ドキュメント上でマウスをホバーしない）などのアクティビティをモニターします。そのため、ユーザーからのアクティビティが長時間ない場合、セッションはタイムアウトします。

Jqueryなどを使用せずに実行する必要があります。私はajaxを使用することがあります。 Java反対側のサーブレットが望ましい。

javascriptjavascript-eventssession-timeout
25
Ranjan Sarma

ここに純粋なJavaScriptの方法があります アイドル時間を追跡し、特定の制限に達するとアクションを実行し、それに応じて変更して使用できます

var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
document.onclick = function() {
    _idleSecondsCounter = 0;
};
document.onmousemove = function() {
    _idleSecondsCounter = 0;
};
document.onkeypress = function() {
    _idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Time expired!");
        document.location.href = "logout.html";
    }
}

このコードは、アラートを表示してリダイレクトするまで60秒待機し、アクションはカウント（マウスクリック、マウスの移動、またはキーの押下）を「リセット」します。

それは可能な限りクロスブラウザであり、単純である必要があります。 SecondsUntilExpireのIDでページに要素を追加する場合、残り時間の表示もサポートします。

参照： ブラウザのアイドル時間を知る方法

62
AnhSirk Dasarp

提案するアプローチの問題は、ユーザーがマウスを動かしたり入力を入力したりしても、セッションがタイムアウトすることです。したがって、セッションタイムアウトを20分に設定し、ユーザーが21分間入力し続けると、セッションは「アクティブ」であったとしてもタイムアウトします。セッションがタイムアウトしないようにする唯一のことは、サーバーへの新しいリクエストです。

解決策1：サーバーがセッションタイムアウトを制御できるようにする

セッションを更新し続けるバックグラウンドでAjaxリクエストを行っている場合を除き、ページが読み込まれたときにJavaScriptタイムアウトを設定し、そのようにユーザーに警告することができます。サーバーに他のリクエストを行う場合を除き、ユーザーがページにいる間は、それを難し​​くする必要はありません。

setTimeout(function () {
   alert("You've timed out baby!");
}, 1200000); // 20 minutes in millisec (modify to your session timeout)

ユーザーが別のページにアクセスするか、ページをリロードすると、セッションが更新され、JavaScriptタイマーがリセットされます。ユーザーがそのようなことをしない場合、ユーザーがアラートを受け取ると同時にセッションがタイムアウトします。

解決策2：クライアントがセッションタイムアウトを制御できるようにする

セッションの継続時間をJavaScriptで完全に制御して、ユーザーが入力、マウスなどを移動するたびにJavaScriptが更新されるようにするには、サーバーのバックグラウンドでAjaxリクエストを作成し続ける必要があります。セッションが更新されます。 （これは空のダミー要求である可能性があり、サーバーにヒットするものだけです）

次に、「ユーザーアクティビティ」と考えるすべてのアクションを追跡し（AnhSirkが答えに1つの方法を提案します）、そのようなイベントが発生したときにタイムアウトタイマーをリセットする必要があります。ユーザーの非アクティブ状態が長すぎる場合は、サーバー上のページにAjaxリクエストを行う必要があります。これにより、セッションが無効になり、セッションがタイムアウトしたことをユーザーに警告できます。

4
Christofer Eliasson