用户与网页的最后一次交互答案

【问题标题】：User's last time interaction with a web page用户与网页的最后一次交互
【发布时间】：2018-06-25 08:01:18
【问题描述】：

我想保存客户上次与网页交互的时间戳 - 单击鼠标、轻敲键盘或移动鼠标。

我将使用上面的时间戳来计算 Web Token 过期前的剩余时间。

【问题讨论】：

唯一的方法是为任何交互创建监听器，并向服务器发送一个 AJAX，告诉它用户进行了交互。然后，服务器可以相应地调整 Web 令牌。
@Amadan：但请记住，每次触发鼠标移动事件时向服务器发送 AJAX 请求可能并不明智。也许包括检查以确保它仅每 30 秒发送一次（或任何适合的持续时间）
也许您可以在服务中的“mousemove”和“keypress”上的文档对象上添加事件侦听器，以便在您的应用程序中处理安全性。但是，这不是一个防弹解决方案。事实上，如果您使用可以阻止事件冒泡的外部库，您可能无法获得所有事件。
@Amadan，除了服务器端的令牌验证，我还使用客户端计算来确保用户在令牌过期时不会浏览页面。
@musefan 是的，一些延迟会很聪明。尽管如此，将它发送到服务器是唯一的方法，因为客户端可能会想“哦，看看用户正在做的所有交互”；而服务器滴答作响并过期令牌。

标签： javascript angularjs angular typescript timestamp

【解决方案1】：

你可以像在这个 plunker 中那样使用 RxJS：https://plnkr.co/edit/4kPM5FX6vX2QGC0xDQQO

核心函数是_listenToEvent:

function _listenToEvent(name, debounceTime) {
  rxjs.fromEvent(document, name)
  .pipe(
    rxjs.operators.debounceTime(debounceTime)
  )
  .subscribe(() => _updateTimestamp())
}

基本上，有了这个功能，你甚至可以在文档对象上收听。 debounceTime 参数允许您去抖动事件，以确保不会在鼠标移动时发送 AJAX 请求，而是在鼠标停止移动时发送 AJAX 请求，keypress 也是如此。不需要对click 事件进行去抖动处理，因为用户通常不会每秒点击 300 次。

您通常可以轻松地将其与user 服务集成，该服务会在您需要时发送 AJAX 请求。请注意，这可能不是一个防弹解决方案。我认为如果您的某些代码停止事件冒泡，RxJS 可能会错过它们。

【讨论】：