登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

217 主题	1万帖子	1万积分

Rank: 8 Rank: 8

积分: 15938

85571
金币
217
主题
10069
帖子

最新发帖

SpreadJS+GCExcel全栈解决方案--协同编辑的框架搭建（二）

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

超级版主 / 发表于：2020-11-2 01:02 / 查看：5321 / 回复：0

接上一期，我们做了框架的基本环境搭建，这一期我们将具体来剖析一下其中的关键代码。
首先是前端：
既然要做协同，那么首先就要搭建websocket
在react中使用websocket不需要引入其他库，只需要创建一个公共组件，封装一下websocket
初始化：
image.png216894530.png

image.png216894530.png

接下来我们需要监听前端发出的操作。这里因为在线表格编辑器本身将所有用户可能做的操作全部做了封装，所以省下了很多的功夫。
image.png323997496.png

image.png323997496.png

根据cmd去判断并且对命令再做一些简单封装

image.png283361815.png

image.png283361815.png

之后将封装过的命令发到服务端，之后通过websocket发同步指令

image.png767455138.png

image.png767455138.png

当协同端通过websocket接收到请求的时候，通过onmessage方法做同步命令
这里在协同端执行command之前需要先撤销之前的监听，避免再发送websocket导致死循环。在执行之后，再次添加监听。
image.png751925964.png

image.png751925964.png

这样前端的核心内容就介绍完了，目前前端这样做已经能做基本的协同操作了。下一节，我们将介绍后端的操作以及GCExcel在此次协同框架中所扮演的角色及作用。

收藏

回复

点击查看 -->【预览版体验】SpreadJS v16.0 预览版 - 新文件结构

0 个回复