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

Question

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

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

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

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

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

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

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

Answer 1

这实际上不是一个“问题”，而是一个讨论，属于“头脑 Storm ”主题。它也非常基于意见，因为没有特定的一种方式来谈论如此广泛的话题。

但我会捕获机会，并以我处理这个问题的方式提供我纯粹的恕我直言(抱歉这么个人化):

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

同样，这主要是基于意见的回答，而且不是一个小话题，它涉及到很多领域。我认为就目标的“纯粹”和“良好”方法而言，而不是“最快”，可能只有一些折衷的更简单的解决方案..