ShowMeBug 创始人 &CEO 李亚飞在 10 月份的「RTE2021 实时互联网大会」中，围绕《让实时协同的框架绘图变得丝滑起来》的主题做了技术干货的分享，以下是主题分享精华版全文——
ShowMeBug 创始人 &CEO：李亚飞
明天十分荣幸来到这里跟大家做一场十分技术化的分享，
在开始之前我先介绍一下我集体的状况，我是 2009 年在深圳开始倒退，有十多年的全栈工程师教训，14 年的时候开始独立守业，到当初曾经创立了三家公司，这是我第三家公司。2019 年 6 月份开始启动 ShowMeBug 这个我的项目，次要帮忙工程师解决在线面试、筛选、评估的难题。
明天的话题也是探讨对于《如何构建深度架构绘图的前端体验》，我将带着大家一起，把角色换成工程师的身份来感触整个架构选型，以及探讨各个细节和挑战。
ShowMeBug 间断拿了三年的融资，有大几百家的客户，咱们正好在这个档口上，再讲到 WebRTC 的痛，咱们深有体会，不论兼容性问题，还是挪动端的各个点，咱们十分期待核心技术的演进。
明天分享的内容将细分为以下五点：
第一、什么是实时协同的架构绘图；
第二、实时协同框架绘图的核心技术——协同算法；
第三、实时协同框架绘图的核心技术——鼠标同步；
第四、实时协同框架绘图的核心技术——组建同步；
第五、实时协同框架绘图的核心技术——视角同步。
什么是实时协同的架构绘图？
首先看实时协同架构绘图技术的外围，我作为十多年的技术研发最大的领会是，任何技术最终都须要给商业价值提供十分外围的输入，所以咱们来看一下架构的挑战。在分享之前，我先给大家播放一下视频，先感受一下成品。
这个是咱们最终的成品，咱们把云端绘制架构图，绘制流程图，绘制所有技术类相干的产品逻辑，都实现了双人在线上无缝丝滑的体验，整个过程咱们大略花了一年的工夫去迭代研发。
最大的外围价值点是在线上实现整个架构、交换、沟通、合作，是十分爽滑的感觉。具体咱们能够看一下架构选型的外围计划：
首先，咱们抉择找这些点，最外围的是先找到一个终点，比方音视频的终点外围是找到 WebRTC，咱们用的是 MxGraph，最根底的开源组件，在下面会做十分多的性能板块，外围特点是全副结构化构建底层数据，有主动的画布，整个导出能够做到全结构化的文档，如果 WebRTC 最好的形式是可能很容易扩大，可能以咱们的业务需要扩大很多点，这一点就须要做的十分充沛。
在整个过程中抉择了十分多可能的技术架构、对于绘图板块的外围业务点，比方 jsPlumb、JointJS、QuneeJS，这个是商业帮忙图形库的解决方案，这对整体社区资源，还有文档方面都比拟有挑战，整体来说抉择一个可能自我掌控、很好的去拓展的计划是比拟无利的，尤其是在这些点上要把握十分外围的技术劣势。
实时协同框架绘图的核心技术——协同算法
以上其实只是实现工作的 10%，接下来另外一个外围话题就是：咱们如何丝滑实现体验？
这里有两个外围算法给大家解释一下，第一个最罕用的外围文档合作算法是 OT 算法，这个算法是 90 年随同着谷歌的科学家开始打造的规范，之后因为这个技术有很大的挑战，到 94 年、95 年才有一些文档零碎实现进去，目前为止实时协同的数据，可能会存在丢一些点的问题，且 OT 算法有简单的机制，以及排队的构造，这就要求前端也须要实现排队的算法。
核心理念就是把所有的操作转成三个操作，加、减和挪动，把所有的货色都变成三个操作，通过数学公式，在服务端进行双向的解决，而后服务端再分发给各个端，这就是对于轻量级文档的技术。
这一块也是咱们十分外围的算法，会利用在协同编程上，打造云端的编程环境。在这个板块里咱们并不是间接选用这个技术，而是采纳十分有点取巧，然而又十分酷的点，咱们叫做 Diff/patch 算法，针对性的一个一个比对异同，再利用到每一个具体的节点上，调整完发送到另外一个端，AB 两个用户之间就能够进行很好的同步。
这个是 Diff/patch 外围的算法实现，大家能够简略的过一下。首先拿到每一个对象，创立一个节点就会创立新的对象，跟对端比照，咱们能够看到两头是不是多了？如果多了就会解决，如果有更新的操作，咱们开始 Diff 进去而后造成一个 patch。外围的算法是这样一直的循环的，因为咱们数的构造最大的长处是永远不会循环死锁。
Diff/patch 流程图
这个模式相比 OT 算法来说很容易掌控，它的延时和各个点十分扎实，惟一有一个挑战，然而咱们在技术选型架构上须要思考其中的点。偶然会有网络失落或者是一个状态可能会在过程中有非常低的机率，失落一个小的图形，下一次更新的时候，或者有人动一下马上就会进入到最终的状态，这种点是万分之一，或者都不到万分之一来换取一个清晰的架构，这个事件我感觉是十分值的。
这个是代码的实现，大家简略过一下，外围接口是 CreatePatch，在每个节点上就会把加操作对对端是减操作，如果挪动操作单方是一样的，通过这种形式进行配对，这边是整个算法外围，大家能够看看：
看起来非常简单，然而真正实现的时候能够想一下这个大前端的工程调试挑战或者难点就会十分大，这种技术能够利用于将来很多理论，构建一个云端实时互动的交互场景。
这个是最终的 Apply，反向利用的外围代码，外围代码是非常少的，就几个外围操作。
实时协同框架绘图的核心技术——鼠标同步
当这个问题解决完之后，那就意味着一个大的问题解决了，大多数市面上比如说有一些相似的产品就做到那个水平，但针对业务场景需要就须要有一个十分强的，能不能有一种丝滑的感觉，咱们须要做到一个十分重要的能力就是鼠标的同步，鼠标同步大家能够想一下这种场景下一个微小的挑战，什么工夫发送一个鼠标状态到对端，十分多人的时候能够想到两头会遇到一个微小的渲染的压力，刚开始实现的那个计划感觉卡卡的，大家能够感觉到挪动沟通下面鼠标状态会有一些提早。
实现这个技术手段的时候利用到架构选型的劣势，跟咱们再追加一些外围的个性，第一咱们用的是，一个是先用 SVG 的鼠标绘制，在原来可视化上追加一个新的暗藏图层最高层的层级，这样鼠标的外围点就能够实现进去。
当初整个浏览器动画技术外面最外围的函数接口就是这个接口，能够实现动画成果，这外面会深度应用这些点，大家能够看一下鼠标同步流程，外围是这样的流程。
鼠标同步流程图
第一、咱们绘制进去对端鼠标的成果，加上光标，加上信息。
第二、咱们监听本地的鼠标事件，挪动之后循环把这些事件插入到具体队列外面，而后再发往服务端。
svg 的绘制绝对是比拟容易的，大家能够看一下这几个外围点，整体上次要代码采纳的是 svg 的整个计划，最好就是一个结构化文档能够便捷的进行传输，这是这个图层的成果。
再看这个动画的实现，体现了两个技巧，第一是什么工夫发送一次，快的话压力很大，慢的话提早很高，咱们调的节点是 500 毫秒，搞前端的都晓得截流可能触发很屡次，每 500 毫秒做一次数据。咱们的绘制距离是 400 毫秒，这个是精心调整过，在对端单方正好十分丝滑的感觉，你能感觉到略微有一点点的追随，这是最好的状态，所以这就是咱们过后最外围的数据。
这个是外围的鼠标同步算法，这外面用两个外围接口，通过 CS3 整个的成果能够把一个地位一直地滚动，十分晦涩，这种模式下基本上看起来就跟真的光标截然不同。所以这就是，原来咱们感觉会有挑战的点，但其实能够很好的化繁为简。
实时协同框架绘图的核心技术——组建同步
这个计划解决完之后还有一些要害挑战，比方，咱们接下来要探讨的组件动画的同步，大家能够从新回忆一下方才的视频外面播的是，整个组件挪动的过程也要同步过来，当初国内上做这种技术计划，大家的感触都是滑过去之后对方间接就蹦过来了。
这个动画的拖拽成果也有十分具体的流程，咱们的模式是减少一个抉择的监听，本地把这些监听发送到云端，对端开始承受，承受之后创立一个专门的队列，每一端的操作都有一个对应的队列，这样整个体系外面会把每个端的高量全副渲染进去。之后再进行计算解决。
组件同步流程图
这个解决须要有十分多的技巧，又回到方才说的技术选型的重要性，所以咱们的解决方法是看起来很吓人，实际上是十分好的，两头会经验很屡次的论述、增加，但这就是咱们外围的流程。
大家能够看一下要害数据的状况，十分要害粗疏的点决定了交互体验。组件轨迹同步，这是相干的外围代码，有趣味的话能够找我进一步沟通。
实时协同框架绘图的核心技术——视角同步
还有一个要害挑战，这个挑战来自于视角同步，大家都晓得整个架构绘图方面可能是很大的绘制白板，可能脱离出视角，这个状况，超出这个视角之后就不晓得对方在更新什么。
而咱们的解决方法是，须要计算每一次新进来的行为有没有在对方的视角内，如果有的话咱们有两种解决办法，第一类是点击追寻，追寻完之后，他人挪动什么视角对方能够间接追寻，咱们不须要任何的动作。第二类是其余追寻，通知他对方曾经出了整个绘图区须要追寻，再去点击，这也是咱们的外围解决。
这外面最重要的是视角同步整个技术解决，第一一样的会追寻鼠标状态，而后关注每个图形的地位，换算对方过去之后有没有超出区域。最重要的是拿到对方视角的地位，而后再剖析有没有大于咱们的区域。
视角同步算法，通过本地的 ScrollLeft 去断定，之后一样通过动画的处理函数去进行整体的解决。
视角同步流程图
大家跟着我一起感触了整个从技术选型到框架架构计划，再到每一个绘制技术，到最初整个计划选型的整个过程，目前，咱们的外围策略是打造一个真正云端化在线协同无缝沟通的环境，尤其是在咱们技术深度的沟通合作环节。
我这边的外围分享就到这里，大家有什么问题能够找我进一步的交换。
谢谢大家！