使用 Node.js 和 Socket.io 实时更新大型 HTML 内容

Question

我正在构建一个 Web 应用程序，它根据一个客户端所做的更改来更新每个客户端网页的 HTML 内容，为此我目前使用的是 Node.js 的 Socket.io。

我正在使用 HTML5 的 contenteditable 属性来允许客户端手动编辑我需要为其他客户端更新的 div 元素的内容。

我面临的问题是我不明白要通过 websockets 发送哪些数据来通知服务器，进而通知其他客户端所做的更改。

在添加和删除每个字符时发送整个 innerHTML 意味着通过 websocket 发送大量数据，这会导致性能差和速度慢。 发送附加数据不是一种选择，因为我们不知道数据在 div 元素中的哪个位置被附加、删除或编辑。

请注意，使用键盘并不是客户更改其网页副本的 HTML 内容的唯一方法。所需的 div 元素的数据会根据客户端使用 javascript 的几个活动而更改。

现在我需要知道如何通过 websockets 发送准确的更改信息，即使是最轻微的更改也能获得实时体验。

附：我不打算使用任何现有的模块，例如 Share.js，但欢迎提出建议。

Answer 1

这不是一个真正的“问题”，而是一个讨论，是一种“头脑风暴”的话题。它也非常基于意见，因为没有一种特定的做事方式可以谈论如此广泛的话题。

但我会抓住机会，并以我处理此问题的方式提供我纯粹的恕我直言（抱歉如此私人）：

• 文本版本控制 - 一种跟踪文本版本的方法，类似于 git，但使用字符位置而不是行。每个可编辑的文本都应该是版本控制的，应该有一个“主”来合并内容，并通知客户新版本。在客户端，版本更改（提交）的应用方式应与服务器合并的方式相同。关于提交顺序。
• 结构更新 - 这略有不同，因为结构更新仅涉及 HTML 结构，并且不需要版本控制（您仍然有可能需要版本控制，或者至少需要一些操作历史，并且有比赛涉及的条件）。编辑结构将通知服务器此类更改。它应该确保所有客户在结构上都“在同一页面上”。
• 参考 - 这可能很难。引用 HTML 元素可能非常简单（选择器），但有一个复杂性 - 例如，当存在 <ul> 和许多 <li> 时，通过索引引用每个元素 - 很公平，但是如果你在两者之间放置新元素呢？那会弄乱引用。所以引用应该是唯一的，并且完全取决于服务器将决定的同步 ID。您需要使用指向 html 元素的指针保存所有引用的列表，以便直接访问它们。
• 服务器 客户端 政治。如果您完全谈论同步体验，那么您必须遵循权威沟通政治。只有服务器真正决定事情，客户端呈现并只提供一些输入（请求）。例如，当客户端想要将元素添加到 HTML 中时，他发送请求，然后服务器决定并插入它，一旦它进入，它将发布此类事件，然后元素将出现在客户端上，然后他们可以编辑此内容元素。您可以通过“前进”来进一步增强它，而无需等待服务器，但这应该作为额外的层来完成，而不是主要逻辑的一部分。
• 当一个客户端在节点（元素/文本）上工作时，它应该是唯一可以工作的人（以防止冲突）。提交将被视为“进行中”，它应该是单版本提交。一开始，您只能在用户“完成”编辑文本或元素后进行更新。稍后添加此类过程的实时可视化功能。
• 您必须研究这将造成的流量。使用版本控制和基于事件的元素编辑 - 这将非常有效，但代价是服务器端实际上应该模拟整个 DOM 结构并进行合并和其他事情。

再次，这主要是基于意见的答案，并且不是一个小话题，它涉及许多领域。我认为就“纯粹”和“良好”的目标方法而言，而不是“最快的”，可能会有更简单的解决方案，但需要一些权衡..