html 使用接口判断权限相关，以跳转页面 socket 数据读取、保存、缓存 接口：由 socket 调用以保存数据并生成历史记录

# 前端

word 使用 tipap 框架（一个基于 ProseMirror 的在线编辑器框架） 多人协作使用 yjs

1. 访问 api/doc/info 接口以校验权限
2. 权限校验完成后，创建 tiptap 实例
   1. 本地创建 YDoc
   2. 生成 title 和 prosemirror 子节点（title 不属于 tiptap，所以需要单独处理，prosemirror 用于存放 tiptap 内容）
   3. 绑定 prosemirror 与 tiptap 变更同步
   4. 创建 socket 连接（携带 token 及 uid）
   5. 监听 ydoc 变更及光标位置
3. socket 服务
   1. 校验 token
   2. 校验服务器文档状态： 正在恢复历史断开连接
   3. 校验客户断文档版本号：重连才会携带，不一致通知、客户断刷新页面
   4. 下发服务器文档版本号
   5. 下发服务器文档内容
4. 记录版本号，掉线重连时携带（掉线后版本号有变化刷新页面，版本号 = 恢复的历史 ID || 文档 ID）
5. 使用服务器下发内容渲染文档内容
6. tiptap 实例 initSuccess编辑按钮可点击、或自动进入编辑态
7. 编辑内容或标题 ydoc 发现变更并发送
8. 服务端：收到 ydoc 变更下发给其它端
9. 客户端：收到服务器变更，yjs 合并内容
10. 掉线，打开断网遮罩
    1. 携带 服务器文档版本号 重连
    2. 恢复同步后

京ICP备2022027737号
Copyright © 2022 - present @wangxiang