ブラウザ上でのユーザーの非アクティブ状態を検出する - 純粋に JavaScript 経由 [重複] 質問する

Question

あなたが提案したアプローチの問題は、ユーザーがマウスを動かしたり入力したりしている場合でも、セッションがタイムアウトになることです。したがって、セッションタイムアウトを 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 でセッションの持続時間を完全に制御し、ユーザーが入力したり、マウスを動かしたりするたびにセッションが更新されるようにしたい場合は、バックグラウンドでサーバーに Ajax リクエストを送信し続け、セッションが更新されるようにする必要があります。(これは空のダミーリクエスト、つまりサーバーにヒットするだけのリクエストでもかまいません)

次に、「ユーザーアクティビティ」とみなすすべてのアクションを追跡し (AnhSirk は回答で 1 つの方法を提案しています)、そのようなイベントが発生するたびにタイムアウトタイマーをリセットする必要があります。ユーザーが長時間非アクティブである場合は、サーバー上のページに Ajax リクエストを送信してセッションを無効にし、セッションがタイムアウトしたことをユーザーに警告する必要があります。

Answer 1

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