背景
公司新开发一款流程设计器，需求明确后，后端同学三下五除二就设计了一套CURD接口拿来一起讨论，因为平常也一直在使用一些在线协作的设计网站，很难看到保存按钮的出现，都是以实时保存的方式来实现的，于是乎一起调研了一下几个比较熟悉的在线设计网站
- ProcessOn
- 墨刀
- Figma
- MasterGo 分析方式为进入编辑页面后打开开发者工具，不断的进行操作，分析网络请求，主要分析网站的保存与协作机制
开始分析
1. ProcessOn
Http请求
每次操作完成后（松开鼠标）页面都会请求如下接口：
查看接口发送数据，的确是每次操作的节点的json数据
WebSocket
进入页面后会建立如下链接：
每隔10s会互发心跳，每次操作后同样会发送操作节点的json数据
看到这里问题就来了，为什么保存的数据要发送两次呢？😐😐😐
后来还是那位后端同学的话点醒了我，我们不是还有协作模式要做嘛。协作模式这四个字很重要，如果http请求是用来保存数据，websocket是用来同步协作，那么就讲的通了
想到这里我们用A和B两个账号协作修改同一个文档进行测试。A操作时会进行http请求，发送websocket数据，B会收到websocket消息，反之亦然，验证了我们的猜测。
但是还有疑问，使用websocket就可以实现保存的同时并且进行协作了，为什么还要http请求再发送一次？个人猜测当前可能是中间过渡的方案，最终会过度到完全使用websocket
2. 墨刀
有了前面的基础，后续的分析就简单了很多
Http请求
页面编辑时没有发送http请求
WebSocket
每隔30s会发送一次心跳包，保存使用了节流处理，有操作后每隔20s发送一次保存数据，二进制数据包应该是需要保存的数据
这个节流的方案单人时不会有太大的问题，最多也就是偶尔刷新时会有一些操作没有保存。但是多人协作的时候体验就会很差，操作需要至少20s才能在协作对象的设计器内进行显示
3. Figma
Http请求
页面编辑时没有发送http请求
WebSocket
这部分figma变得复杂了许多，会建立3个链接，第一个链接与当前编辑的文档相关联，后两个不论是否在编辑页面都会一直保持着连接
只要有操作，第一个链接就会发送和接收二进制数据，控制精细度非常高，连选中也会记为操作，改动的过程中会持续进行发送。当有其他人进入协作后，会收到消息，这时鼠标移动也会发送和接收消息
第二个链接从名字看起来是用来同步文稿的版本信息，可能是使用版本来控制当前协作的文稿是否正确，发送和接收的都是json数据，可以以后再慢慢分析
第三个链接发送的也是json数据，从内容来看应该是各个面板的注册消息，有一些面板切换时会发送消息，以后再分析
4. MasterGo
Http请求
页面每隔20s会请求一次如下接口，请求内容看起来应该是埋点的操作记录，以后再分析
WebSocket
这部分的逻辑与figma基本一致，会整个站点会建立两个链接，第一个链接与当前编辑的文档相关，逻辑基本与figma保持一致
第二个链接还不清楚具体的作用和逻辑
总结
到这里我们已经分析了这四个网站大概的实现逻辑，那么我们自己系统的实现方向也就很明确了，那就是websocket加逻辑控制。但是还有一些疑问，以后慢慢再分析，清楚的同学可以直接帮忙解答一下
