javascript - 如何可靠地实时重建 DOM 以进行共同浏览(镜像网页使用)

Question

有一些 SaaS 工具 [ 1 , 2 ] 为您提供一个可在您的站点上运行的插件，以便您可以查看用户如何远程与您的网站进行交互。

我猜这是通过将 DOM 更新流式传输回远程服务器来实现的，但我不确定。我真的很想知道这项技术是如何工作的，以及是否有工具可以完成类似的任务。

问题来了:他们是怎么做到的？我们如何通过使用已安装的 Javascript 片段可靠地“共同浏览”？我知道一些使用 WebRTC 的解决方案，但似乎还没有浏览器支持

Answer 1

这被称为 session replay .

I'm guessing this works by streaming DOM updates back to a remote server

不，它可能不关心 DOM 更新。该脚本将捕获每一个输入事件，包括按键、鼠标移动、鼠标点击、滚动事件等。这些是 UX 设计师在评估其页面设计时通常关心的。它们还可能捕获 DOM 的初始状态。

如果这些插件只是用于数据采集(例如在 A/B 测试中)，我认为插件脚本实际上不会直播这些事件。它可能会捕获它们，将它们存储在某种压缩数据结构中，并在用户离开页面时或定期将其发送给服务提供商。

实时流式传输肯定是可能的，而且似乎这就是共同浏览插件所做的。 (显然还有一个反向 channel - 一个巨大的安全风险! - 远程触发鼠标点击等)。 WebRTC(也可以提供完整的视频)可能是一种方法，但是 web socket就足够了。

可以在 https://togetherjs.com/docs/#technology-overview 找到一些关于 togetherjs 特别是如何做到这一点的文档。 .