非アクティブユーザーの検出

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブで、つまり、おそらく彼らは水を飲むために立ち上がった、またはより可能性の高いタブを変更して、他のことを少しするように変更しました。ただし、ユーザーのアクティビティを追跡して非アクティブ性を検出するのが便利な場合があります。

あなたがその機能を必要とするかもしれないときに、いくつかの例について考えてみましょう：

• 記事の読み取り時間を追跡します
• 自動保存フォームまたはドキュメント
• 自動一時停止ゲーム
• ビデオプレーヤーのコントロールを隠す
• セキュリティ上の理由でユーザーをオートログアウトします

私は最近、その最後の例を巻き込んだ機能に遭遇しました。これは、セキュリティ上の理由で非アクティブなユーザーを自動記録します。

なぜ自動ログアウトを気にする必要があるのですか？

多くのアプリケーションは、ユーザーが自分の個人データのいくらかの量にアクセスできるようにします。アプリケーションの目的に応じて、そのデータの量と値は異なる場合があります。それはユーザーの名前のみかもしれませんが、医療記録、財務記録など、より敏感なデータでもあります。

一部のユーザーは、ログアウトしてセッションを開いたままにするのを忘れる可能性があります。それはあなたに何回起こったのですか？たぶん、あなたの携帯電話が突然鳴ったのかもしれませんし、ブラウザをつけたままにして、すぐに離れる必要がありました。他の誰かがそのセッションを使用して機密データを抽出する可能性があるため、ユーザーセッションを開いたままにすることは危険です。

この問題と戦う1つの方法は、特定の期間内にユーザーがアプリと対話した場合の追跡を行い、その時間を超えた場合にログアウトをトリガーします。ログアウトが発生しようとしていることをユーザーに警告するポップオーバー、またはおそらくタイマーを表示することをお勧めします。または、非アクティブユーザーが検出されたときにすぐにログアウトすることができます。

1つのレベルに進むと、私たちがやりたいのは、ユーザーの最後の相互作用から経過した時間を数えることです。その期間がしきい値よりも長い場合は、非アクティブなハンドラーを解雇したいと考えています。ユーザーがしきい値が侵害される前にアクションを実行した場合、カウンターをリセットして再度カウントを開始します。

この記事では、この例に基づいてこのようなアクティビティ追跡ロジックを実装する方法を示します。

ステップ1：追跡ロジックを実装します

2つの機能を実装しましょう。 1つ目は、ユーザーがアプリと対話するたびにタイマーをリセットする責任があり、2つ目はユーザーが非アクティブになったときに状況を処理します。

• ResetUsivityTimeOut - これは、ユーザーがアプリケーションと対話するたびに既存のタイムアウトをクリアし、新しいタイムアウトを起動することを担当する方法です。
• 不活性化 - これは、ユーザーアクティビティのタイムアウトがなくなったときに起動される方法です。

 let userActivityTimeOut = null;

function reseTuserActivityTimeout（）{
  ClearTimeout（userActivityTimeout）;
  useractivitytimeout = setimeout（（）=> {
    InactiveUseraction（）;
  }、inactive_user_time_threshold）;
}

function inactiveUseraction（）{
  //ログアウトロジック
}

わかりました。そのため、アクティビティの追跡を担当する方法がありますが、まだどこにも使用していません。

ステップ2：アクティベーションの追跡

次に、追跡のアクティブ化を担当するメソッドを実装する必要があります。これらの方法では、イベントが検出されたときにreseTuserActivityTimeOutメソッドを呼び出すイベントリスナーを追加します。あなたはあなたが望むだけ多くのイベントを聞くことができますが、簡単にするために、私たちはそのリストをいくつかの最も一般的なものに制限します。

関数ActivateActivityTracker（）{
  window.addeventlistener（ "mousemove"、resetusivitytimeout）;
  window.addeventlistener（ "scroll"、resetusivitytimeout）;
  window.addeventlistener（ "keydown"、resetusivitytimeout）;
  window.addeventlistener（ "resize"、resetusivitytimeout）;
}

それでおしまい。ユーザー追跡の準備が整いました。私たちがする必要がある唯一のことは、ページのロードでActivateativityTrackerを呼び出すことです。

私たちはそれをこのように残すことができますが、あなたが近づくと、私たちがコミットしたばかりのコードに深刻なパフォーマンスの問題があります。ユーザーがアプリと対話するたびに、ロジック全体が実行されます。それは良いことですが、よく見てください。追跡に必要でなくても、ユーザーがページと対話するときに膨大な回数を解雇されるイベントにはいくつかの種類があります。 Mousemoveイベントを見てみましょう。マウスをタッチして動かしたとしても、Mousemoveイベントは何十回も解雇されます。これは本当のパフォーマンスキラーです。指定された期間ごとに1回のみユーザーアクティビティロジックを起動できるようにするスロットラーを導入することで、その問題に対処できます。

今それをしましょう。

ステップ3：パフォーマンスを改善します

まず、スロットラーのタイムアウトを参照し続けるもう1つの変数を追加する必要があります。

 let userActivityThrOTTLETIMEOUT = null

次に、スロットラーを作成するメソッドを作成します。その方法では、スロットラーのタイムアウトが既に存在するかどうかを確認し、そうでない場合は、特定の期間後にリセティータイムアウトを発射するものを作成します。それは、すべてのユーザーアクティビティが追跡ロジックを再びトリガーしない期間です。その後、スロットラーのタイムアウトがクリアされ、次のインタラクションがアクティビティトラッカーをリセットできるようになります。

 userActivityThrottler（）{
  if（！userActivityThrottLertimeOut）{
    userActivityThrOTTLETIMEOUT = SETTIMEOUT（（）=> {
      reseTuserActivityTimeout（）;

      ClearTimeout（userActivityThrOttLertimeOut）;
      userActivityThrOTTLETIMEOUT = null;
    }、user_activity_throttler_time）;
  }
}

ユーザーインタラクションで起動する必要がある新しい方法を作成したばかりなので、アクティブ化ロジックでイベントハンドラーをresetusivityTimeTimeTthoroutからUserActivityThrottlerに変更することを忘れないでください。

 ActivateativityTracker（）{
  window.addeventlistener（ "mousemove"、useractivitythrottler）;
  // ...
}

ボーナス：それを再生しましょう！

アクティビティ追跡ロジックが実装されたので、そのロジックをVUEを使用してアプリケーションビルドにどのように移動できるかを見てみましょう。この例に基づいて説明します。

まず、すべての変数をコンポーネントのデータに移動する必要があります。これは、すべてのリアクティブな小道具が住んでいる場所です。

デフォルトのエクスポート{
  データ（） {
    戻る {
      isinactive：false、
      useractivitythrottlertimeout：null、
      userActivityTimeOut：null
    };
  }、
// ...

次に、すべての機能をメソッドに移動します。

 // ...
  方法：{
    ActivateativityTracker（）{...}、
    reseTuserActivityTimeout（）{...}、
    userActivityThrottler（）{...}、
    InactiveUseraction（）{...}
  }、
// ...

VUEとそれはリアクティブシステムを使用しているため、すべての直接DOM操作i。（IE document.getElementById（ "App"）。InnerHTML）をドロップし、ISICATIVEデータプロパティに依存することができます。以下のように、コンポーネントのテンプレートでデータプロパティに直接アクセスできます。

 
  <div>
    <p>ユーザーはincive = {{isinactive}} </p>です
  </div>
テンプレート>

最後に行う必要があることは、追跡ロジックをアクティブにする適切な場所を見つけることです。 Vueには、まさに私たちが必要なものであるコンポーネントライフサイクルフック、特にBeForemountフックが付属しています。それでそこに置いてみましょう。

 // ...
  beforemount（）{
    this.activateativityTracker（）;
  }、
// ...

私たちにできることはもう1つあります。私たちはウィンドウでタイムアウトと登録イベントリスナーを使用しているので、自分自身の後に少しきれいにすることは常に良い習慣です。私たちはそれを別のライフサイクルフック、beforedestroyで行うことができます。コンポーネントのライフサイクルが終了したときに、登録したすべてのリスナーを削除し、すべてのタイムアウトをクリアしましょう。

 // ...
  beforedestroy（）{
    window.removeeventlistener（ "mousemove"、this.useractivitythrottler）;
    window.removeeventlistener（ "scroll"、this.useractivitythrottler）;
    window.removeeventlistener（ "keydown"、this.useractivitythrottler）;
    window.removeeventlistener（ "s resize"、this.useractivitythrottler）;
  
    cleartimeout（this.useractivitytimeout）;
    ClearTimeout（this.UserActivityThrottlertimeOut）;
  }
// ...

それはラップです！

この例では、アプリケーションとのユーザーの相互作用の検出に純粋に集中し、特定の期間内に相互作用が検出されないときにそれに反応し、メソッドを起動します。私はこの例を可能な限り普遍的にしたかったので、それがあなたに検出したときに起こったべきことの実装を残しておいてください。

このソリューションがあなたのプロジェクトで役立つことを願っています！

以上が非アクティブユーザーの検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。