技术分享|让实时协作的框架图如丝般顺滑分享精华版全文——ShowMeBug创始人&CEO：李亚非今天非常荣幸能够和大家分享一个非常有技术含量的分享。在开始之前，让我介绍一下我的个人情况。2009年开始在深圳开发，有十多年的全栈工程师经验。我14岁时开始了自己的事业。到目前为止，我已经创建了三个公司。这是我的第三家公司。2019年6月，ShowMeBug项目上线，帮助工程师解决线上面试、筛选、测评等问题。今天的话题也是关于《如何构建深度架构绘图的前端体验》的。我会带着大家一起，转换角色为工程师的身份来体验整个架构选型，讨论各种细节和挑战。ShowMeBug已连续三年获得融资，拥有数百家客户。我们碰巧在这个摊位。说到WebRTC的痛点，我们深有体会。不管是兼容性问题还是移动端的各种点，我们都非常期待。核心技术演进。今天分享的内容将细分为以下五点：第一，什么是实时协同框架绘制；二、实时协同框架绘制的核心技术——协同算法；三、实时协同构图的核心技术——鼠标同步；第四，实时协同画框的核心技术——建筑同步；第五，实时协同画框的核心技术——透视同步。什么是实时协作架构映射？首先我们来看一下实时协同架构绘制技术的核心。我从事技术研发十几年最大的体会就是，任何技术最终都需要为商业价值提供一个非常核心的输出，那么我们来看看架构的挑战。分享之前先放个视频给大家感受下成品吧。这是我们的最终产品。我们把架构图、流程图，所有技术相关的产品逻辑都画在云端，实现两个人无缝丝滑的在线体验。整个过程花了我们大约一年的时间。进行迭代开发。最大的核心价值点是在线完成整个架构，交流，沟通，协作，是一种很流畅的感觉。具体可以看一下架构选择的核心方案：首先，我们选择找到这几个点。核心是找到一个起点。比如音视频的起点就是找WebRTC。我们使用最基本的开源组件MxGraph，上面会有很多功能版块。核心功能是将所有底层数据结构化构建，带有自动画布，整个导出可以是完全结构化的文档。如果说WebRTC最好的方式就是它可以很方便的扩展，它可以和我们的业务需求扩展很多点，这个需要做的非常充分。整个过程中选择了很多可能的技术架构和画板的核心业务点，比如jsPlumb、JointJS、QuneeJS。这是一个针对商业帮助图库的解决方案，对于整体社区资源和文档来说还是比较好的。有挑战。一般来说，选择能够自主可控、扩展性好的方案是比较有利的，尤其是在这几点掌握非常核心的技术优势。实时协同构架绘制的核心技术——协同算法其实只完成了10%的工作。接下来的核心话题是：我们如何实现流畅的体验？下面就两个核心算法给大家讲解一下。第一个也是最常用的核心文档协作算法是OT算法。该算法是谷歌科学家在1990年代开始创建的标准。后来由于这项技术有很大的挑战，直到1994年和1995年才实现了一些文件系统。到目前为止，实时协同数据可能存在漏点的问题，OT算法机制复杂，有排队结构，需要前端也实现排队算法。核心思想就是把所有的运算都变成三运算，加减移动，把所有的东西都变成三运算。通过数学公式，在服务器端进行双向处理，然后由服务器端分发给每一端，这是关于轻量级文档的技术。这也是我们非常核心的算法，将应用于协同编程，打造云编程环境。在本节中，我们并没有直接选择这项技术，而是使用了一个非常棘手但非常酷的点。我们称之为Diff/patch算法，有针对性地将异同点一一比较，然后应用到每个特定的节点上。调好后发给另一端，AB的两个用户就可以很好的同步了。这是Diff/patch核心的算法实现，大家可以简单过一下。先拿到每一个对象，创建一个节点再创建一个新对象，和peer对比一下，看看中间是不是多了？如果数量过多，将进行处理。如果有更新操作，我们会启动Diff，形成补丁。核心算法就是这样不停地循环，因为我们的数结构最大的好处就是永远不会出现循环死锁。与OT算法相比，Diff/patch流程图模式更容易控制。它的延迟和各种点都非常扎实。挑战只有一个，但我们需要在技术选型架构上考虑这几点。过程中偶尔会出现网络丢失或者一个状态可能概率很低，会丢失一个小图形，下次更新，或者有人动一下，马上进入最终状态。这种点是万一十分之一，或者说不到万分之一就可以换来清晰的结构，我觉得这是非常值得的。这是代码的实现。让我们简单地看一下。核心接口是CreatePatch。在每个节点上，加法运算将是对端的减法运算。如果双方移动操作相同，则按此方式进行配对。这里是整个算法的核心。大家可以看看：看起来很简单，但是真正实现的时候，可以想想这个大前端的工程调试挑战或者难点。这项技术在未来可以应用到很多实际场景中，构建一个云端交互场景，进行实时交互。这就是最后的Apply，反向应用的核心代码。核心代码很小，就几个核心操作。实时协同画框的核心技术——鼠标同步当这个问题解决了，就意味着一个大问题解决了。市面上大部分同类产品都能做到那个水平，但是对于业务场景需求需要有很强的能力，能不能有丝滑的感觉，我们需要实现一个很重要的能力就是鼠标的同步，你可以想想这个场景下的巨大挑战，什么时候从一个鼠标状态发送到另一端，人多的时候，可以想象这中间会有一个巨大的渲染压力。刚刚实现的方案感觉卡住了，大家能感觉到移动通信上鼠标状态会有一些延迟。在实现这个技术手段的时候，利用架构选择的优势，给我们增加一些核心特性。我们使用的第一个是先用SVG的鼠标画图，在原来的可视化上增加一个新的隐藏层。最高境界，让鼠标的核心点得以实现。现在整个浏览器动画技术中最核心的功能接口就是这个接口，可以实现动画效果。这里将深入使用这些要点。可以看一下鼠标同步过程。核心就是这样一个过程。鼠标同步流程图首先我们绘制对端鼠标的效果，添加光标，添加信息。其次，我们监听本地的鼠标事件，将这些事件在移动后循环插入到特定的队列中，然后发送给服务器。svg的绘制相对容易。你可以看看这些核心点。总体来说，主要代码采用了svg的整体方案。最好是能方便传输的结构化文档。这是这一层的核心。影响。再看这个动画的实现，体现了两个技巧。首先是什么时候发送一次。快则压力大，慢则延迟高。times，每500毫秒做一次数据。我们的绘图间隔是400毫秒。这是经过精心调整的。两面都摸起来很丝滑。你可以感觉到一点点跟进。这是最好的状态，所以这是我们当时的核心。数据。这是核心的鼠标同步算法。这里使用了两个核心接口。通过CS3的整体效果，可以连续滚动一个位置，非常流畅。在这种模式下，它基本上看起来就像一个真正的光标。所以这个就是，本来我们觉得会有挑战，其实可以很好的简化。实时协同画框的核心技术——建筑同步该方案解决后，还存在一些关键的挑战。比如我们接下来要讲的组件动画的同步，大家可以回忆一下，刚才视频里播放了整个组件。移动过程也必须同步。现在国际上都在推行这种技术方案，大家感觉滑过去了，对方就直接跳过去了。这个动画的拖拽效果也有非常详细的过程。我们的模式是添加一个选定的监听器，将这些监听器发送到本地云端，由对端开始接受。接受后，创建一个特殊队列。每一端的操作都有一个对应的队列，这样整个系统就会渲染每一端的所有highvolume。然后进行计算。组件同步流程图的处理是需要很多技巧的，又回到刚才说的技术选型的重要性，所以我们的处理方式看起来很吓人，其实很好，在中间详细说明，添加，但这是我们的核心流程。大家可以看一下关键数据，非常关键和细节的点决定了交互体验。组件轨迹同步，这是相关的核心代码，有兴趣的可以联系我进一步交流。实时协同画框的核心技术——视图同步还有一个关键挑战。这个挑战来自于视图的同步。大家都知道，整个架构图可能就是一个很大的绘图白板，也有可能是看不见的。这样的话，超出这个view之后，就不知道对方在更新什么了。而我们的解决方案是计算每一个新的传入行为是否在对方的视角之内。如果是这样，我们有两种处理方法。第一种是点击关注。跟随之后，对方移动到什么视角？它可以直接跟随，我们不需要任何操作。第二类是其他跟随者，告诉他对方已经离开了整个绘图区，需要跟随，然后点击。这也是我们的核心处理。这里最重要的是视角同步的整个技术过程。首先是跟随鼠标状态，然后注意各个图形的位置，过来之后计算对方是否超出了区域。最重要的是拿到对方视角的位置，然后分析有没有比我们大的区域。视图同步算法由本地的ScrollLeft决定，然后通过动画处理函数进行整体处理。Viewpoint同步流程图跟我来体验一下从技术选型到框架架构方案，再到每一种渲染技术，再到最终选择整个方案的全过程。目前，我们的核心战略是打造一个真正基于云的在线协作和无缝沟通环境，尤其是在我们技术深度的沟通合作环节。我的核心分享到此结束。如果您有任何问题，可以联系我进一步沟通。谢谢你们！
