检测用户离开页面的正确方法

Posted 2023-02-16

【中文标题】检测用户离开页面的正确方法

【英文标题】：Proper way to detect user's leaving page

【发布时间】：2015-01-30 08:35:05

【问题描述】：

我正在构建一个 WebApp (ERP)，我需要在页面上显示当前登录并处于活动状态的人员。通过监听鼠标/键盘事件并定期向数据库报告，我设法得到了相当准确的信息。

我不知道如何在用户关闭页面时将其标记为离线。我尝试使用onbeforeunload，但它显然会在用户简单地更改页面时触发（单击 ERP 内的链接，指向 ERP 中的另一个页面）。

然后我尝试使用WebSockets，但问题是一样的：每次重新加载页面时，WebSockets 连接都会关闭。

所以我可以想到两种方法：

确实使用WebSockets，并通过调用javascript函数替换所有链接，该函数会以某种方式告诉服务器用户将要更改页面（以便服务器不会将其标记为离线）。 但这感觉不对，从语义上讲，链接应该是链接，它只是指向另一个位置。

使用WebSockets 或AJAX 并且从不实际更改页面：链接被替换为调用内容的函数，并将其显示在屏幕上（使用Javascript 更新DOM）。但是，感觉也不对，因为从语义上讲页面没有意义并且 URL永远不会改变，所以用户不能“复制粘贴" 页面的链接来引用吧？

那么，有没有一种正确、干净的方法来做到这一点？感谢您的帮助。

【参考方案1】：

如果您的每个页面都有到服务器的 webSocket 连接，那么在服务器上，您可以通过查看 webSocket 关闭来查看任何给定页面何时关闭。

为避免在用户从您网站的一个页面导航到另一个页面时认为他们已经离开了网站，您只需在服务器端添加一个延迟，以便您仅在以下情况下报告用户已离开您的网站一段时间内（可能至少几秒钟）没有来自该用户的 webSocket 连接。

因此，在您的服务器上，当您检测到此用户的最后一个 webSocket 连接已关闭时，您设置了一个计时器，时间为几秒。如果用户在计时器关闭之前打开了您网站上的另一个页面（通过导航或只是打开另一个页面），您取消计时器并将用户计为仍然连接。如果计时器关闭，那么您现在知道用户在您选择的任何时间段（例如 10 秒）内都离开了您的网站，对您来说，这意味着他们已经离开了网站。在您决定之前，您可以控制您希望该时间段保持多长时间，是的，它们已经消失了。

所有试图“看到”用户使用 Javascript 在浏览器中离开您的页面的尝试都会有漏洞，因为在您的客户端 JavaScript 没有机会关闭网页的情况下，总有一些方法可以关闭。告诉你的服务器。 webSocket 解决方案的美妙之处在于，当页面现在消失时，浏览器会自动且可靠地通知您的服务器，因为它关闭了 webSocket，并且您的服务器会收到套接字已关闭的通知。

【讨论】：

嗯......既然你提到了这个解决方案，它似乎很明显，我想知道为什么我没有想到这一点。 当然这似乎是正确的方法：我将结合这个解决方案（检测页面关闭）和下面的答案建议检测页面上的不活动状态时用户不做任何事情。感谢您的回答！

【参考方案2】：

据我了解，您希望计算在网站/页面上活跃的用户。

识别用户（计算出 99% 的唯一 ID）： http://valve.github.io/blog/2013/07/14/anonymous-browser-fingerprinting/你可以用别的库，很少。

在每个页面上，在页面加载时不时发送意味着用户正在导航或（60 秒您可以选择较低的时间范围意味着用户停留在页面上）计算 id（指纹 js）到服务器（web-socket /ajax)

在服务器上，当新用户登录（存储在数据库或会话中）时，您需要具有到期日期（60 秒）递增的 id 列表。

在您的网站上检索具有时间戳

知道用户是否登录，并指定页面：

使用要在服务器发送的对象 fingerprint: 123123124234, logged : true, page: home

如果您没有将用户存储在数据库中，请清除您的列表：

单独的线程（仅限服务器）访问该对象并销毁所有早于 10 分钟或任何您的页面会话设置的节点。

js 定时器：http://www.w3schools.com/jsref/met_win_setinterval.asp

希望对您有所帮助，如果用户仍在页面上，id 会在 5 分钟时使用计时器发送到服务器，或者在页面加载时发出信号。

在 60 秒的帧内获取用户的持续时间。甚至是页面上有名字的用户:)

【讨论】：

谢谢，这很有用！似乎有点复杂，但我明白了。我知道浏览器指纹识别，在这种情况下它不适用（成员可以并且将会从各种计算机访问 ERP）但感谢提供链接：我会保留它，这可能会证明有用。

【参考方案3】：

已经有人发过这类问题了。

希望这可以帮助你。

Detect if user has closed ALL windows for a website?

【讨论】：

考虑将 cmets 部分用于此类帖子。或者，如果您认为该问题可能已得到回答，请标记该问题。

谢谢，我知道了。 @phillip100 我现在应该删除我的答案吗？我认为这可能会违反规则。

感谢@ronan 提供的链接，但是当用户更改页面时，它并不能解决我的问题。请参阅下面的答案。