如何使多个用户可以访问 iframe？答案

【问题标题】：How to make an iframe accessible by multiple users?如何使多个用户可以访问 iframe？
【发布时间】：2020-05-26 14:51:29
【问题描述】：

我想让多个用户可以查看同一个网站（一个所有人都同意的特定 URL）并且用户的所有事件将被共享，以便每个人都有相同的状态。这样您就可以使用多人的网站，但网站认为只有一个人，类似于您使用一台计算机多人。

我对如何做到这一点有两个想法：

客户端方法：每个人都使用iframe 加载相同的页面，然后它会检测用户的所有事件并将这些事件发送给彼此，因此每个人都具有相同的状态。

问题：
- 每个用户可能使用不同的浏览器，每个人的网站可能不同，也可能发生不同步。
- 模拟点击可能很困难。
服务器端方法：在服务器上只加载一次网站，然后将所有用户事件发送到服务器，并将网站的像素流回给用户。

问题：
- 将网站状态（其外观、像素）流回给所有用户可能会非常昂贵，但它可能只能更新实际更改的像素，而不是网站的所有像素。

因为方法 1 似乎不太可行，我想尝试方法 2，但我不知道从哪里开始。我是否让服务器在其浏览器中打开 URL 并让系统模拟浏览器上的点击？

解决这个问题的最佳方法是什么，是否有更多更好的方法？

【问题讨论】：

据我所知，只有 Google 能够通过他们的 Docs 和 Sheets 做到这一点。那个时候让我大吃一惊，今天依然让我大吃一惊。如果您设法与他们相等，请脱帽致敬。
@mplungjan 我在查找该文本时没有得到有用的结果。
@JeremyTille 您的意思是多个用户可以编辑一个文档？这听起来并不难做到，我认为它与这个不同，因为在这里我希望多个用户能够与任何网站进行交互，而不仅仅是编辑文档。
好吧，如果听起来不是很难做到，那你为什么要在 Stackoverflow 上发布一个问题，询问人们如何做到这一点？ :) 我可以向你保证，这对我来说看起来很难完成。如果您可以轻松做到，那么对您有好处，请分享您的解决方案:)
@JeremyThille 但是编辑文档和我想做的事情是有区别的。

【解决方案1】：

您似乎需要创建一个反应式应用程序。所以，你的网页将同时为许多用户提供任何内容，他们将能够几乎实时（毫秒）地与这个应用程序进行交互。所有用户都将能够看到所有交互。

我使用 Meteor 使用了上述场景，默认情况下它是反应式的。当然，您也可以使用其他框架，或者尝试使用一些巧妙的 javascript 自己操作客户端之间的通信的困难方法。

【讨论】：

【解决方案2】：

ProseMirror 是一个基于网络的开源编辑器，在设计时考虑到了协作编辑：

我建议使用 ProseMirror 作为基础，然后根据需要对其进行修改。 ProseMirror 定义了一个 text-based document data structure。 ProseMirror 将此数据结构呈现为基于 Web 的编辑器，但您可以根据需要呈现数据结构：

将文档数据结构呈现为网页。
点击网页会改变底层文档数据结构。
ProseMirror takes care of synchronizing the document data structure on all the clients。
其他客户端呈现更新后的文档。

如果您对完全从头开始创建自己的东西更感兴趣，我会研究 ProseMirror 是如何做到的：

有一个类似的问题，我更详细地介绍了：Creating collaborative whiteboard drawing application

【讨论】：

【解决方案3】：

对于不同步问题，您可以使用样式创建一个对所有人来说都一样的网站。就像所有浏览器和屏幕尺寸的固定尺寸一样。这将有助于向所有用户呈现相同的版本和相同的维度。
对于点击同步，您可以使用节点套接字。通过使用它，您可以为一组用户管理服务器端目录，并使用对等套接字共享相同的事件。这类似于群聊功能。 https://socket.io/ 可以帮助您实现这一点。节点套接字也用于客户端多用户游戏，为两个用户提供相同的连接体验。这将是一个客户端-服务器解决方案，以便您可以从服务器管理所有内容并为您的用户提供良好的体验。

希望这会有所帮助。如果您需要这方面的更多信息，请发表评论。

【讨论】：