- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处: 葡萄城官网 ,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者.
协同编辑是目前成熟的在线文档编辑软件必备的功能,比如腾讯文档就支持多人协同编辑,基本都是采用监听command,然后同步此command给其他客户端来实现的,例如以下系列:
https://gcdn.grapecity.com.cn/showtopic-82517-1-1.html https://gcdn.grapecity.com.cn/showtopic-82518-1-1.html https://gcdn.grapecity.com.cn/showtopic-82519-1-1.html 。
这种做法可以快速实现大部分功能的协同操作,但是也有一些不足,我大致将这些不足分为两种类型:
第一种,command传递之后信息丢失,需要重写或修改command的,比如复制粘贴功能.
这种类型对应的是希望command生效,但实际上没有生效.
第二种,多人协同所必须的特殊功能,情况比较多:
1. 比如编辑一个单元格时,其他人不允许编辑此单元格,并有样式提醒; 。
2. A用户正在编辑时,B用户在上方插入了一行,此时A编辑的单元格也要下移,而不是保留在原位; 。
3. 缩放时不对其他页面有影响; 。
这种类型对应的是不希望command生效,或者希望改变command生效的效果.
如果你也在做协同,并且遇到了上述问题,那么这篇文章或许可以解答你心中的疑问.
先看下最终的实现效果吧:
在开始前,先对demo的架构做一个说明,我此次写的demo是html做前端,并用nodejs做服务端,前后端通信采用websocket的方式,目录结构如下:
大家在测试demo前,请务必认真阅读readme文件.
下面我就讲一下如何针对上面提到的几种情况做优化,以更好得满足协同的需求,整体的思路其实比较简单,无非就是对那些不满足需求的command做拦截,单独处理。以上提到的情况并不包含实现协同所需的全部功能,只是抛砖引玉,如果有其他没有考虑到的情况,可以用同样的方法处理.
这里用commandManager新增监听的方式来监听所有的操作,并用websocket发送到服务端。马赛克部分为后续其他代码逻辑,暂时不用看.
服务端仅做一个转发:
其他客户端接受到此消息,执行command即可:
到这里,开头提到的快速实现大部分操作的协同就已经完成了,后续的操作都是为了弥补当前方案的不足.
粘贴的command同步到其他客户端时,会执行失败,仔细对比发出的command和接收的command,会发现其中两个字段发生了变化:
这两个数组内部本应该是Range对象,但是却被转换成了不同的Object,这是由于我们使用了JSON.stringify方法,而用此方法序列化时并不支持Range对象,所以我们在客户端接受到此信息时,需要重新将其还原为Range:
其实你可能会发现当存在fromRanges的时候,我直接用了copyTo方法实现了粘贴,并没有重新执行command,效果其实是一样的.
这里还隐含这另一种情况:从外部复制内容,粘贴到spread,这时fromRanges对象是不存在的,那么我们就需要执行command了,当然执行之前要把pastedRanges数组的值变为Range类型.
即同一个单元格同一时间只能有一个用户编辑。这是协同编辑几乎必备的一个需求,看起来很简单,但事实上是比较复杂的。当客户端有用户开始编辑时,向服务端发送消息, 。
而服务端需要维护一个数组,记录所有当前正在被编辑的单元格信息,并向所有客户端同步 。
其他客户端收到消息后,用户如果要编辑此单元格,则禁止用户进入编辑状态 。
当然,用户可能希望看到有哪些人正在编辑哪些单元格,类似于这种效果:
这里是用自定义单元格的方案实现的:
这个功能算是初步实现了,但是考虑一下这种情况:如果你正在编辑时,其他用户在上方插入了一行呢?
Lily本来正在编辑A2,Alen在上方插入一行后,Lily应该编辑的是A3,但是以我们目前的实现方式,Lily编辑的仍然是A2。对应的,在上方删除行、在左侧插入删除列都会有同样的问题.
这里Lily和Alen两个人都会受到影响,Lily编辑的单元格应该移动,Alen被锁定的单元格也应该移动,而Alen这边比较简单,服务端根据插入行列更新锁定单元格信息就好,Lily这边则麻烦一些,需要记录下Lily已经输入的功能,并且在新的单元格打开,并开启输入框,其中callback函数就是选择新的输入框的逻辑,根据不同的状态有所不同,所以用回调函数的形式实现.
相信你也注意到,在上述处理中,行列的变化信息是很重要的,在原生command的基础上还要有编辑框的处理逻辑,所以行列的变化也需要我们单独来处理,在客户端收到行列变化的消息时, 做出拦截:
并对编辑的框做出正确的移动 。
到这里,这篇文章也接近尾声了,整体实现的思路其实比较简单,无非就是拦截那些不符合协同需求或者同步时有问题的command,并重新实现它们。这种方式能够快速实现简单的协同,并且做出定制化的修改.
但是这种方式也存在着一些问题,比如无法支持undo堆栈,你可以在代码中看到我会随时清空undo堆栈,阻止用户进行undoredo操作,这是因为用commandManager.execute的方式执行command时,一定会进入到堆栈,这就导致A用户的操作会出现在B用户的undo堆栈中,B用户撤销时,就有可能撤销A用户的操作.
除了上面这个问题以外,一定还有其他更深、更棘手的问题存在,所以要在实际项目中实现协同,我的想法是根据业务限制用户的操作类型,并对这些有限的操作针对性地开发协同功能,这样虽然效率比较低,但是由于涉及面小,更便于控制.
OK,以上就是这篇文章的全部内容了,欢迎读者在评论区留下你们的想法~ 。
简单协同代码下载链接:
https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjgzMDk0fGVlNTFkNGQ1fDE2OTA3NjM4Mjl8MHwxNzY0MDU%3D 。
扩展链接:
Spring Boot框架下实现Excel服务端导入导出 。
项目实战:在线报价采购系统(React +SpreadJS+Echarts) 。
Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计 。
最后此篇关于如何快速实现多人协同编辑?的文章就讲到这里了,如果你想了解更多关于如何快速实现多人协同编辑?的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我添加了编辑按钮 self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithBarButto
我试图在运行时“干净地”更改 UIBarButtonItem 文本,以便可以切换编辑/完成模式。然而,每次我在运行时更改 title 属性时,动画看起来都很笨拙。我正在寻找模拟联系人应用程序中“编辑/
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
我想更改 INI 文件中的一些值。不幸的是,我在 2 个不同的部分有键,它们共享相同的名称但需要不同的值。我的代码使用 Get-IniContent函数来自 PsIni . 示例 INI 文件: [P
是否有通知或委托(delegate)方法可用于检测表格 View 何时进入编辑状态? 我想要做的是检测表正在编辑,然后显示一个额外的行,上面写着“添加新项目”或类似的东西。 我尝试在加载 View C
例如,我试图从 svg 读取样式块,我可以获取类型但不能获取字符串。 $svgTemplate = new SimpleXMLElement($_POST['SvgTemplateImport']);
我可以使用 self.navigationItem.leftBarButtonItem = self.editButtonItem; 通过按下导航面板上的编辑按钮让 UITableViewContro
我正在使用markitup!作为 Markdown 编辑器( example )。 目前,我需要按预览按钮(绿色勾号)来显示预览面板。 我希望自动显示预览 - 我怎样才能实现这一点? 最佳答案 我没有
我的处境非常糟糕。我丢失了源代码,客户需要在应用程序中进行一些更改。想想一个编辑程序集的例子:Test.dll,然后添加代码行,最后重新编译它 所以我的问题是: -可以这样做吗? -如果可能的话,什么
我使用了一些 JavaScript 来通过按钮更改段落元素的内容。它工作正常,但我还想让按钮控制标题和附图。给我指明正确的方向吗? 这是我用来更改段落的代码 .... 谢谢! 最佳答案 尝试将 Ja
是否有任何 Emacs lisp 插件可以让我轻松地在 yaml 文件中编辑或输入数据。 例如: --- sample yaml file ---Name : Addr :City :State:Zi
新手Java问题,我确定已经解决了,但是在任何地方都找不到解决方案:( 我想使用这里包含的java程序http://sourceforge.net/projects/ant-tibco/files/
在我的网页中,我使用了 gridview。在这个 GridView 中,它显示了一组用户信息。我刚刚从智能标签菜单中添加了一个按钮。我的要求是当我点击每个用户对应的按钮时,它会重定向到另一个页面并显示
我想在没有任何框架的情况下直接在 JS 中编辑一个 SVG 文件。 基本上我有一个 SVG 主文件,其中应该包含一些子 SVG。 我已经在 Ajax 中检索了这些子项的内容,但我想将它们插入到 SVG
我有我的 ViewModel,我有我的 Controller 可以从 ViewModel 正确显示,但是我不确定如何使 ViewModel 可编辑,以便将编辑后的数据发送回模型。我只想编辑 Order
我不确定我的做法是否正确。 IplImage *dog_1 = cvCreateImage(cvGetSize(oriImg), oriImg->depth, oriImg->nChannels);
我有一个创建二维码的网络服务器。在此过程中,我得到一个 BarcodeQRCode 对象,我可以从中获取图像 (.getImage())。 我不确定如何将这张图片发回给客户。我不想将它保存在文件中,而
已编辑:我的第一个问题解决了,但又出现了另一个问题,只提供了一个用户 ID。这是修改后的代码的屏幕截图。 回到表格,用户将按下编辑按钮,这样他就可以编辑问题并给出适当的操作.. 我的上表代码是这样的:
据我了解,我无法通过重新启动服务器来清除 MySQL 查询缓存。 每次运行 sql 时,我都试图获得与第一个代码块类似的结果 1-这是在重新启动 Apache 和 MySQL 之前(第一次使用这些查询
我正在创建一个页面来搜索项目,然后能够编辑/更新它。当它只返回一个结果时我能够做到这一点,但当它给我多个结果时我只能编辑最后一项。下面是我的代码: ....... $dj =$_POST[djnum]
我是一名优秀的程序员,十分优秀!