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

标签 javascript jquery reactjs ractivejs real-time-updates

我正在构建一个大型实时协作 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 [浏览器兼容性还不现实]

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

最佳答案

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

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

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


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

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

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

关于javascript - JS - 如何跨同一网络应用程序的多个实例实时更新 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30700756/

相关文章:

javascript - 流程图 : how to add a beginning and ending tick?

javascript - 使用 jQuery 的 .focus() 在 Mac 上的 Firefox 中设置焦点

javascript - 在单击另一个 div 时为 div 中的高度变化设置动画

javascript - 如何避免重新渲染整个列表而不是在 React JS 中将新项目添加到 DOM 列表?

javascript - 在 React js 中点击回车键触发 onblur 事件

javascript - 类与函数返回对象

javascript - 在 [array] 内设置未声明的 {object} 的原型(prototype)属性

javascript - 如何在结果中突出显示搜索到的字符串?

javascript - 在每个列表元素中插入链接标签

javascript - props 验证中缺少功能组件 eslint 'date'