引言
虽然很多流程图软件都是基于draw.io来做的,但是国内看processon的体验是最好的,wps也有和其一模一样的流程图,唯一的差别就是wps没有缩略图(我不用wps的一部分原因也是这个,当然也有其页面比较杂乱,东西多等等)
很显然缩略图是一张图片 而不是直接加载缩小版的文档。
分析processon缩略图生成方案
下面来分析下processon的缩略图功能是怎么设计的?以及它是如何处理用户电脑突然关机或者突然关闭浏览器导致缩略图无法生成的?
通过f12得知,每次修改画板都会调用这个接口 通过这个接口(https://www.processon.com/diagraming/msg)上传当前画板的布局数据
所以在后台会根据这些数据生成缩略图,放到这个画板的对应数据表。
processon还会每隔3秒去调用一次轮询接口(https://cb.processon.com/diagraming/poll)
我猜测这个轮询接口是为了同步在多个浏览器端同时操作同一份文档带来的数据同步问题
这种轮询的方式相比腾讯文档,石墨文档这种协同软件相比有以下缺点
- 浪费资源(轮询嘛)
- 延迟较高(轮询嘛)
至于腾讯文档这种是怎么做到的我也不知道了,因为在控制台看不到调用接口(可能是基于长连接)。。神奇
后记
当然我也是因为做过类似的在线编辑器,所以比较好奇processon是怎么做的,我当时生成缩略图的方法就是直接在前端截图然后上传到服务器啦😅😅,当然这在网速慢的时候在客户端会有速度慢的问题,也会增加服务器io压力, 我用的是html2canvas这个插件,也会有很多跨域的问题.