WebSocket握手过程与心跳机制详解

一、知识点描述
WebSocket握手是WebSocket连接建立的关键过程，它通过HTTP升级机制将HTTP协议切换为WebSocket协议，随后建立全双工通信。心跳机制（Heartbeat）用于维持连接活跃性，检测连接健康状态，防止因超时或网络问题导致的静默断开。这两个机制共同保障了WebSocket连接的稳定性和实时性。

二、知识点详解

第一部分：WebSocket握手过程

1. 握手概述

• WebSocket握手是一个基于HTTP/1.1的升级请求，客户端发起一个特殊的HTTP请求，服务器响应确认，随后协议升级为WebSocket
• 整个握手过程是一次HTTP请求-响应交换，但这不是普通的HTTP请求，而是协议升级请求
• 握手完成后，后续通信都使用WebSocket协议的数据帧格式，不再是HTTP协议

2. 客户端握手请求
客户端发送的握手请求包含以下关键要素：

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

各头部字段详解：

• Upgrade: websocket

  • 表示客户端希望升级到WebSocket协议
  • 这是协议升级的标志性头部

• Connection: Upgrade

  • 指示这是一个连接升级请求
  • 必须与Upgrade头部一起使用

• Sec-WebSocket-Key: [base64编码的16字节随机值]

  • 这是握手的安全关键，防止缓存代理转发WebSocket流量
  • 客户端生成16字节随机数，base64编码后发送
  • 这个值是随机的，每个连接都不同
  • 注意：这不是加密密钥，只是防伪令牌

• Sec-WebSocket-Version: 13

  • 指定WebSocket协议版本
  • 13表示RFC 6455（当前标准）

• Sec-WebSocket-Protocol: [子协议列表]

  • 可选字段
  • 客户端支持的子协议列表，逗号分隔
  • 服务器从列表中选择一个响应，或忽略

• Origin: [源地址]

  • 在浏览器环境中自动添加
  • 用于跨域安全检查

3. 服务器握手响应
服务器验证请求后，返回升级响应：

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

各头部字段详解：

• 状态码：101 Switching Protocols

  • 表示协议切换成功
  • 这是唯一合法的成功响应码

• Upgrade: websocket 和 Connection: Upgrade

  • 确认协议升级

• Sec-WebSocket-Accept: [计算值]

  • 这是握手的核心验证步骤
  • 服务器将收到的Sec-WebSocket-Key与固定GUID连接，然后计算SHA-1哈希，最后base64编码
  • 具体计算公式：base64(sha1(Sec-WebSocket-Key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"))
  • 固定GUID "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" 来自RFC 6455
  • 客户端必须验证这个值，确保是合法的WebSocket服务器

• Sec-WebSocket-Protocol: [选中的子协议]

  • 可选字段
  • 服务器从客户端支持的子协议中选择一个
  • 如果未选择，则不包含此字段

4. 握手失败情况

• 如果服务器不支持WebSocket，返回非101状态码（如200、404等）
• 如果Sec-WebSocket-Accept验证失败，客户端必须关闭连接
• 如果版本不匹配，服务器返回包含Sec-WebSocket-Version的400响应

5. 握手安全机制深度解析
为什么需要Sec-WebSocket-Key/Accept机制？

• 防缓存攻击：主要目的是防止不透明的代理服务器缓存WebSocket握手
• 具体场景：如果恶意客户端发送一个类似WebSocket的HTTP请求，代理可能缓存响应。后续真正的WebSocket请求可能得到缓存响应，而无法建立连接
• GUID的作用：固定的UUID确保计算过程可预测，防止服务器使用简单的固定值
• 随机性要求：每个连接的Key都不同，防止重放攻击

第二部分：WebSocket心跳机制

1. 心跳机制的必要性

• 网络中间设备超时：防火墙、代理、负载均衡器等可能自动关闭空闲连接
• 检测连接健康：及时发现网络中断、服务器宕机等情况
• 保持NAT映射：在NAT环境下，定期发送数据可保持NAT映射表项
• 避免假连接：客户端或服务器崩溃后，另一端可能仍认为连接有效

2. 心跳的实现方式

方式一：Ping/Pong控制帧（推荐）

• WebSocket协议定义了专门的控制帧：Ping（操作码0x9）和Pong（操作码0xA）
• Ping帧可包含应用数据，Pong帧必须包含与对应Ping相同的数据
• 规范要求：收到Ping必须回复Pong；Pong也可主动发送作为单向心跳

Ping帧发送示例：

// 客户端或服务器发送Ping
function sendPing() {
    // WebSocket API 提供了ping()方法
    if (typeof ws.ping === 'function') {
        ws.ping('heartbeat');
    } else {
        // 或者手动构造Ping帧
        const pingFrame = new Uint8Array([0x89, 0x00]); // FIN=1, RSV=0, Opcode=9, Mask=0, 长度=0
        ws.send(pingFrame);
    }
}

Pong帧自动处理：
现代浏览器的WebSocket API会自动回复Pong，但可以监听：

ws.on('pong', (data) => {
    console.log('收到pong响应');
});

方式二：应用层心跳

• 自定义消息类型，如{type: 'ping', timestamp: Date.now()}
• 对方收到后回复{type: 'pong', timestamp: ...}
• 适用于不支持Ping/Pong的旧环境

3. 心跳参数配置

关键参数：

• 心跳间隔（heartbeatInterval）：发送心跳的间隔，通常25-30秒
• 超时时间（timeout）：等待响应的最长时间，通常2-3倍心跳间隔
• 重试次数（maxRetries）：超时后重试次数

配置考虑因素：

1. 网络中间设备超时时间：常见值30-60秒，心跳间隔应小于此值
2. 应用实时性要求：实时性要求高则间隔短
3. 服务器性能：大量连接时，心跳频率影响性能
4. 移动网络特性：考虑省电模式、网络切换

4. 心跳机制的实现步骤

步骤1：初始化定时器

class WebSocketHeartbeat {
    constructor(ws, options = {}) {
        this.ws = ws;
        this.interval = options.interval || 25000; // 25秒
        this.timeout = options.timeout || 5000;    // 5秒超时
        this.maxRetries = options.maxRetries || 3;
        this.retryCount = 0;
        this.pingTimeout = null;
        this.heartbeatInterval = null;
    }
}

步骤2：启动心跳

start() {
    this.stop(); // 先停止可能存在的定时器
    
    this.heartbeatInterval = setInterval(() => {
        this.sendPing();
        this.waitForPong();
    }, this.interval);
}

步骤3：发送Ping并等待Pong

sendPing() {
    if (this.ws.readyState === WebSocket.OPEN) {
        // 记录发送时间
        this.lastPingTime = Date.now();
        
        // 发送Ping
        if (typeof this.ws.ping === 'function') {
            this.ws.ping();
        } else {
            // 应用层心跳
            this.ws.send(JSON.stringify({type: 'ping', id: Date.now()}));
        }
    }
}

waitForPong() {
    // 清除之前的超时定时器
    if (this.pingTimeout) clearTimeout(this.pingTimeout);
    
    // 设置新的超时定时器
    this.pingTimeout = setTimeout(() => {
        this.handleTimeout();
    }, this.timeout);
}

步骤4：处理Pong响应

// 监听Pong事件
this.ws.onpong = () => {
    this.handlePong();
};

// 或者监听message事件处理应用层pong
this.ws.onmessage = (event) => {
    try {
        const data = JSON.parse(event.data);
        if (data.type === 'pong') {
            this.handlePong();
        }
    } catch (e) {
        // 非JSON消息
    }
};

handlePong() {
    // 收到响应，清除超时定时器
    if (this.pingTimeout) clearTimeout(this.pingTimeout);
    this.retryCount = 0; // 重置重试计数
    
    // 计算往返时间（可选）
    if (this.lastPingTime) {
        const rtt = Date.now() - this.lastPingTime;
        console.log(`心跳RTT: ${rtt}ms`);
    }
}

步骤5：处理超时与重连

handleTimeout() {
    this.retryCount++;
    
    if (this.retryCount > this.maxRetries) {
        // 超过最大重试次数，关闭连接
        console.error('心跳超时，连接已断开');
        this.ws.close();
        this.stop();
        
        // 触发重连机制
        this.reconnect();
    } else {
        // 重试发送心跳
        console.warn(`心跳超时，第${this.retryCount}次重试`);
        this.sendPing();
        this.waitForPong();
    }
}

reconnect() {
    // 实现指数退避重连
    const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
    setTimeout(() => {
        new WebSocket(url); // 重新连接
    }, delay);
}

步骤6：清理资源

stop() {
    if (this.heartbeatInterval) {
        clearInterval(this.heartbeatInterval);
        this.heartbeatInterval = null;
    }
    if (this.pingTimeout) {
        clearTimeout(this.pingTimeout);
        this.pingTimeout = null;
    }
}

5. 心跳机制的优化策略

策略1：动态心跳间隔

// 根据网络状况调整心跳间隔
adjustIntervalBasedOnNetwork(connectionQuality) {
    if (connectionQuality === 'poor') {
        this.interval = 15000; // 网络差，15秒
    } else if (connectionQuality === 'good') {
        this.interval = 30000; // 网络好，30秒
    }
}

策略2：自适应超时

// 根据历史RTT调整超时时间
updateTimeoutBasedOnRTT() {
    const avgRTT = this.calculateAverageRTT();
    this.timeout = Math.max(avgRTT * 3, 3000); // 3倍RTT，至少3秒
}

策略3：空闲检测优化

• 当有数据收发时，重置心跳定时器
• 避免在活跃通信时发送不必要的心跳

策略4：移动网络优化

• 考虑移动网络切换（WiFi到4G）
• 在visibilitychange事件（页面切换）时发送心跳
• 屏幕关闭时降低心跳频率

6. 服务器端心跳实现

Node.js示例（ws库）：

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

wss.on('connection', (ws) => {
    console.log('客户端连接');
    
    // 初始化心跳
    let isAlive = true;
    
    // 定时发送Ping
    const heartbeatInterval = setInterval(() => {
        if (!isAlive) {
            clearInterval(heartbeatInterval);
            return ws.terminate();
        }
        
        isAlive = false;
        ws.ping();
    }, 30000);
    
    // 监听Pong响应
    ws.on('pong', () => {
        isAlive = true;
    });
    
    // 清理定时器
    ws.on('close', () => {
        clearInterval(heartbeatInterval);
    });
});

7. 常见问题与解决方案

问题1：心跳导致高CPU使用率

• 优化：使用setTimeout代替setInterval，避免定时器堆叠
• 优化：在心跳间隔内如果有数据发送，跳过下一次心跳

问题2：虚假Pong响应

• 场景：网络设备可能自动回复Pong
• 解决方案：在Ping中包含随机数，验证Pong中的随机数

问题3：大规模连接的心跳风暴

• 场景：数千连接同时发送心跳
• 解决方案：错峰发送，为每个连接设置不同的相位偏移

// 为每个连接设置不同的起始时间
const phaseOffset = Math.random() * this.interval;
setTimeout(() => {
    this.startHeartbeat();
}, phaseOffset);

8. 握手与心跳的关系

1. 时序关系：握手成功后才开始心跳
2. 状态同步：心跳失败可能触发重连，重连需要重新握手
3. 错误处理：握手失败直接重连，心跳失败先重试再重连
4. 资源管理：心跳定时器在连接关闭时必须清理

三、总结
WebSocket握手通过HTTP升级机制安全建立连接，Sec-WebSocket-Key/Accept机制防止缓存攻击。心跳机制通过定期Ping/Pong帧维持连接活跃，需要合理配置间隔、超时和重试策略。两者结合确保了WebSocket连接的可靠性和实时性，是实时Web应用的基础保障。在实际应用中，需要根据网络环境、设备特性、应用需求动态调整心跳策略，平衡实时性与资源消耗。