WebSocket通信技术以及数据埋点过程解析

手机APP嵌入开启可视化功能的SDK，通过WebSocket的方式和服务器、前端进行相互通信，SDK会定时收到服务器下发的页面请求；然后会上报页面快照和界面因子信息到服务器，服务器收到信息后会根据界面因子信息对页面的每个元素进行分析，根据控件的类型来标记哪些页面元素是可以被埋点的，最后将可埋点信息交给前端渲染，此时，前端Web页面上展示就的就是可以埋点的页面。

埋点人员在渲染出来的前端Web页面上进行框选，标记事件属性等进行埋点。前端Web页面会将对应的埋点信息传递给服务器保存，SDK则会通过策略定时从服务器获取埋点信息。

WebSocket通信

由于埋点过程中需要设备APP与前端埋点Web页面进行长时间的连接，并且连接期间双方需要进行互相通信，所以就需要一种高效的支持双向通信的协议来支持这种场景。WebSocket是用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术，它基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程。

在具体的连接过程中，其实前端Web页面和SDK与服务器的连接都是基于WebSocket的，并且这两个连接最终会建立一个一对一的对应关系。易观在埋点的过程中规定，同一个版本的APP只允许一台设备进行连接埋点。

数据埋点过程

数据埋点过程是通过Http协议来实现的。服务器提供相关的埋点查询新增修改删除的接口。埋点人员通过浏览器在具体的埋点Web页面对埋点元素进行框选，继而填写对应的事件名称，然后点击相应的新增修改删除按钮即可。

用户编辑的所有的埋点信息最终都会保存到MySQL数据库中。用户最新的快照信息会保存在Redis中一段时间，供用户修改埋点的时候调用。用户编辑完所有的埋点后点击部署按钮，所有的埋点就会实时生效，其他设备上的APP就会获取到部署后的埋点信息。

至此，可视化数据埋点的流程和技术细节就介绍完了。