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

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

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

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

我們?yōu)槭颤N要關心自動註銷？

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

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

解決此問題的一種方法是跟蹤如果用戶在一定時間內(nèi)與應用程序進行交互，則在超過該時間的時間內(nèi)觸發(fā)註銷。您可能需要顯示一個彈出窗口，或者可能會警告用戶註銷即將發(fā)生的計時器?；蛘撸敊z測到不活動用戶時，您可能會立即註銷。

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

本文將展示如何基於此示例實現(xiàn)此類活動跟蹤邏輯。

步驟1：實現(xiàn)跟蹤邏輯

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

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

令UserActivityTimeOut = null;

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

函數(shù)intactiveUserAction（）{
  //註銷邏輯
}

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

步驟2：跟蹤激活

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

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

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

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

讓我們現(xiàn)在就這樣做。

步驟3：提高性能

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

讓UserActivityThrottLertimeout = null

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

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

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

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

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

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

現(xiàn)在，我們已經(jīng)實現(xiàn)了我們的活動跟蹤邏輯，讓我們看看如何將邏輯移至使用VUE構建的應用程序。我們將基於此示例的解釋。

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

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

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

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

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

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

我們需要做的最後一件事是找到一個適當?shù)牡胤郊せ罡欉壿嫛?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）;
  }
// ...

那是一個包裹！

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

希望您能發(fā)現(xiàn)此解決方案對您的項目有用！

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