开发在线文档时,这个技术难点你解决了吗?

小魔 小魔     2022-12-10     726

关键词:

“时势造英雄”,是亘古不变的真理。在当前的时代背景下,在线文档可以称得上是这样的“英雄”。

自 2020 年新冠疫情爆发以来,远程办公彻底颠覆了传统的企业管理模式,在线文档作为远程办公软件的重要组成部分也同样迎来了高速发展。

如今,即便市场中已经有了腾讯文档、石墨文档、飞书、语雀和灵犀文档等在线办公产品,但在线文档本身仍面临功能、技术、数据安全、服务、生态等多方面的考验,如数据处理效率、多人协作、二次扩展、系统集成、框架兼容性问题等。

从技术角度来看,在线、数据处理和多人协作是开发在线文档系统最关键的技术指标。不过,在线和数据处理均已有较成熟的技术方案,实现难度不大。因此,多人协作才是影响在线文档系统易用性的核心要素。

什么是多人协作?

多人协作,即多人同时对同一份文档进行编辑,用户无需刷新即可看到其他人所做的修改。Google Docs、腾讯文档、石墨文档、Quip 等都具备多人协作功能。

那么,多人协作是如何实现的呢?

任何信息如要做到多人实时编辑与展现,需要实现以下三步:

  • 操作化
  • 可传输
  • 可还原

这三步,类似于编解码过程。首先将信息转换为一组操作集合,然后将操作通过网络传输给其他终端,最后在本地终端将操作还原为信息。

这些步骤看起来简单,但每一步都需要考虑很多。比如操作化过程中,在对信息进行分割与组合时,如何确保信息的所有变化都可以分解为操作的集合、如何令操作覆盖信息的所有变化,以及如何决定分割的颗粒度。

可传输需要考虑以下几点:

  1. 传输内容
    a. 原始文本
    i. 清晰
    ii. 冗余
    b. 压缩技术
    i. 逻辑压缩
    ii. 协议压缩
    iii. 手动压缩
  2. 网络协议
    a. Socket
    i. TCP
    ii. UDP
    b. HTTP
    c. WebSocket
  3. QoS(Quality of Service,服务质量)
    a. 快速失败
    b. 自动回滚
    c. 自动重连
    d. 自动恢复

可还原主要涉及:

  1. 绝对操作的还原
    a. 控制体积
    b. 合理的提示
  2. 相对操作的还原
    a. 严格的顺序性
    b. 从源头保障顺序性
    c. 顺序性的补救
  3. 本地操作的还原
    a. 过滤收到的操作集合
    b. 从源头细化操作颗粒
    c. 本地保存本地执行
  4. 无入侵的还原
    a. 定义入侵
    b. 排除入侵
    c. 千人千面

在了解了多人协作的基本原理之后,我们来研究一下它的技术难点。

多人协作有哪些技术难点?

多人协作,本质是分布式系统中的 Multiple Leader Replication,即任何一个用户端都可被视为 Data Leader,这些 Leader 之间同步数据必然会遇到乱序和冲突问题。这就是多人协作的主要难点。

对于 Multiple Leader Replication 的冲突问题,有如下解决方法:

  • 避免产生冲突,即不让多个用户同时编辑同一处地方。该解决方法简单粗暴,使用时需具体查看产品形态是否适合该方案。
  • 把冲突暴露给用户,让用户自己解决。目前大多数专业的版本控制软件采用了该方法,但它不适用于拥有大量非专业用户的产品,如在线文档。
  • 给写入操作打上全局 index,可以是时间戳或序列号,该 index 必须是全局的且递增。在任何冲突的地方,都选择 index 较高的那个写入。该方法的优势在于冲突的解决是完全自动化的,不需要用户参与。缺点就是如果遇到同步间隔很长的情况,会丢失很多用户的输入。

在实际开发在线文档系统的过程中,Operational Transformation(OT)算法技术是解决多人协作冲突问题较为常用的方法。这项技术诞生于 1989 年,其原理是将文本内容统一为以下 3 种类型的操作方式,目的是为用户提供最终一致性实现:

  • retain(n):保持 n 个字符
  • insert(str):插入字符 str
  • delete(str):删除字符 str

在完成上述操作后,OT 算法将正在并发的操作合并转换,以形成新的操作流,并应用在历史版本上,实现无锁化同步编辑。


OT 算法技术中的操作转换过程(图源: https://en.wikipedia.org/wiki... )

OT 算法背后的思想其实非常简单,就是在特定的条件下进行相应的操作转换,因此,OT 主要用于文本,通常很复杂且不可扩展。对于富文本编辑等更高级的结构,OT 用复杂性换来了对用户预期的实现,不会给系统性能造成过多的负面影响。因此,如今大多数实时协同编辑逻辑都是基于 OT 算法来实现的。

正因如此,OT 算法成为了解决当前协同冲突处理最主要的方案之一。然而,即便它已经诞生了 30 余年,控制算法相关的理论早已百花齐放,却仍无法很好地处理分布式实现问题,且开发一个支持多人实时协同编辑的系统也远比想象中的更加复杂。

实现多人协作的突破口在哪里?

由此可见,实现一款复杂的多人实时协同编辑系统仅仅依靠算法逻辑是不够的,还需要根据不同的业务场景(如项目看板、纯文本编辑、undo/redo 等),投入大量的研发成本和时间,并在不断摸索中,寻找到产品性能和易用性之间的平衡点。

那么,是否存在一条更为简单快捷的解决方法呢?

通过对市面上多款在线协同办公产品的示例代码进行分析,我们发现这些产品除了运用到前文提到的 OT 算法之外,基本都会借助第三方表格组件。通过嵌入组件,在线文档系统很好地支持了多人协作的最终一致性,给用户提供了更加易用且多样化的体验效果,在减少研发成本的同时,实现了更高密度的计算复杂度,大幅提高了多人协作效率。

用于多人协作的表格组件需要具备哪些功能?

首先,是对于表格的功能支持。

由于表格的数值敏感性远高于其他数据类型,用作多人协作文档时可以实现更为细腻的操作颗粒度和计算复杂度。因此,所选用的组件必须具备强大的表格功能支持,不仅要在数据录入、数据填报等方面展现出强大的能力,还要具备各类统计、计算汇总、透视分析,以及图形化手段。

其次,需要具备开放的 API 接口,满足更多定制化选项。

这类组件需要提供丰富的事件和应用程序接口,用于控制单元格状态、表单保护、数据传输等逻辑,对于多人协作而言,还需限制用户对同一处内容进行编辑,以及插入时间戳(序列化)等功能。

出于好奇,笔者下载试用了网上多款表格组件,发现能满足上述需求的屈指可数,而 SpreadJS 无疑是最为亮眼的一款。这款组件主打可嵌入系统的“在线 Excel”,纯前端的体系架构可以很容易的嵌入系统开发,而无需考虑与原生系统的兼容性。值得一提的是,SpreadJS 采用了稀疏数组 (Sparse Array) 作为存储模型,相较于传统的链式存储或数组存储,稀疏数组只会对非空数据进行存储,而不需要对空数据开辟额外的内存空间。

除了节省内存空间外,对于表格这类布局松散的数据类型,稀疏数组也更易于构建基于行索引的数据字典,以便随时替换或恢复整个存储结构中的任何一个级别的节点,借助这一特性,SpreadJS 在多人协同中实现了高效的数据回滚和数据恢复 (Redo/Undo)。


SpreadJS 的稀疏矩阵存储模型 (Sparse Array)

结语

疫情加速了企业数字化转型。未来企业协同办公将朝着产品易用性提升、可集成与二次扩展能力、与原系统/业务的高度契合、满足最终用户的使用习惯等层面发展。

如何打破技术壁垒,开发出既能满足不同场景下的用户需求,又具备市场竞争力和差异化的在线文档产品,是 SaaS 企业和系统供应商们首要考虑的问题。

“好风凭借力,送我上青云。”在如今竞争激烈的在线文档领域,除了耗费大量精力自主研发,学会借力打力满足不同的业务场景和客户需求,或许也是一个不错的选择。

如果你想了解更多前端表格技术,欢迎参加本周六举行的 SegmentFault D-Day 大前端技术沙龙,葡萄城高级产品技术顾问、技术布道师姚尧将与大家面对面交流和分享前端电子表格技术的那些事儿。

点击这里,了解更多详情!

请问你遇吗的git提示错误fatal:protocolerror:badlinelengthcharacter这个问题解决了吗?我也遇到

参考技术Aaliyuncode"protocolerror:badlinelengthcharacter:Welc"修改TortoiseGit设置>>网络,默认的SSH客户端:"C:\ProgramFiles\TortoiseGit\bin\TortoiseGitPlink.exe"改成win下git默认的"C:\ProgramFiles\Git\usrbin\ssh.exe&q... 查看详情

coreldrawx4为啥每次打字时会出现运行错误?你的这个问题解决了吗?

只要输入文字就会出现问题,我照着之前你提问人家解答的方法做了,还是不行。我的系统是win764位的。参考技术A把这一项关闭,打字就不会那么卡,减少错误的发生。 参考技术B重装也没有用。非正品X4至5月31日的日期。。解... 查看详情

当前页面已失效,请回到前一页面重新提交!这个问题你解决了吗?

参考技术A当前页面失效:1、网页设计有问题,连接服务器出错(可能性不是很大).2、超时操作。一些网页,尤其是需要填写登录信息的,当你长时间不操作便会自动退出。其他的倒是想不出来,最好抓个图什么的发来看看。... 查看详情

oracle11gdeveloper无法从套接字读取更多的数据求解决请问这个问题你解决了吗?

我也出现这个问题了求解决参考技术A只说明sqldeveloper这个客户端和其服务器端的serverprocess断开连接了,可能是serverprocess意外奔溃了,需要综合alert.log和网络因素诊断,没有万能解。 参考技术B数据的无法访问,请确认数据库是... 查看详情

如何实现在线编辑word文档

我想开发一个办公系统,实现在线编辑WORD文档,并且直接保存在服务器中。听说要用到控件,请问怎么开发啊控件中的命令怎么使用?要能实现痕迹保留1、百度一下【onedrive】点击进入如下图所示的链接,onedrive是微软件在线云... 查看详情

android--每日一问:你在android开发中遇到的技术难题是什么,你是怎么解决的?

经典回答一个工作过几年的程序员肯定会有工作中遇到技术难点问题,虽然这个问题有可能对于别人不是技术难点,但只要对于当时的你是技术难点,只要让你抓耳挠腮毫无头绪就往往会在你的大脑中留下深刻的印象... 查看详情

在线文档-为什么需要ot算法(代码片段)

阅读时间10分钟 在线文档实时协同编辑的难点之一,主要在于协同冲突处理。OT算法是解决协同冲突处理的主要方案一、冲突处理冲突处理的解决方案1.编辑锁当有人在编辑某个文档时,系统会将这个文档锁定,避免... 查看详情

@程序员,技术债你还清了吗?

...现在没有时间重新思考这个模块的架构。”这些话把每个开发人员的耳朵,都磨出茧自来了。更不像话的是,每个开发人员也整日把这些话挂在嘴边。更让人心有不甘的得失,很多时候这些都是应该做的事情。曾经我也很希望提... 查看详情

mac2016word导航目录右键无删除索引呢,怎么删除目录即删除文档所在层级目录?

先选中要删除的章节标题,然后按command+delete键,就删除掉了,亲测有效参考技术A请问你这个问题解决了吗好难啊 参考技术B解决了吗?????也需要啊,谢谢 参考技术C请问解决了吗,怎么解决的 参考技术D直接选中按delete 查看详情

注册表里commandprocessor的autorun值为何老变成exit,这个问题你解决了吗???谢谢

参考技术A看看本身软件的设置有没有设置成自动退出,没的话就中毒了追问那我要怎么看它的设置啊?急.....谢谢 查看详情

项目的难点

...,一个项目中到底什么样的问题才算是棘手的问题?项目开发前业务流程梳理(产品意识)技术架构设计(架构师)项目开发中处理开发中的技术难点合理安排开发人力,保证项目进度对产品提出的需求做出质疑和把控,保证需... 查看详情

六大接口管理平台,总有一款适合你的!

...网公司常用的接口文档管理平台。Swagger是一个大型的API开发者的工具框架,该框架提出了一个编写OpenAPI的规范(命名为OAS),并且Swagger可以跨整个API生命周期进行开发,从设计和文档到测试和部署。Swagger框架三核心:YApi部署... 查看详情

uniapp开发安卓app实现高德地图路线规划导航(代码片段)

...制在50-100字内。uniapp的map组件中导航路线的展示。是uniapp开发app时引入地图导航的实现方式。技术难点在于实现map组件时对于属性以及函数的细节使用很容易出现一些奇怪的bug。技术详述描述你是如何实现和使用该技术的,... 查看详情

android用webview播放网络视频怎么控制播放按键?这个问题,我现在同样也遇到了,请问你现在解决了吗?

参考技术A网络加载html5,那就用js来控制好了。 查看详情

小程序开发的难点是啥?

小程序开发的难点有:如何通过技术手段提升开发效率以应对不断增长的业务需求?微信小程序的工程化探索有哪些最新进展?如何实现小程序自动化构建、自动化测试?如何将小程序开发与团队现有的技术栈有机结合?如何适... 查看详情

fastadmin过时了吗

...的CMS是比较难用的,但是这个也不是常用的CMS,是个后台开发框架,里面包含了很多插件和技术,要是不懂thinkPHP5.0以及Bootstrap有点懵,还是要懂这两个,并且要理顺人家的设计思路,当然了,以小白的身份学习,作者怎么写都... 查看详情

c#开发怎么用vlc播放视频byte[]这个问题解决了吗

参考技术A//创建一个libvlc实例,它是引用计数的[DllImport("libvlc",CallingConvention=CallingConvention.StdCall,ExactSpelling=true)][SuppressUnmanagedCodeSecurity]privatestaticexternIntPtrlibvlc_new(intargc,IntPtrargv);//释放libvlc实例[DllImport("libvlc",Callin... 查看详情

如何把word做成二维码

...击。2、在弹出的对话框中选择自定义功能区,然后选择开发工具,勾选开发工具,然后点击确定按钮。3、找到word文档中的开发工具,点击开发工具选项之后,选择控件,选择控件子选项卡下最后一个选项。4、在弹出的对话框... 查看详情