Disclamer: Foxglove 2.0 现在已经闭源，此分析基于还存于互联网上的 1.87.0-dev 代码
Foxglove 介绍
foxglove有以下特性：
- 核心是基于React实现的浏览器播放，server端只需根据规范返回对应格式的数据即可，不限制server端的编程语言和实现方式，前后端通信主要基于WebSocket实现
- 预先定义了几十种数据格式，基于这些数据格式和实际业务需求可组合成多种不同的数据播放源，每个数据播放源都对应为一个panel
- 支持多种类型的播放形式，除了前述的几种类型，其还支持滑块、服务，日志、状态图、主题图等十几种样式，且可根据实际需求自行开发第三方的插件并很容易的整合到系统中，在Foxglove实际播放时每种播放类型都对应为一个panel
- 支持多通道播放，可对同一类型的panel可基于多个不同的数据源创建多个不同的panel来同时播放，也可同时配置多个不同类型的panel进行同时播放
- 支持界面自定义布局与调整，可根据实际需求灵活调整不同的panel的展示位置以及宽高等信息，当关闭某个panel时整个播放界面会自动调整已达到最佳显示效果
- 在创建panel并关联server端相关的topic或关闭配置好的panel后都会给server端发送对应的通知，方便进行server端开启或关闭数据推送服务，减少不必要的压力。同时，重复配置的panel只会建立一个连接，减少页面端的负载
使用流程如下图所示：
- 首先要创建对应的topic,每个topic都代表某种类型的展示数据，除了纯文本和表格之外，对于地图、3D、图片的展示方式需要根据官方文档设置对应的schema
- topic创建完毕后要进行注册，只有注册完毕的topic才能被对应的panel使用
- 创建panel，panel是数据展示的基本单位，其中纯文本和表格类型可兼容所有的topic，而对于地图、3D、图片类型则需要与特定schema的topic关联
- 创建完panel后，需要将其关联到对应的topic，并根据实际情况进行针对性的设置，如3D场景下设置显示的物体，地图场景下设置使用的地图源
- 启动对应的server端，持续不停的给相关topic写入数据
- 若一切正常，在Foxglvoe前端界面上对应的panel中会实时2的展示server端发送来的数据
- 若不需要某个panel，直接关闭即可，此时Foxglove会自动关闭相关的WebSocket连接
Foxglove websocket协议
协议发送两种格式的消息内容：
- JSON：{ op, ...data }。op是operation，两端基于op接收或处理命令，进行对应的状态转换
- Buffer：所有的业务数据（如channel、schema）都是以Buffer形式传递，以保证效率
可以传递的op如下所示：
- serverInfo、clientInfo：两端握手时接收的消息，包含支持的加密逻辑、是否是断线重连、版本等信息
- status、removeStatus：包含警告、严重错误等可能影响数据传递的日志，以及是否已从紧急状态恢复
- advertise、unadvertise：对支持的channel和schema进行广播和删除（仅server可操作，client仅监听）
- advertiseServices、unadvertiseServices：对子server（支持请求响应的实体）进行广播和删除（仅server可操作，client仅监听）
- parameterValues：对子server的参数定义进行广播（仅server可操作，client仅监听）
Buffer的具体结构如下：
