检测非活动用户

在大多数情况下，您并不真正在乎用户是否积极参与或暂时非活动。不活动的意思是，也许他们起床喝水，或者更有可能更改了标签，以做其他事情。但是，在跟踪用户活动和检测非活动性时，存在一些情况。

当您可能需要该功能时，让我们考虑几个示例：

• 跟踪文章阅读时间
• 自动保存表格或文档
• 自动暂停游戏
• 隐藏视频播放器控件
• 出于安全原因自动登录用户

我最近遇到了一个涉及最后一个示例的功能，出于安全原因，自动记录了非活动用户。

我们为什么要关心自动注销？

许多应用程序使用户可以访问其数量的个人数据。根据应用程序的目的，该数据的数量和值可能不同。它可能仅是用户的名称，但也可能是更敏感的数据，例如医疗记录，财务记录等。

有些用户可能会忘记注销并使会话打开。它发生了多少次？也许您的手机突然响了，或者您需要立即离开，将浏览器留在那里。打开用户会话是危险的，因为其他人可能会使用该会话来提取敏感数据。

解决此问题的一种方法是跟踪如果用户在一定时间内与应用程序进行交互，则在超过该时间的时间内触发注销。您可能需要显示一个弹出窗口，或者可能会警告用户注销即将发生的计时器。或者，当检测到不活动用户时，您可能会立即注销。

下降一个级别，我们想做的就是计算用户上次交互中传递的时间。如果那个时间段比我们的阈值更长，我们想解雇我们的无活动处理程序。如果用户在破坏阈值之前执行操作，我们将重置计数器并重新计数。

本文将展示如何基于此示例实现此类活动跟踪逻辑。

步骤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中文网其他相关文章！