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