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

相关推荐
花花鱼几秒前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机6 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5