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

Posted 2023-02-25

【中文标题】如何使多个用户可以访问 iframe？

【英文标题】：How to make an iframe accessible by multiple users?

【发布时间】：2020-05-26 14:51:29

【问题描述】：

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

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

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

问题：

每个用户可能使用不同的浏览器，每个人的网站可能不同，也可能发生不同步。 模拟点击可能很困难。

服务器端方法：在服务器上只加载一次网站，然后将所有用户事件发送到服务器，并将网站的像素流回给用户。

问题：

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

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

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

【问题讨论】：

据我所知，只有 Google 能够通过他们的 Docs 和 Sheets 做到这一点。那个时候让我大吃一惊，今天依然让我大吃一惊。如果您设法与他们相等，请脱帽致敬。

@mplungjan 我在查找该文本时没有得到有用的结果。

@JeremyTille 您的意思是多个用户可以编辑一个文档？这听起来并不难做到，我认为它与这个不同，因为在这里我希望多个用户能够与 任何 网站进行交互，而不仅仅是编辑文档。

好吧，如果听起来不是很难做到，那你为什么要在 *** 上发布一个问题，询问人们如何做到这一点？ :) 我可以向你保证，这对我来说看起来很难完成。如果您可以轻松做到，那么对您有好处，请分享您的解决方案:)

@JeremyThille 但是编辑文档和我想做的事情是有区别的。

【参考方案1】：

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

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

【参考方案2】：

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

Live demo of collaborative editor Source code for demo

我建议使用 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/ 可以帮助您实现这一点。节点套接字也用于客户端多用户游戏，为两个用户提供相同的连接体验。 这将是一个客户端-服务器解决方案，以便您可以从服务器管理所有内容并为您的用户提供良好的体验。

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