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

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

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

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

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

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

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

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

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

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

ステップ1：追跡ロジックを?qū)g裝します

2つの機(jī)能を?qū)g裝しましょう。 1つ目は、ユーザーがアプリと対話するたびにタイマーをリセットする責(zé)任があり、2つ目はユーザーが非アクティブになったときに狀況を処理します。

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

 let userActivityTimeOut = null;

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

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

わかりました。そのため、アクティビティの追跡を擔(dān)當(dāng)する方法がありますが、まだどこにも使用していません。

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

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

関數(shù)ActivateActivityTracker（）{
  window.addeventlistener（ "mousemove"、resetusivitytimeout）;
  window.addeventlistener（ "scroll"、resetusivitytimeout）;
  window.addeventlistener（ "keydown"、resetusivitytimeout）;
  window.addeventlistener（ "resize"、resetusivitytimeout）;
}

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

私たちはそれをこのように殘すことができますが、あなたが近づくと、私たちがコミットしたばかりのコードに深刻なパフォーマンスの問題があります。ユーザーがアプリと対話するたびに、ロジック全體が実行されます。それは良いことですが、よく見てください。追跡に必要でなくても、ユーザーがページと対話するときに膨大な回?cái)?shù)を解雇されるイベントにはいくつかの種類があります。 Mousemoveイベントを見てみましょう。マウスをタッチして動かしたとしても、Mousemoveイベントは何十回も解雇されます。これは本當(dāng)のパフォーマンスキラーです。指定された期間ごとに1回のみユーザーアクティビティロジックを起動できるようにするスロットラーを?qū)毪工毪长趣恰ⅳ饯螁栴}に対処できます。

今それをしましょう。

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

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

 let userActivityThrOTTLETIMEOUT = null

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

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

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

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

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

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

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

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

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

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

 // ...
  方法：{
    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つあります。私たちはウィンドウでタイムアウトと登録イベントリスナーを使用しているので、自分自身の後に少しきれいにすることは常に良い習(xí)慣です。私たちはそれを別のライフサイクルフック、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）;
  }
// ...

それはラップです！

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

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

以上が非アクティブユーザーの検出の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。