在当今数字化时代，实时协作变得越来越重要。无论是团队项目、文档编辑还是在线学习，能够让多位用户同时编辑同一文档的能力都是至关重要的。在这篇文章中，我们将深入探讨如何使用 Yjs 创建一个简单的实时编辑器。
什么是 Yjs？
Yjs 是一个强大的 JavaScript 库，旨在支持实时协作和数据同步。它提供了一种高效的方式来管理共享状态，使得多个用户能够同时编辑而不会产生冲突。Yjs 的核心思想是使用“增量数据结构”，确保数据在多个客户端之间能够无缝同步。
为什么选择 Yjs？
- 高效性：Yjs 采用了增量更新的方式，减少了网络带宽的使用。
- 灵活性：可以与多种前端框架（如 React、Vue、Svelte）无缝集成。
- 可扩展性：支持多种数据结构和存储选项，易于扩展和定制。
实现一个简单的实时编辑器
1. 创建 Vite 项目
首先，我们使用 Vite 创建一个新项目：
npm create vite yjs-example
cd yjs-example
npm install
2. 安装依赖
安装所需的依赖包：
npm install quill yjs y-websocket y-quill
-
quill: 这是一个现代的富文本编辑器，允许用户创建和编辑格式丰富的文本。它提供了简单易用的API和多种自定义选项。
-
y-quill: 这个包是一个适配器，将 Quill 编辑器与 Yjs（一个用于实时协作的库）连接起来，使得多个用户可以实时共同编辑同一个文档。
-
y-websocket: 这个库提供了通过 WebSocket 实现的 Yjs 协作支持。它允许不同的客户端之间通过 WebSocket 进行实时的数据同步。
-
yjs: Yjs 是一个用于构建协作应用的框架，支持实时协作和数据同步。它提供了一种强大的方式来管理共享状态，确保多个用户可以同时编辑而不冲突。
这些包通常一起使用，以便在 Web 应用中实现富文本编辑和实时协作功能。
3. 创建实例
在 src/main.js 中，内容如下：
import Quill from "quill";
import "quill/dist/quill.snow.css";
import * as Y from 'yjs'
import { QuillBinding } from "y-quill";
import { WebsocketProvider } from 'y-websocket'
// 创建一个新的 Quill 实例（富文本编辑器），绑定到 ID 为 "app" 的元素，并使用 "snow" 主题
const quill = new Quill("#app", {
theme: "snow"
});
// 创建一个新的 Y.Doc 实例
const doc=new Y.Doc()
// 从 Y.Doc 实例中获取名为 'quill' 的文本
const yText=doc.getText('quill')
// 创建一个新的 QuillBinding 实例，将 Y.Doc 的文本与 Quill 实例绑定
new QuillBinding(yText, quill)
// 创建一个新的 WebsocketProvider 实例，连接到本地的 WebSocket 服务器，并将 Y.Doc 实例绑定到 'quill' 命名空间
new WebsocketProvider('ws://localhost:1234', 'quill', doc)
注释 我帮你用AI生成了，其实就是：创建富文本-》创建quill并拿到实例-》绑定副文本和quill实例-》把quill绑定到websocket实现协同。这里的quill是个房间名，不同的房间名创建不同的场景。
4. 启动 WebSocket 服务器
为了实现实时协作，我们需要启动一个 WebSocket 服务器。可以使用 Yjs 提供的 WebSocket 服务器：
npx y-websocket-server
这将在 localhost:1234 启动服务器。
npx是node自带的启动命令，可以用来启动node_modules中的模块
6. 启动应用
最后，启动 Vite 开发服务器：
npm run dev
7. 测试实时协作
在多个浏览器窗口中打开应用，你将看到实时协作的效果。
总结
node的生态圈现在是越来越强大，各种成熟的第三方模块应有尽有，刚入门的小伙伴可能看到这些乱七八糟的包比较头疼，其实都是别人封装好的js，稍微学下会调用就好。
通过使用 Yjs，我们能够轻松构建出强大的实时协作应用。无论是开发团队项目还是学习工具，Yjs 都是一个理想的选择。希望这篇文章能够帮助你入门 Yjs，并激励你探索更多的可能性！
参考资料
希望这篇帖子能够满足你的需求！
