Skip to content

Yjs基础介绍

Automerge 和 Yjs 两者简单对比:

对比点AutomergeYjs
性能较慢(v2 有改进)非常快(结构优化+GC)
内存使用较大(因保留完整历史)较小(支持垃圾回收)
社区活跃度中等
插件生态较少非常丰富(尤其是编辑器方向)
合并冲突处理清晰但占空间高效但实现复杂

基础介绍#

Yjs 是一个基于 CRDT 的高性能协作编辑框架,它将用户对文档的修改转化为增量更新操作,并通过内部的数据结构进行冲突处理与合并。Yjs 可以通过 WebSocket、WebRTC 等通信机制实现多方数据同步。开发者只需使用其提供的 API 即可轻松实现文本、数组等结构的实时协作,复杂的合并逻辑与光标状态同步等均由 Yjs 自动处理。

🏠Yjs架构设计#

image-20250409123912445

从上到下分别是:编辑器集成层、Yjs 核心层、通信与存储层。

顶层:编辑器适配层

这一层是用户直接交互的前端编辑器,例如:

Yjs 为这些编辑器提供了专用的绑定模块(类似于驱动程序),用于监听用户在编辑器中的操作(如文本插入、删除),并将其同步到 Yjs 的共享文档中。这样,用户的本地编辑行为会实时转换为可传播的 CRDT 更新操作,进而同步给其他协作者。

Yjs 支持大多数 主流编辑器的接入

因此,为了实现协同能力,每种编辑器都需要开发一个“绑定层”,用于在编辑器的数据结构与 Yjs 的文档结构之间进行双向转换(同步变更与应用变更)。这个绑定层正是实现协作功能的桥梁(起到一个连接编辑器和 Yjs 的桥梁作用)。

中间层:Yjs 核心

这一层是整个系统的核心,Yjs 负责以下任务:

所有编辑器的变更都会同步到这里,然后统一进行处理和广播,是整个协作系统的“中枢神经”。

底层:通信与存储模块

Yjs 本身不包含网络通信逻辑,而是通过插件方式提供以下通信与持久化能力:

开发者可以根据应用需求灵活选择这些模块进行组合,构建出具备离线能力、实时同步能力、跨设备同步能力的协作系统。

整个数据流的流向如下图所示:

Yjs优点概览#

1. 冲突处理稳健可靠#

Yjs 基于 CRDT 数据结构 实现分布式冲突自动合并机制,具备以下特性:

与传统的 OT(Operational Transformation)算法相比,CRDT 在复杂网络环境下更稳健,适用于异步协作和离线编辑。

2. 协作者状态同步#

Yjs 内置 Awareness 模块,用于同步协作者的界面状态信息:

这一机制让协作者能够“感知”他人的存在,提升协作体验,有效避免操作冲突。

3. 离线编辑支持#

Yjs 是天然支持离线编辑的框架:

离线编辑 + 自动同步 是构建 “Local-First” 应用的基础能力。

4. 版本快照与历史恢复#

Yjs 提供轻量级的文档快照机制:

5. 高并发协作能力#

Yjs 针对性能优化良好,适用于高并发场景:

在配合合适的通信层(如 WebSocket 广播服务)时,Yjs 表现出极高的扩展性。

6. 插件化生态 & 编辑器绑定支持#

Yjs 拥有丰富的绑定与适配模块:

编辑器对应绑定模块
ProseMirror / Tiptapy-prosemirror
Quilly-quill
Monaco(代码编辑器)y-monaco
Slatey-slate
CodeMirrory-codemirror.next

同时也有配套的通信模块(y-websockety-webrtc)和存储模块(y-indexeddby-leveldb 等),可以灵活组合使用。

总结一下:Yjs 用工程化方式实现了 CRDT 协作能力,是构建现代多人协作应用(富文本、代码、图形)的强大基石。借助 Yjs,开发者可以快速实现支持离线、实时同步和冲突自动合并的多人协作功能。

Yjs官网#

最后是关于 Yjs 的官网:

第一个是 Yjs 的正式官网,由作者 Kevin Jahns 维护,特点如下:

第二个是社区作品,这个页面是一个设计美观的 介绍性落地页(Landing Page),特点如下:


-EOF-