架构：浏览器中的 Javascript 事件跟踪答案

【问题标题】：Architecture: Javascript event tracking in browser架构：浏览器中的 Javascript 事件跟踪
【发布时间】：2020-04-25 08:37:50
【问题描述】：

我想为网络事件制作一个自定义跟踪系统。我研究了多个令人兴奋的系统，但我想要一些非常简单但非常准确的东西。

我希望能够跟踪以下内容：

页面浏览量甚至
该页面上的时间

或：

视频开始播放事件
视频观看时间

我最初的想法是做一个简单的 javascript 报告给服务器，但是如果用户关闭窗口会发生什么？我怎么知道他们停止观看？我怎样才能获得精确到 1/10 秒的测量结果？所以我想到了一个 websocket 解决方案，因为它知道用户何时打折。我最终选择了 Socket.io，但我想确保没有更好或更智能的方法来实现这一目标？

你会如何应对他的挑战？设计这个的最聪明的方法是什么？

【问题讨论】：

如果报告准确，是否也需要立即进行，或者是否可以接受延迟，例如在下一页加载时，在（精确、准确的）报告发送到服务器之前？
对不起！这有点新意！好吧，在事件“完成”后记录是可以接受的，这意味着另一个事件被触发，比如加载一个新页面。

标签： javascript node.js sockets websocket socket.io

【解决方案1】：

经常向服务器报告的 Websocket 连接也是我的第一个想法，但如果你每秒发送 10 条消息，即使这对于 Websocket 来说也可能太多了，尤其是在连接性不是一流的情况下。

由于服务器不需要绝对立即获取信息，因此请考虑 批处理 请求 - 每 0.1 秒将信息保存/更新到本地存储中，但不要将其发送到服务器 -相反，每隔 30 或 60 秒，或在页面加载时，获取本地存储中的当前数据并将其发送到服务器，并清除本地存储，以便一分钟后的下一个请求不会发送重复数据。

【讨论】：

我想发送一个“开始事件”和一个“结束事件”并计算差异。如果我使用套接字，我还会知道用户何时断开与套接字的连接并关闭并丢失“结束事件”？
您不必让服务器跟踪事件 - 全部在本地浏览器上完成。如果用户关闭页面，您的本地 Javascript 可以检测到它，然后您可以在下一个页面加载时将信息发送到服务器。