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

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

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


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



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



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


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