我正在构建一个Web应用程序，该应用程序会根据一个客户端所做的更改更新每个客户端网页的HTML内容，为此，到目前为止，我正在使用Node.js的 Socket.io。
我正在使用HTML5的contenteditable属性来允许客户端手动编辑div元素的内容，我也需要为其他客户端更新这些元素。
我面临的问题是，我不明白通过 websocket 发送哪些数据来通知服务器，进而通知其他客户端所做的更改。
在添加和删除每个字符时发送整个内部 HTML 意味着通过 websocket 发送大量数据，这会导致性能不佳和速度缓慢。 发送附加的数据不是一种选择，因为我们不知道数据在div 元素中的哪个位置被附加、删除或编辑。
请注意，使用键盘并不是客户端更改其网页副本的 HTML 内容的唯一方法。所需的div 元素的数据会根据客户端使用 javascript 的几个活动而更改。
现在我需要知道如何通过 websocket 发送确切的更改信息，即使是最轻微的更改，以获得实时体验。
附言我不打算使用任何现有的模块，如共享.js但欢迎提出建议。
这不是一个真正的"问题"，而是一个讨论，将是一种"头脑风暴"的话题。此外，它也是基于意见的，因为没有一种特定的方法来谈论如此广泛的话题。
但我会抓住机会，并以我处理这个问题的方式提供我的纯粹恕我直言(抱歉如此个人化)：
- 文本版本控制- 一种跟踪文本版本的方法，类似于 git，但使用字符位置而不是行。每个可编辑的文本都应该受到版本控制，应该有一个"主"来合并内容，并通知客户端新版本。在客户端，版本更改(提交)的应用方式应与服务器合并相同。关于提交顺序。
- 结构更新- 这略有不同，因为结构更新仅涉及 HTML 结构，并且不需要版本控制(您仍然有可能需要版本控制，或者至少需要一些操作历史记录，并且涉及竞争条件)。编辑结构将通知服务器此类更改。它应该确保所有客户端在结构方面"在同一页面上"。
-
引用- 这可能很难。引用HTML元素可以非常简单(选择器)，但是有一个复杂性 - 例如，当有许多
<li><ul>时，按索引引用每个元素 - 足够公平，但是如果你把新元素放在两者之间呢？这会弄乱引用。因此，引用应该是唯一的，并且完全取决于服务器将决定的同步 ID。您需要使用指向 html 元素的指针保留所有引用的列表，以便直接访问它们很容易。 - 服务器<>客户端政治。如果你完全谈论同步体验，那么你必须遵循权威的沟通政治。只有服务器真正决定事情，客户端呈现并仅提供一些输入(请求)。例如，当客户端想要将元素添加到HTML中时，他发送请求，然后服务器决定这样做，并插入它，一旦它进入，它将发布这样的事件，然后元素将出现在客户端上，然后他们可以编辑该元素的内容。您可以通过"前进"来进一步增强它，而无需等待服务器，但这应该作为额外的层来完成，而不是主逻辑的一部分。
- 当一个客户端在节点(元素/文本)上工作时，它应该是唯一可以在它上工作的人(以防止冲突)。提交将被视为"正在进行"，并且应该是单个版本提交。一开始，您只能在用户"完成"编辑文本或元素后进行更新。并在以后添加此类过程的实时可视化功能。
- 您必须研究这将造成的流量。通过版本控制和基于事件的元素编辑 - 这将非常有效，但成本将是服务器端实际上应该模拟整个 DOM 结构并进行合并和其他事情。
同样，这主要是基于意见的答案，并不是一个小话题，它涉及许多领域。我认为就"纯粹"和"良好"的目标方法而言，而不是"最快"，可能只是有一些权衡的更简单的解决方案。