找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-11-2 01:02  /   查看:5353  /  回复:0
上一期,我们做了框架的基本环境搭建,这一期我们将具体来剖析一下其中的关键代码。
首先是前端:
既然要做协同,那么首先就要搭建websocket
在react中使用websocket不需要引入其他库,只需要创建一个公共组件,封装一下websocket
初始化:
image.png216894530.png
接下来我们需要监听前端发出的操作。这里因为在线表格编辑器本身将所有用户可能做的操作全部做了封装,所以省下了很多的功夫。
image.png323997496.png

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

image.png283361815.png

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

image.png767455138.png

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

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











0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部