研究这个事情的起因是产品的一个需求,要求对远程的接口抓包进行实时展示。一般做法都是通过 tcpdump 进行抓包,然后使用 Wireshark 进行可视化展示,但是产品要求是要“实时”,也就不能通过生成 pcap 文件下载让用户手动打开 Wireshark 的方式了。
1. 技术选型
接到这个需求后,我们就开始了技术选型。主要就两个方向,一个是前端做数据展示,另一个是通过调用 Wireshark 做数据展示。
前端实现的话,单单靠 JavaScript 是没法达到要求的,首先没有现成的 pcap 解析库,从头开始造轮子太耗时间,而且 JavaScript 的性能瓶颈在那,首先就排除了 JavaScript 实现的可能。
虽然 JavaScript 可能达不到性能要求,但是现代浏览器已经支持 WebAssembly (简称 WASM ),可以使用别的语言实现最消耗性能的部分。经过一番搜索,找到了一个开源的工具库: @goodtools/wiregasm ,一个将 Wireshark 的包分析器编译成 WASM 的库,NICE!