騰訊文檔-實時協同功能思路

目錄

• 一.整體參考資料
• 二.實時通信問題
• 三.編輯沖突問題
• 四．已經實現實時協同的富文本編輯器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/