WebSocket 握手过程

在现代 Web 开发中，WebSocket 协议因其高效的实时通信能力而被广泛应用。WebSocket 允许客户端和服务器之间建立持久的双向通信连接，从而实现诸如实时聊天、在线游戏、物联网设备监控等场景。然而，WebSocket 连接的建立并非直接开始，而是需要通过一个关键的握手过程来完成协议的升级。本文将详细解析 WebSocket 握手过程，帮助开发者更好地理解和应用这一技术。

1. WebSocket 握手过程概述

WebSocket 握手是建立 WebSocket 连接的第一步，通过 HTTP 请求和响应完成协议从 HTTP 到 WebSocket 的升级。握手过程涉及客户端和服务器之间的协商，确保双方都支持 WebSocket 协议，并通过安全机制防止恶意攻击。

2. 客户端发送握手请求

客户端通过 HTTP/1.1 协议向服务器发送一个特殊的 GET 请求，请求中包含以下关键头信息：

关键头信息

• Upgrade websocket： 指示客户端希望升级到 WebSocket 协议。
• Connection: Upgrade： 指示客户端希望建立持久连接。
• Sec-WebSocket-Key： 一个随机生成的 Base64 编码字符串，用于安全验证。
• Sec-WebSocket-Version： 指示客户端使用的 WebSocket 协议版本，通常是 13。

示例请求

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

3. 服务器响应握手请求

服务器接收到客户端的握手请求后，会进行验证。如果服务器支持 WebSocket 协议并且验证通过，它将返回一个 HTTP 101 Switching Protocols 响应。
关键头信息

• Upgrade: websocket： 确认升级到 WebSocket 协议。
• Connection: Upgrade： 确认连接升级。
• Sec-WebSocket-Accept： 服务器根据客户端提供的 Sec-WebSocket-Key 计算出的值。计算方法是将 Sec-WebSocket-Key 与一个固定的 GUID (“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”) 拼接，然后计算 SHA-1 哈希值，最后进行 Base64 编码。
  示例响应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

4. 客户端验证握手响应

客户端收到服务器的响应后，会验证 Sec-WebSocket-Accept 的值是否正确。如果验证通过，握手成功，客户端和服务器之间的连接将从 HTTP 协议升级为 WebSocket 协议。

5. 建立 WebSocket 连接

一旦握手成功，WebSocket 连接建立，客户端和服务器可以通过该连接进行双向数据传输。WebSocket 使用帧格式传输数据，每个帧包含以下字段：

• FIN： 指示是否为消息的最后一个片段。
• RSV1, RSV2, RSV3： 保留位，用于扩展协议。
• Opcode： 操作码，定义帧的类型（如文本帧、二进制帧等）。
• Mask： 掩码位，用于防止恶意攻击。
• Payload Length： 数据长度。
• Payload： 实际传输的数据。

6. 安全性与注意事项

安全性

• 防止中间人攻击： 通过 Sec-WebSocket-Key 和 Sec-WebSocket-Accept 的校验机制，防止中间人攻击和伪造连接。
• 使用 SSL/TLS 加密： 通过wss:// 协议进行加密通信，确保数据传输的安全性。

注意事项

• 协议版本： 客户端和服务器必须支持相同的 WebSocket 协议版本（通常是 13）。
• 子协议协商： 客户端可以通过 Sec-WebSocket-Protocol 头部协商应用层协议。
• 跨域问题： WebSocket 不受同源策略限制，但服务器端需要正确配置以允许跨域请求。

7. 应用示例

客户端 JavaScript 示例

// 创建 WebSocket 连接
const ws = new WebSocket('ws://localhost/link');

// 连接成功事件
ws.onopen = function(event) {
  ws.send('Hello, Server!');
};

// 接收消息
ws.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

// 错误处理
ws.onerror = function(error) {
  console.error('出错了:', error);
};

// 连接关闭事件
ws.onclose = function(event) {
  console.log('连接断开:', event.code, event.reason);
};

服务器端 Node.js 示例

先安装 ws库

yarn add ws

const WebSocket = require('ws');
const server = new WebSocket.WebSocketServer({ port: 8080 });

server.on('connection', function(socket) {
  console.log('客户端连接');

  socket.on('message', function(message) {
    console.log('收到消息:', message);
    socket.send('Hello, Client!');
  });

  socket.on('close', function() {
    console.log('客户端已断开');
  });
});