腾讯文档-实时协同功能思路

目录

• 一.整体参考资料
• 二.实时通信问题
• 三.编辑冲突问题
• 四．已经实现实时协同的富文本编辑器Etherpad

一.整体参考资料

1. 富文本编辑器的技术演进之路
2. 谷歌文档开发思路
3. 实现一个多人协作有哪些难点？
4. 从零开始设计一个Web端多人协同编辑器思路

二.实时通信问题

1. 解释： 使不同用户在同一文档查看到内容的修改
2. 方法：使用WebScoket可以使不同用户在同一文档查看到内容的修改
3. 参考链接：http://www.ruanyifeng.com/blog/2017/05/websocket.html

三.编辑冲突问题

1. 解释：不同用户在同一时间对内容进行修改，会导致后面的用户修改失败，只会显示前一个用户修改的内容
2. 方法：编辑锁，分布式 Operational Transformation
3. 概述：首先，在前端需要定义方法来记录用户的操作，并传输到后端的分布式数据库实现数据的存储和合并，最后将修改的操作广播给页面。
4. 前端：用户操作定义为insert(插入), retain(保持),delete(删除), attributes(样式),并将它们封装成JSON数据传入后端。
   页面文档底层：建议使用 可编辑Div，也可以用H5的Canvas

• 样式：不可以使用html自带的execCommand方法，需要重写
  光标位置和选区位置：使用Selection和Range，查看HTML DOM接口
• 参考：
  • Quill富文本编辑器
  • Delta记录了用户操作 https://quilljs.com/docs/delta/
  • (需FQ） https://github.com/quilljs/delta
  • Delta演示 https://codepen.io/quill/pen/dMQGmq
  • 编辑距离算法（计算光标位置）
    https://hddhyq.github.io/2018/12/08/Levenshtein-distance-编辑距离算法/

5. 后端（node.js）：将JSON数据传入分布式数据库（如MongoDB）实现操作转换，在使用WebScoket广播给所有用户页面。

• 插件：ShareDB：基于JSON文档的操作转换（OT）的实时数据库后端
  • （需FQ）https://github.com/share/sharedb#readme
• 参考：
  • OT算法原理demo http://operational-transformation.github.io/
  • OT算法解释https://blog.csdn.net/tianshan2010/article/details/109695439

四．已经实现实时协同的富文本编辑器Etherpad

1. 开发文档
   https://etherpad.org/doc/v1.8.9/#index_what_can_i_do_with_this_api
2. 插件库
   https://static.etherpad.org/index.html
3. 官网
   https://etherpad.org/