仅仅28行代码,就能实现一个【协同文档】

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

协同文档

在平时的开发中,协同文档真的帮助到了我们很多,他可以应用到很多场景,比如:

  • 需求文档同步
  • 信息收集
  • 公司内部文档编写

所以现阶段协同文档也是市面上很火的一种趋势,比较火的产品有:

  • 企微文档
  • 飞书文档
  • 语雀
  • 等等。。。。

协同

想要实现协同文档,其实有一个最大的痛点,那就是 协同

通俗点说就是:两个人同时编辑同一个文档,就会有冲突,那么这个冲突应该怎么解决?

为了解决这个问题,市面上出现了两种算法(不是本文重点)

  • OT (Operational transformation)
  • CRDT(Conflict-free Replicated Data Type)

这不是本文重点,如果不想看可以直接跳到下面的代码实战~

OT

CRDT

实现协同文档

接下来开始实现一个简单的协同文档!!!

装库

我们需要先安装几个库

js 复制代码
npm i yjs y-quill 
      quill quill-cursors 
      y-websocket
  • yjs: 一个集成 CRDT 算法的同步库,是此次协同文档的核心
  • quill: 一个富文本编辑器
  • quill-cursors: 一个quill的插件,用于显示多个光标,因为多个用户共同编辑就会有多个光标
  • y-quill: 可以理解为他能将yjs和quill融合起来,实现协同
  • y-websocket: 一个yjs的库,作用是将数据同步到多个客户端

客户端

ts 复制代码
<div id="app"></div>

import * as Y from 'yjs';
import { QuillBinding } from 'y-quill';
import Quill from 'quill';
import QuillCursors from 'quill-cursors';
import { WebsocketProvider } from 'y-websocket';
import 'quill/dist/quill.snow.css'; // 使用了 snow 主题色

// 使用 cursors 插件
Quill.register('modules/cursors', QuillCursors);
const quill = new Quill(document.querySelector('#app'), {
  modules: {
    cursors: true,
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block'],
    ],
    history: {
      userOnly: true,
    },
  },
  placeholder: '林三心不学挖掘机...',
  theme: 'snow',
});
const ydoc = new Y.Doc(); // y 文档对象,保存需要共享的数据
const ytext = ydoc.getText('quill'); // 创建名为 quill 的 Text 对象
// 连接到 websocket 服务端
const provider = new WebsocketProvider('ws://localhost:1234', 'quill-demo-room', ydoc);
// 数据模型绑定,再绑上光标对象
const binding = new QuillBinding(ytext, quill, provider.awareness);

服务端

只需要在终端里运行

ts 复制代码
HOST=localhost PORT=1234 npx y-websocket

效果

现在就可以实现协同文档的效果啦!!!

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

相关推荐
kymjs张涛24 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵29 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62241 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
江城开朗的豌豆2 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
Sun_light2 小时前
5 个理由告诉你为什么有了 JS 还要用 TypeScript
前端·typescript
陈随易2 小时前
Kimi k2发布,效果比肩Sonnet4,价格与DeepSeek一致
前端·后端·程序员