javascript - JS - 如何跨同一网络应用程序的多个实例实时更新 DOM？

Question

我正在构建一个大型实时协作 Web 应用程序。它是一个支持 HTML、CSS 和 JS 编程的 Web IDE，以及一个可以反射(reflect) JSFiddle、Plunker 等结果的舞台区域。

现在，不同之处在于，它将支持多用户实时协作，查看 Web 应用程序的同一实例的人们将能够一起编写代码，以反射(reflect)所有打开的实例。我已经弄清楚了竞争条件、 session 管理等

我遇到的麻烦是

how to reflect the typing and/or deleting along with caret positioning across these multiple instances giving the illusion that when one person is typing, he is actually typing on all the instances.

另一件事是 RactiveJS说是

updates only those parts of the page that are out of date. Tedious DOM manipulation is a thing of the past.

这在他们的 Demo 中是一个非常好的效果。想象一下，你在 JSFiddle 上，你不必每次都重新运行。所以，我的问题是，他们是怎么做到的？它背后的概念是什么？

我不想为此使用任何库。我在 JS 方面相当不错。我很难弄清楚算法。

我考虑过的事情:

1. 脏检查[但是，它是脏的吗？]
2. Delta 差分 [但喜欢 ReactJS , 它每次都必须更新整个应用程序状态]
3. Object.observe [浏览器兼容性还不现实]

所以，如果您有什么可以帮助我朝着正确的方向前进，我将非常感激。

Answer 1

允许同时编辑/操作对象/文本等的实时协作工具通常使用 Operational Transformation algorithm 的变体。 .

OT 不是 理解起来很简单，更确切地说是实现，所以我建议你看看已经准备好的库，例如:

• > ShareJS
• > Racer for Node

OT 以一些非常基本的方式工作，类似于 GIT

---

作为对您在评论中发布内容的更新。

你说你正在使用 Python。我想您不会重建整个代码库，但请记住，实时协作工具通常很多都受益于使用事件驱动的服务器端语言。

由于您使用的是 Python，因此您可以查看 Twisted Framework