一次websocket的抓包体验

一个简单的demo

我们知道websocket一种服务端推送技术，首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。后续数据传递是基于TCP的。

客户端代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>websocket client</title>

</head>

<body>

  <button id="open">open</button>

  <button id="send">send</button>

  <button id="close">close</button>

  <script type="text/javascript">

    (function (){

      let ws = null;

      document.querySelector("#open").addEventListener('click', e => {

        ws = new WebSocket("ws://127.0.0.1:8080");

        ws.addEventListener('open', e => console.log('open event, %o', e));

        ws.addEventListener('message', e => console.log('message event, %o', e));

        ws.addEventListener('close', e => console.log('close event, %o', e));

        ws.addEventListener('error', e => console.log('error event, %o', e));

      });

      document.querySelector("#send").addEventListener('click', e => {

        ws.send('hello');

      });

      document.querySelector("#close").addEventListener('click', e => {

        ws.close();

        ws = null;

      });

    })()

  </script>

</body>

</html>

服务端代码

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {

  ws.on('message', function incoming(message) {

    console.log('received: %s', message);

    ws.send('hello too!');

  });

  ws.send('something');

});

输出结果

open event, Event

message event, MessageEvent

message event, MessageEvent

close event, CloseEvent

细节

求头信息

从浏览器中可以看到ws握手的请求头信息

GET ws://127.0.0.1:8080/ HTTP/1.1

Host: 127.0.0.1:8080

Connection: Upgrade

Pragma: no-cache

Cache-Control: no-cache

Upgrade: websocket

Origin: http://zj.h5.m.taobao.com

Sec-WebSocket-Version: 13

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.8

Cookie: OUTFOX_SEARCH_USER_ID_NCOO=1973383732.1783078; l=AujoRgw9fUEEs1APUgk9dNwgONz6EUwb

Sec-WebSocket-Key: 7iAt/aVzQLvkwZmO6eHr3A==

Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

解释：

Upgrade: websocket

Connection: Upgrade

表示发起的是Websocket协议。

返回头信息

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: 32BWzg94jPj8C0kXzqHAru5pGbw=

101 code 转换协议：101 Switching Protocols

服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。

只有在切换新的协议更有好处的时候才应该采取类似措施。例如，切换到新的HTTP 版本比旧版本更有优势，或者切换到一个实时且同步的协议以传送利用此类特性的资源。

之上是应用层协议的内容，用wireshark抓包看下底层细节，先梳理下TCP协议本身。

wireshark

websocket握手

这是握手时HTTP协议底层依赖的TCP三次握手机制：最后一个是告诉客户端没有内容发送了。8080 为服务端端口号，61476 端口为客户端端口号。

websocket 握手成功

HTTP 101 协议转换

从HTTP 协议转为 websocket 协议，5001 端口号为 websocket 服务的端口号。

websocket 的一个数据包

关闭 websocket

可以看出61475端口一开始为HTTP服务的，后来由于101返回码，61475 端口转为 websocket 的 5001 端口号，服务端的8080端口对接客户端的5001端口号。关闭websocket时，由 61475 端口号发起关闭 5001 请求，与此同时 61475 端口和服务端的8080端口通信，告诉服务端我要关闭端口，成功后61475 再告诉 5001 端口，我关闭成功了。整个关闭流程结束。