如何在同一个web应用的多个实例中实时更新DOM

JS - How to update DOM in realtime across multiple instances of the same web app?

本文关键字：实例 实时更新 DOM 同一个 web 应用      更新时间：2023-09-26

我正在构建一个大规模的实时协作web应用程序。它是一个Web IDE，支持HTML, CSS &JS编程和一个舞台区域，将反映的结果，如JSFiddle, Plunker等

现在，它将支持多用户实时协作，查看web应用程序的相同实例的人将能够一起编写代码，这将反映所有开放实例。我已经弄清楚了竞争条件，会话管理等

我遇到的问题是

如何反映插入符号的输入和/或删除在这些多个实例中给人一种错觉，当一个人在打字，他实际上是在所有实例上打字。

另一件事是RactiveJS说它

只更新页面中过期的部分。乏味的DOM操纵是过去的事了。

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

我不想为此使用任何库。我很擅长JS。我很难弄清楚这个算法。

我考虑过的事情:

  1. 肮脏的检查[但是，它是肮脏的，对吗?)
  2. Delta difference[但像ReactJS一样，它必须每次更新整个应用程序状态]
  3. 对象。观察[浏览器兼容性还不现实]
所以，如果你有什么可以帮助我在正确的方向，我将非常感激。

实时协作工具，允许并发编辑/操作对象/文本等，通常使用操作转换算法的一种变体。

OT 并不容易理解，而是更容易实现，所以我建议您看看已经准备好的库，例如:

  • ShareJS
  • race for Node

OT的工作原理与GIT

类似。

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

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

既然你使用的是Python，你可以查看Twisted Framework

相关文章：