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

相关推荐
栈老师不回家14 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙20 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠24 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds44 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm