协同编辑配置

编辑器基于 sharedbjson0 协议交互协作操作数据

客户端(编辑器)通过 WebSocket 与服务端建立长连接通信,编辑器每次的 dom 结构变更都将转换为json0格式操作命令(ops)发送到服务端并修改服务端数据后再分发给各个客户端

客户端

在演示 DEMO 中已经有根据常用需求提供了一份编辑器通过 WebSocketsharedb 使用 json0 协议交互的客户端代码

React & Vue 通用

//实例化协作编辑客户端,需要传入当前编辑器实例
const ot = new OTClient(engine);
// 这里不再需要使用 engine.setValue。只需要在连接的时候把 value 传给 OTClient。在连接到服务端后,如果服务端没有该文档将以默认值创建,否则就返回服务端的最新文档数据
// 连接协同服务端,如果服务端没有对应docId的文档,将使用 defaultValue 初始化
// url 服务端ws链接
// docId 文档的唯一识别id
// defaultValue 在服务端如果docId对应的文档不存在,将会以这个值创建一个新文档
ot.connect(url, docId, defaultValue);
ot.on('ready', (member) => {
console.log('OT Ready');
});

这份代码已经能满足基本的编辑需求,如果需要更多功能可自行扩展

默认的演示代码是关闭协同的,需要在这里启用:

https://github.com/red-axe/am-editor/blob/master/examples/react/editor.tsx#L102 这个位置需要修改 IS_DEV 为 false

服务端

ot-server 是使用 nodejs 创建的一个网络服务,使用 WebSocket.Server 处理客户端的 WebSocket 连接

ot-server

演示 DEMO 中仅提供了模拟的用户数据,在生产环境中我们需要客户端传输token参数进行身份效验

使用命令

# 开发环境
yarn dev
# or
# 正式环境
yarn start

协同数据

sharedb 会把每次客户端与服务端的操作数据保存为日志,并且在每次操作后都会把最新生成的文档数据保留下来。这些操作都在 ot-server 中进行

sharedb 提供了两种方式保存这些数据

  • 内存
  • 数据库

在默认不提供数据库的情况下,sharedb 默认把这些数据都保存在内存中,但是这些数据并不能持久化,重启后将会消失,在生产环境中并不建议使用。

如果需要使用内存存储测试,ot-server -> client 文件中的这段代码 constructor(backend = new ShareDB({ db: mongodb })){db: mongodb} 删除即可,相应的也需要把 mongodb 上面的引用及实例化删除

演示 DEMO 中使用了 mongodb 数据库保存了所有的数据持久化,所以我们需要安装 mongodb 数据库

  • 可以在 MongoDB 官网下载 安装符合自己环境的数据库版本
  • 安装完成后,创建一个数据库,并设置用户名、密码等权限
  • 最后把数据库名称、用户名、密码等信息配置到config 就可以正常启动 ot-server

Linux 安装教程

Windows 安装教程 Windows 可以直接下载 msi 版本的,安装比较容易,下一步下一步。。。