13
原文:揭开在线协作的神秘面纱 - OT算法 | AlloyTeam
作者:TAT.jay

相信大家或多或少都有使用过在线文档,国内的像我们在做的腾讯文档还有其他家的很多类似产品。今天主要为大家揭开在线协作的神秘面纱,那就是OT算法。

0x01 背景

在线文档,抽象一下,这些产品的模式都是富文本编辑器+后台,富文本编辑器产生内容,展示内容,然后后台负责保存。
富文本编辑器现在业界已经有很多成熟的产品,像codeMirror,这一块本身也是很复杂的一块,也不是咱们这次关注的重点方向。
不知道大家平常在用这些产品的时候有没有思考过一个问题,在线文档编辑的时候产生冲突怎么办?

0x02 举个栗子

举个很简单的例子,现在大家的文本都是‘aaab’,A用户在第3个字符行后面插入了一个‘c’,B用户在第3个字符行后面插入了一个‘d’,这个时候A这边看到的是‘aaacb’,B这边看到的是‘aaadb’,我们假设A用户先提交了数据,那其实最后预期的数据其实应该是‘aaacdb’,这样就最大的保存了每个人的输入。
那我们现在来看看正常情况下这里会发生什么:
A用户:

A本地已经是‘aaacb’了,过一会儿,后台告诉它B也编辑了,编辑的行为就是第3个字符行后面插入了一个‘d’,那A这边执行了这个行为,最终变成了‘aaadcb’

B用户:

B本地已经是‘aaadb’了,过一会儿,后台告诉它A也编辑了,编辑的行为就是第3个字符行后面插入了一个‘c’,那B这边执行了这个行为,最终变成了‘aaacdb’

从上面的模拟过程可以看到,A用户最后的结果其实是不正确的,但是B是正确的。

这里先解释一下大家可能会疑惑的地方:为什么B是过一会儿后台告诉它A编辑了,不是说A先提交了数据吗?
其实这里针对的是冲突场景,这里如果B在提交之前,已经收到后台告诉它A编辑了,那其实就是顺序编辑了,也就不是冲突了。所以这里指的是A,B几乎同时提交,但是A到达后台还是快一点的,也就是A,B在编辑的时候是不知道彼此的存在的。

真实的冲突场景其实不是这种简单的时序问题,这里我后面再介绍。

0x03 尝试解决

这里可能有一些聪明的小伙伴有了一些想法。

解决方案一:丢了丢了

这可能是最简单粗暴的方法了,我发现有冲突,就告诉用户,主子,咱这里有冲突了,臣妾解决不了啊。但是显然这会经常出现,然后主子就把你打入冷宫了。

解决方案二:锁

有些小伙伴想到,上面出现问题,还不是因为大家编辑了都立即应用了,我们编辑后不立即应用不就好了,而且历史告诉我们,有冲突加锁应该可以解决。那我们看看假如不立即应用,咱有没有什么处理办法:
A用户:

A本地已经是‘aaab’了,A编辑了,但是不应用,先发后台

B用户:

B本地已经是‘aaab’了,B编辑了,但是不应用,先发后台

后台:

后台先收到A请求,然后加了一个锁,然后收到了B请求,这时侯应该是加锁的状态,所以接受了A,拒绝了B

A用户:

A用户收到了后台的回复,告诉它你的提交我接收了

B用户:

B用户收到了后台的回复,告诉它你的提交被我拒绝了,因为冲突了

这样虽然能继续下去,但是好像还是不太行的亚子啊,B的提交还是丢了,所以好像和第一种简单粗暴的方法没啥区别

0x04 OT算法

顺其自然的,这个时候你会看到OT算法驾着七彩祥云来救你了~
其实回到上面的例子,本质问题还是因为后台通知大家的B的编辑行为看起来不太对。现在后台通知大家的是:

B的编辑的行为就是第3个字符行后面插入了一个‘d’

但是在A已经接受的情况下,正确的通知应该是:

B的编辑的行为就是第4个字符行后面插入了一个‘d’

假如我们把A提交的行为叫做A,B提交的行为叫做B,现在后台就是一个简单的转发功能,告诉A的是B,告诉B的是A,然后就出现问题了。所以后台应该更聪明一点,它应该学会一个招术,那就是把每个人提交的行为转变一下再告诉别人,其实这个技术就是OT算法。

OT算法全名叫Operation Transformation,你看从名字就对应了上面我说的转变算法。
假设我们的OT算法的转换功能叫transform,那transform(A,B)= A',B'。
也就是说你输入两个先后执行的行为,它会告诉你两个转换过后的行为,然后把A'行为告诉B,把B'行为告诉A,这样大家再应用就相安无事了。

上面的图是OT的经典菱形图,也就是说A会变成A'在B这边执行,B会变成B'在A这边执行。
这里实际抽象一下,用户永远就只有两个人,一个是自己,一个是服务端,只是服务端的操作可能来自很多人,如果不这样抽象,那一个个进行冲突处理可能会让你觉得无法理解。
那我们现在再来看看后台有了OT这个能力之后会发生什么:

A用户:

A本地已经是‘aaacb’了,过一会儿,后台告诉它B也编辑了,编辑的行为就是第4个字符行后面插入了一个‘d’,那A这边执行了这个行为,最终变成了‘aaacdb’

B用户:

B本地已经是‘aaadb’了,过一会儿,后台告诉它A也编辑了,编辑的行为就是第3个字符行后面插入了一个‘c’,那B这边执行了这个行为,最终变成了‘aaacdb’

现在A、B就一致了!

0x05 OT算法的实现

现在OT算法对我们来说就是一个黑盒,我们知道给一定的输入,它会有正确的输出,但是它是如何做到的呢?
在介绍它的实现之前,我们需要抽象一下我们的操作行为,在之前我们的描述都是

第3个字符行后面插入了一个‘d’

这里怎么转换成程序识别或者能用代码表达的呢?其实这也是OT的关键。
这里我直接揭晓答案:
所有对文本的操作都可以抽象成三个原子行为:

R = Retain,保持操作
I = Insert,插入操作
D = Delete,删除操作

那之前的行为

第3个字符行后面插入了一个‘d’

就会变成

R(3), I('d')

也就是保持三个字符后插入1个‘d’,其实应该也很好理解,这里的操作就像操作数组一样,不管干什么,第一步你得先找到操作的下标。
有了这三个原子以后,我们就可以看到:

A = R(3),I('c')
B = R(3), I('d')

一切准备就绪,我们可以开始看OT了,这里OT算法现在已经很成熟了,这里我以一个github上的repo为例:ot.js
我们可以看看它的核心代码(有删减,理解起来可能会比较复杂,感兴趣的可以深入思考一下):

// Transform takes two operations A and B that happened concurrently and
  // produces two operations A' and B' (in an array) such that
  // `apply(apply(S, A), B') = apply(apply(S, B), A')`. This function is the
  // heart of OT.
  // 上面这个公式就是OT的核心,它产生了A',B',同时保证执行结果一致,S就是我们开始的状态,可以把这个和菱形图对应起来
  // 整体执行流程有点像合并排序的过程。两个下标指针分别往前走
  
  TextOperation.transform = function (operation1, operation2) {
  // operation1, operation2就是我们的A,B
  
    var operation1prime = new TextOperation(); // 就是A'
    var operation2prime = new TextOperation(); // 就是B'
    var ops1 = operation1.ops, ops2 = operation2.ops;
    var i1 = 0, i2 = 0;
    var op1 = ops1[i1++], op2 = ops2[i2++];
    while (true) {
      // At every iteration of the loop, the imaginary cursor that both
      // operation1 and operation2 have that operates on the input string must
      // have the same position in the input string.
      // 其实这里就是说transform的核心是保证两者的下标一致,这样操作的才是同一个位置的数据
      // ...
      // next two cases: one or both ops are insert ops
      // => insert the string in the corresponding prime operation, skip it in
      // the other one. If both op1 and op2 are insert ops, prefer op1.
      // 如果A是插入操作,A'一定也是插入,但是B'就不一样了,因为A是插入,不管你B是啥,你先等等,所以retain一下,保证下标一致
      // 这里实际上有三种情况,A是插入,B可能是R,I,D
      if (isInsert(op1)) {
        operation1prime.insert(op1);
        operation2prime.retain(op1.length);
        op1 = ops1[i1++];
        continue;
      }
      // 如果B也是插入,那B’就是插入,但是你的A'也得retain一下,保证下标一致
      // 这里可能有两者情况,A可能是R,D
      // 实例化思考一下,A [R(3),I('a')],B [I('b')],那对于A'来说就应该是[R(4),I('a')]
      if (isInsert(op2)) {
        operation1prime.retain(op2.length);
        operation2prime.insert(op2);
        op2 = ops2[i2++];
        continue;
      }
      // ...
      var minl;
      if (isRetain(op1) && isRetain(op2)) {
        // R和R处理
      } else if (isDelete(op1) && isDelete(op2)) {
           //D和D处理
      } else if (isDelete(op1) && isRetain(op2)) {
       // D和R处理
      } else if (isRetain(op1) && isDelete(op2)) {
       //R和D处理
      }
    }
    return [operation1prime, operation2prime];
  };

这里就是OT的transform实现,本质上就是把用户的原子操作数组拿到以后,然后做transform操作,这里我只选了一小段来大概解析下,具体的可以看注释,其实原本的注释已经很全了。
其实上面那段代码,因为我们的原子操作只有三种,根据排列组合,最多只会有9种情况,只是上面把很多情况合并了,你要是不理解,也可以拆开,帮助理解。
其实上面的文件还有compose,invert等方法,但是其实transform才是我们理解的核心,其他方法大家感兴趣可以看看注释和下面贴的一些关于OT更详细介绍的文章。

0x06 OT算法的时序

简单的OT大家只要理解了,好像也并不是很难,但是其实真实情况下OT会比想象的还要复杂,因为之前说的菱形会无限拓展。

简单理解一下,就是A本地产生了两次编辑,B产生了一次。这里就必须要和大家解释一下之前遗留的时序问题了,不然可能无法理解。

之前说的时序都是指时间先后顺序,冲突也是指同时产生编辑。但是其实这里的同时不是时间上的同时,而是版本上的同时
也就是说我们需要用一个东西表示每一个版本,类似git的每次提交,每次提交到服务端的时候就要告诉后端,我的修改是基于哪个版本的修改。
最简单的标志位就是递增的数字。那基于版本的冲突,可以简单理解为我们都是基于100版本的提交,那就是冲突了,也许我们并不是同时,谁先到后台决定了谁先被接受而已。这里最夸张的就是离线编辑,可能正常版本已经到了1000了,某个用户因为离线了,本地的版本一直停留在100,提交上来的版本是基于100的。

那有了时序的概念,我们再看上面这个菱形,它可以理解成A和B都基于100提交了数据,但是在A的提交还没被后台确认的时候,A又编辑了,但是因为上一次提交没被确认,所以这次不会发到后台,这时服务器告诉它B基于100做了提交。

这种情况下如何处理,就有点类似于OT落地到实践当中,你怎么实现了,上面提到的github的那个repo的实现其实非常巧妙,你看完注释应该就能全部理解,这里给出代码链接

精华就在于它把本地分成了几个状态:

Synchronized 没有正在提交并且等待回包的operation
AwaitingConfirm 有一个operation提交了但是等后台确认,本地没有编辑数据
AwaitingWithBuffer 有一个operation提交了但是等后台确认,本地有编辑数据

剩下的就是在这三种状态下,收到了本地和服务端的数据,分别应该怎么处理

结语

其实OT对应的只是一种思想,具体怎么实现是根据具体情况来区分的,比如我们现在讨论的就是文本的OT,那有可能图的OT、表格的OT又是其他的实现。OT的核心就是transform,而transform的核心就在于你怎么找到这样的原子操作了,然后原子操作的复杂度决定了transform实现的复杂度。

上面这个repo只是帮你实现了文本的协同处理,其实对于在线文档来说,还有样式的冲突处理,感兴趣的可以自己搜索相关资料了解一下,建议精读一下ot.js这个库。

最后如果读完这篇文章你对在线协作有了一定的认知,那这篇文章的使命也就达到了,最后如果有写的不正确的地方,欢迎斧正~

参考资料

understanding-and-applying-operational-transformation
ot.js


AlloyTeam 欢迎优秀的小伙伴加入。
简历投递: alloyteam@qq.com
详情可点击 腾讯AlloyTeam招募Web前端工程师(社招)

clipboard.png


腾讯AlloyTeam
1.7k 声望4.8k 粉丝

AlloyTeam 欢迎优秀的小伙伴加入。


下一篇 »
搞懂闭包