利用Wireshark抓取WebSocket数据包

分手后的思念是犯贱 2022-07-13 04:15 854阅读 0赞

## 前序 ##

最近刚到新的公司了，熟悉下环境，立马就要开始完成需求coding了。。比较坑的是，代码完全不熟悉的情况下，给个需求涉及到十几个模块了，都要改，郁闷。其中刚好有一个模块是web地图的，根据代码查看发现是通过**WebSocket**和**flash**进行实现的。  
比较坑的是，我这边看不到**websocket**服务端代码的，只有客户端，然而客户端代码大部分都是写在**JavaScript**中的，刚开始还不太熟悉那个，连发送请求的数据是什么都不知道，无奈只好想到抓包了。

## 过滤 ##

只要说到抓包，肯定是离开不了**Wireshark**的，堪称网络工程师的神器啊，基本的使用起来比较简单。当然了要深入实践也不容易，主要是要经常有使用的场景。这也算是我第一次通过这个工具帮助完成工作任务吧。  
好了，废话不多说，去官网安装最新版[Wireshark][]。  
过滤条件为**websocket**：  
![filter websocket][]  
这样就可以过滤掉其他大量的干扰数据包，只查看使用websocket协议的数据包。

## 查看数据包 ##

根据上图，第一条就是发送请求的数据包了，第二条是服务端响应的数据。

### 请求数据 ###

继续查看下面数据包的详细信息：  
![websocket\_req][websocket_req]  
最下面那行就是我们发送请求的数据了，可以看到就是一串JSON数据，如果是二进制的话就没办法查看了。

### 响应数据 ###

再看一下服务器端响应的数据：  
![websocket\_resp][websocket_resp]  
这里我们就知道了，大部分逻辑都是在**websocket**服务器端进行处理的，因此要完成这个功能需求就必须要修改**websocket**服务器端代码了。因为这个模块是一个比较关键的地方，而我才刚到这边来，老大也不会放心直接让我动那块的，因此只好跟他说一下这个情况就好了，让之前写这个模块的人员帮我添加这个功能吧。

## 总结 ##

虽然最后我也没有解决什么需求问题，不过比抓包之前要清晰明了多了。在这之前，我根本就不清楚这个地图是怎么进行数据通信交互的，现在算了比较了解了。也是我第一次见到有**Websocket**技术的实践吧。

[Wireshark]: https://www.wireshark.org/download.html
[filter websocket]: /images/20220713/0c01130db2ba4ab4a3a64ad26d3b1ff0.png
[websocket_req]: /images/20220713/61d4989c8dea47f19f4c991d1a99f1e1.png
[websocket_resp]: /images/20220713/2f62134963cd4f14a60fc4590b96634b.png