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

相关推荐
Myli_ing4 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风7 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟16 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾37 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript