websocket初探

时间：2024-03-31 08:20:27

本篇源于小程序的websocket请求，一个邻组的项目，自己改造了公共的框架，所有的请求都是走的websocket（搞得我在network中找了好久请求都找不到。。。），后来还是调试进了框架代码，才发现的o(╥﹏╥)o

言归正传，先看看websocket的请求是啥子样子的：

websocket初探

websocket初探

为啥以前从没发现network中有一项是WS。。。

看看它有什么特别的：

  1. status是101——用来从HTTP协议切换成websocket协议
  2. type是websocket

  3. 请求头包含：

    • Connection:Upgrade——用来改变HTTP协议版本或换用其它协议
    • Upgrade:websocket
    • Sec-WebSocket-Key:JH/Dq7IVjrHg5CjKSxC1Nw==——随机的base64串，用于和服务端握手

  4. 响应头包含：

    • Connection:upgrade
    • upgrade:websocket
    • sec-websocket-accept:s6n8ERcugSD36hYNCr1/Pkezqq8=——服务端根据收到的Sec-WebSocket-Key加258EAFA5-E914-47DA-95CA-C5AB0DC85B11 SHA-1加密后转为base64生成的

有了上面的了解想说对一个前端菜鸡来看看请求体、响应体就够了，然而自己总是太天真(Ｔ▽Ｔ)

看看响应体是啥子样子的

websocket初探

除了前两行没一个能看懂的，前路漫漫啊~

没错，websocket的传输是以Frame实现的，这不重要。像是前两行的数据也是咱们人类能看懂的，下面那一堆Binary Frame是个什么鬼？其实这个可以理解为二进制的数据传输，就好像post进行文件传输一样的二进制。然后来看看Opcode和mask是啥子意思：

  1. Opcode 2就代表着是binary，Opcode的合法值为：

    • %x0 : 代表连续的帧
    • %x1 : text帧
    • %x2 ： binary帧
    • %x3-7 ： 为非控制帧而预留的
    • %x8 ： 关闭握手帧
    • %x9 ： ping帧
    • %xA : pong帧
    • %xB-F ： 为非控制帧而预留的

  2. mask是一种掩码标识，由客户端发起的帧mask均为1，服务端接收到以后会进行异或运算获取真实值

但是，知道了这些也并不能让我看到返回的数据，于是WireShark登场。可以理解为Fiddler抓取应用层数据（HTTP），WireShark抓取传输层数据（TCP）。

然而。。。在瀚如烟海的包中，微信开发者工具的包没有找到。。。ORZ

所以目前没有可以直接查看binary数据的工具，只能在代码中进行处理，打印出来。哪位大神有好的方法，求共享啊~~~

未完待续。。。

参考：
1. 学习WebSocket协议—从顶层到底层的实现原理（修订版）
2. 原来你是这样的Websocket–抓包分析

相关文章