檢測非活動用戶

在大多數情況下，您並不真正在乎用戶是否積極參與或暫時非活動。不活動的意思是，也許他們起床喝水，或者更有可能更改了標籤，以做其他事情。但是，在跟踪用戶活動和檢測非活動性時，存在一些情況。

當您可能需要該功能時，讓我們考慮幾個示例：

• 跟踪文章閱讀時間
• 自動保存表格或文檔
• 自動暫停遊戲
• 隱藏視頻播放器控件
• 出於安全原因自動登錄用戶

我最近遇到了一個涉及最後一個示例的功能，出於安全原因，自動記錄了非活動用戶。

我們為什麼要關心自動註銷？

許多應用程序使用戶可以訪問其數量的個人數據。根據應用程序的目的，該數據的數量和值可能不同。它可能僅是用戶的名稱，但也可能是更敏感的數據，例如醫療記錄，財務記錄等。

有些用戶可能會忘記註銷並使會話打開。它發生了多少次？也許您的手機突然響了，或者您需要立即離開，將瀏覽器留在那裡。打開用戶會話是危險的，因為其他人可能會使用該會話來提取敏感數據。

解決此問題的一種方法是跟踪如果用戶在一定時間內與應用程序進行交互，則在超過該時間的時間內觸發註銷。您可能需要顯示一個彈出窗口，或者可能會警告用戶註銷即將發生的計時器。或者，當檢測到不活動用戶時，您可能會立即註銷。

下降一個級別，我們想做的就是計算用戶上次交互中傳遞的時間。如果那個時間段比我們的閾值更長，我們想解僱我們的無活動處理程序。如果用戶在破壞閾值之前執行操作，我們將重置計數器並重新計數。

本文將展示如何基於此示例實現此類活動跟踪邏輯。

步驟1：實現跟踪邏輯

讓我們實現兩個功能。第一個將負責每次用戶與應用程序進行交互時重置我們的計時器，第二個將處理用戶變得不活動時的情況：

• RESETUSERACTIVITIONTIMETOUT - 這將是我們的方法，負責清除現有超時並每次用戶與應用程序進行交互時啟動新的超時。
• INTACTIVEUSERACTION - 這將是我們的方法在用戶活動超時用完時被觸發的方法。

令UserActivityTimeOut = null;

函數restuseractivitivitivitivity timeout（）{
  clearTimeOut（userActivityTimeout）;
  userActivityTimeout = settimeout（（）=> {
    intacriveuseraction（）;
  }，InActive_user_time_threshold）;
}

函數intactiveUserAction（）{
  //註銷邏輯
}

好的，因此我們有負責跟踪活動的方法，但我們在任何地方都不使用它們。

步驟2：跟踪激活

現在，我們需要實現負責激活跟踪的方法。在這些方法中，我們添加了事件偵聽器，這些偵聽器將在檢測到事件時調用我們的repetuseractivityTime Out方法。您可以根據需要收聽盡可能多的事件，但是為簡單起見，我們將該列表限制在一些最常見的列表中。

函數activateactivityTracker（）{
  window.addeventListener（“ mousemove”，repetuseractivityTimeout）;
  window.AddeventListener（“ scroll”，repetuseractivityTimeout）;
  window.AddeventListener（“ keydown”，repetuseractivitivitivitivity timeout）;
  window.addeventListener（“ ressize”，repetuseractivityTimeout）;
}

就是這樣。我們的用戶跟踪已準備就緒。我們唯一需要做的就是在頁面加載上調用ActivateActivityTracker。

我們可以這樣留下來，但是如果您仔細觀察，我們剛剛提出的代碼就會存在嚴重的性能問題。每次用戶與應用程序進行交互時，整個邏輯都會運行。很好，但是仔細看。當用戶與頁面交互時，即使不是我們的跟踪，也有一些類型的事件被釋放出大量次數。讓我們看一下Mousemove活動。即使您只需觸摸鼠標，Mousemove事件也會被射擊數十次。這是一個真正的性能殺手。我們可以通過引入一個智能器來解決該問題，該節能器將允許每個指定時間段僅觸發一次用戶活動邏輯。

讓我們現在就這樣做。

步驟3：提高性能

首先，我們需要添加另一個變量，該變量將繼續參考我們的油門超時。

讓UserActivityThrottLertimeout = null

然後，我們創建一種將創建我們的插座的方法。在該方法中，我們檢查了油門超時是否已經存在，如果不存在，我們會創建一個將在特定時間段內啟動RESETUSERACTIVITY TIMET OUT。那是所有用戶活動都不會再次觸發跟踪邏輯的時期。在那段時間之後，油門超時已清除，允許下一個交互重置活動跟踪器。

 userActivityThrottler（）{
  如果（！useractivityThrottLertimeout）{
    userActivityThrottlertimeout = settimeout（（）=> {
      restuseractivitivitivityTimeOut（）;

      ClearTimeOut（userActivityThrottLertimeout）;
      userActivityThrottLertimeout = null;
    }，user_activity_throttler_time）;
  }
}

我們剛剛創建了一種新方法，該方法應在用戶互動時觸發，因此我們需要記住將事件處理程序從我們的激活邏輯中從repentuseractivityTimeout到UserActivityThrottler更改。

 activateactivityTracker（）{
  window.AddeventListener（“ Mousemove”，UserActivityThrottler）;
  // ...
}

獎金：讓我們對此進行複興！

現在，我們已經實現了我們的活動跟踪邏輯，讓我們看看如何將邏輯移至使用VUE構建的應用程序。我們將基於此示例的解釋。

首先，我們需要將所有變量移動到組件的數據中，這是所有反應性道具都活的地方。

導出默認{
  數據（） {
    返回 {
      ISINACTIVE：false，
      userActivityThrottlertimeout：null，
      userActivityTimeout：null
    };
  }，，
// ...

然後，我們將所有功能移動到方法：

 // ...
  方法： {
    activateactivityTracker（）{...}，
    restuseractivitivitivitivity timeout（）{...}，
    useractivityThrottler（）{...}，
    intactiveuseraction（）{...}
  }，，
// ...

由於我們正在使用VUE及其反應性系統，因此我們可以刪除所有直接的DOM操作i。 （即document.getElementById（“ app”）。innerhtml），並依賴於我們的ISINARTIVE數據屬性。我們可以在下面的模板中直接訪問數據屬性。

 
  <div>
    <p>用戶無效= {{iNInActive}} </p>
  </div>

我們需要做的最後一件事是找到一個適當的地方激活跟踪邏輯。 Vue帶有組件生命週期掛鉤，這正是我們需要的 - 特別是BeforeMount鉤子。因此，讓我們把它放在那裡。

 // ...
  beforemount（）{
    this.activateactivityTracker（）;
  }，，
// ...

我們還有一件事可以做。由於我們在窗口上使用超時並註冊事件聽眾，因此自己清理一點總是一個好習慣。我們可以在另一個生命週期鉤子Beforedestroy中做到這一點。讓我們刪除我們註冊的所有偵聽器，並在組件的生命週期結束時清除所有超時。

 // ...
  beforedestroy（）{
    Window.RemoveEventListener（“ Mousemove”，this.useractivityThrottler）;
    window.removeEventListener（“ scroll”，this.useractivityThrottler）;
    window.removeeventlistener（“ keydown”，this.useractivityThrottler）;
    window.removeEventListener（“ resize”，this.useractivityThrottler）;
  
    clearTimeOut（this.useractivityTimeOut）;
    clearTimeOut（this.useractivityThrottLertimeout）;
  }
// ...

那是一個包裹！

該示例純粹集中於檢測用戶與應用程序的交互，對其反應並在特定時間段內未檢測到相互作用時發射方法。我希望這個示例盡可能地通用，因此這就是為什麼我將檢測到的不活動用戶的實現留給您。

希望您能發現此解決方案對您的項目有用！

以上是檢測非活動用戶的詳細內容。更多資訊請關注PHP中文網其他相關文章！