在项目中,用户 A 反馈在使用后台编辑了某内容后,过了一段时间重新进入页面发现内容还是很久前的版本,自己的保存没有生效。经过查找日志发现了原因,是期间有多位用户编辑过该内容,用户 B 点击保存时由于自己页面的内容还是很早之前的,覆盖了用户 A 编辑后的版本。
现在前端和服务端已经商讨出了该问题的解决方案,但个人对于这个课题比较感兴趣,所以对此进行了一个较为深入的调研。
在追求高用户体验的场景,例如各种在线文档,几乎都会采用协同编辑的方案,保证多人在线实时编辑。要实现协同编辑,主要需要实现几个关键技术点:
- 用于增量传输的 Diff 算法:在协同编辑领域,常用的两种技术为 OT(Operational Transformation) 和 CRDT (Conflict-free Replicated Data Type)
- 文档的实时更新:可以采用 WebSocket 或者是轮询的方法,在追求性能和体验的情况下,通常我们会选择 WebSocket
- 更新内容的富文本编辑器:此项是可选的,通常多人在线编辑的场景需要支持丰富的内容编辑,因此需要一个富文本编辑器,普通的文本编辑场景不需要。
OT
OT 是多用于协同编辑领域的一种技术,正如其英文全称 Operational Transformation 一样,分为两个步骤:首先是将用户的编辑行为转换成可枚举的操作(Operational);如果是有多人操作同时进行,则对这些操作进行转换(Transform