使用Node.js和Socket.io实时更新大型HTML内容
我正在构build一个Web应用程序，根据一个客户端所做的更改来更新每个客户端的Web页面的HTML内容，为此我使用了Node.js的Socket.io。
我正在使用HTML5的contenteditable属性来允许客户端手动编辑我需要为其他客户端更新的div元素的内容。
我面临的问题是，我不明白通过websockets发送的数据通知服务器，反过来，其他客户端所做的更改。
在添加和删除每个字符时发送整个innerHTML意味着通过websockets发送大量的数据，导致性能差和速度慢。 发送附加数据不是一个选项，因为我们不知道在div元素的哪个位置数据被添加或删除或编辑。
请注意，使用键盘并不是一个客户端可以更改其网页副本的HTML内容的唯一方式。 所需div元素的数据根据客户端使用javascript的几个活动而改变。
现在我需要知道如何才能通过websocket发送确切的变化信息，甚至稍作修改即可获得实时体验。
PS我不打算使用任何现有的模块，如Share.js，但欢迎提出build议。
这不是一个真正的“问题”而是一个讨论，会是一个“头脑风暴”的话题。 同样也是基于舆论的，因为没有一个特定的方式来处理这么广泛的话题。
但我会冒险，并提供我的纯粹恕我直言，我会这样做（抱歉如此个人）：
- 文本版本控制 – 一种跟踪文本版本的方式，类似于git，但使用字符位置而不是线条。 每个可编辑的文本应该是版本控制的，应该有一个“主”合并在一起，并通知客户新版本。 在客户端，应该像服务器合并一样应用版本更改（提交）。 就承诺订单而言。
- 结构更新 – 这是稍微不同的，因为结构更新只涉及HTML结构，并不需要版本控制（仍然有机会，你会想要版本控制，或者至less有一些行动的历史，并涉及到赛车条件）。 编辑结构将通知服务器这种变化。 它应该确保所有的客户关于结构“在同一页面上”。
- 参考 – 这可能很难。 引用HTML元素可以非常简单（select器），但是有一个复杂性 – 例如当
<ul>带有许多<li>，通过索引引用每个元素 – 足够公平，但是如果将新元素放在中间？ 这会弄乱引用。 所以引用应该是唯一的，完全依赖于服务器决定的同步标识。 您需要保留指向html元素的所有引用的列表，因此可以直接访问它们。 - 服务器<>客户端的政治。 如果你正在充分谈论同步的经验，那么你必须遵循权威的交stream政治。 哪里只有服务器真正决定的东西，客户端渲染，只提供一些input（请求）。 例如，当客户想要将元素添加到HTML中时，他发送请求，然后服务器决定这样做，并插入它，一旦进入，它将发布这样的事件，然后元素将出现在客户端上，然后他们可以编辑这个内容元件。 你可以通过“前进”来进一步增强它，而不用等待服务器，但是这应该作为额外的层而不是主逻辑的一部分来完成。
- 当一个客户端在节点 （元素/文本）上工作时，它应该是唯一可以在其上工作的人（以防止冲突）。 提交将被视为“正在进行”，它应该是单一版本提交。 一开始只有用户“完成”编辑文本或元素时才能更新。 后来又增加了这种过程的实时视觉function。
- 你必须研究这将造成的交通量。 使用版本控制和基于事件的元素编辑 – 这将是非常有效的，但成本将是服务器端应该实际上模拟整个DOM结构和合并等东西。
这又是以意见为主的答案，并不是一个小题目，它涉及很多领域。 我认为，以“纯”和“好”的方式来实现目标，而不是“最快”的方法，可能会有一些更简单的解决scheme，有一些权衡。