仅仅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多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

相关推荐
wordbaby5 分钟前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
卿·静11 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia25 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia27 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub30 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw33 分钟前
hippy的主要原理
前端
子兮曰36 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068836 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97639 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖39 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript