Chrome DevTools中WebSocket相关技术问题咨询（Socket.IO场景）

1. 为何Chrome中显示的请求方法仍为HTTP GET？ #

没错，这完全是因为WebSocket的握手阶段确实依赖HTTP协议。WebSocket本身是独立的双向通信协议，但它必须先通过HTTP请求发起握手——也就是你看到的这个GET请求，请求头里会带着Upgrade: websocket和Connection: Upgrade字段，告诉服务器“我要切换到WebSocket协议”。

当服务器同意升级后，这条HTTP连接就会转换成WebSocket连接，后续的通信就不再走HTTP了。Chrome DevTools会把这个初始握手请求标记为type=WebSocket，所以你看到的GET方法就是这个握手步骤的痕迹，属于正常现象~ Socket.IO也是基于这个机制建立WebSocket连接的，哪怕它有其他 fallback 方案，WebSocket模式下第一步都是这个HTTP握手。

2. 若Chrome中显示4条type=WebSocket的记录，是否代表存在4个WebSocket连接？ #

不一定哦！Chrome里的这些记录是所有发起过的WebSocket握手请求，不管最终有没有成功建立连接。

比如Socket.IO自带自动重连机制，如果之前的连接断开，它会自动发起新的握手尝试，每一次尝试都会生成一条新的type=WebSocket记录。另外，如果你用了Socket.IO的命名空间（Namespaces），不同的命名空间可能会创建独立的WebSocket连接（不过部分场景下也会复用连接，取决于你的配置）。还有一种情况是，有些握手请求可能因为网络问题或服务器未响应最终失败，但记录还是会留在DevTools里。

如果想知道当前活跃的WebSocket连接数，直接看DevToolsNetwork面板的WS标签页就好，那里显示的是实时有效的连接。

3. 其中1个已完成、3个处于pending状态，这意味着什么？ #

咱们分开拆解：

• 已完成的记录：这个是成功完成HTTP握手并升级为WebSocket连接的请求。这里的“已完成”指的是HTTP握手阶段结束，后续的WebSocket消息通信会在这条已建立的连接上进行，不会再生成新的HTTP请求记录。哪怕之后连接正常关闭，这条记录的状态也会保持“已完成”。
• pending状态的记录：这些是发起了WebSocket握手请求，但还没得到服务器响应、或者连接尝试卡在半路上的情况。常见原因包括：
  • Socket.IO的自动重连尝试：之前的连接断开后，客户端发起新的握手请求，但服务器未响应或网络延迟导致请求处于等待状态。
  • 服务器端处理异常：比如服务器没有正确处理WebSocket握手请求，导致请求挂起超时。
  • 跨域/权限问题：浏览器跨域策略或服务器CORS配置有问题，可能导致请求卡在pending状态，最终失败。

这些pending的请求如果长时间无响应，最终会变成失败状态，Socket.IO可能会继续发起新的重连尝试，直到成功或达到重连次数上限。

内容的提问来源于stack exchange，提问作者Willem van der Veen