本文介绍如何通过原生WebSocket API封装一个具备自动重连、心跳检测、错误恢复等能力的稳健客户端。适用于需要长连接的实时通讯场景（如聊天室、实时数据监控等）。

核心功能亮点

1. 自动重连机制 - 指数退避策略重连
2. 心跳保活 - 双向检测连接活性
3. 消息可靠性 - 失败消息自动重发
4. 异常处理 - 错误分类处理机制
5. 状态管理 - 精准控制连接生命周期   

6. 关键优化点说明

7. 事件监听优化

   • 改用addEventListener替代onopen等属性赋值，允许多监听器共存
   • 新增错误边界处理，防止初始化失败导致程序崩溃

8. 智能重连策略

   • 避免网络恢复后仍要等待过长的延迟时间

9. 状态管理改进

   • 通过属性访问器清晰管理连接状态

10. 消息可靠性增强

    • 独立队列存储未发送消息
    • 连接恢复时自动重发

11. 配置与状态分离

    • 独立config对象管理配置参数
    • state对象清晰反映运行时状态
12.  

    /*** WebSocket客户端实现* @param {string} url - 连接地址* @param {string|string[]} [protocols] - 可选协议*/
    class WebSocketClient {// 默认配置（可通过构造函数覆盖）static config = {HEARTBEAT_INTERVAL: 30000, // 心跳间隔30sHEARTBEAT_TIMEOUT: 10000, // 心跳超时10sMAX_RECONNECT_ATTEMPTS: 5, // 最大重连次数BASE_RECONNECT_DELAY: 1000, // 基础重连延迟MAX_RECONNECT_DELAY: 30000, // 最大重连延迟30sMAX_PENDING_MESSAGES: 50 // 最大消息队列长度};// 运行时状态state = {ws: null,reconnectCount: 0, //重新连接计数isUserClosed: false, //用户自己关闭pendingMessages: [], //待发送的消息队列heartbeatTimer: null, //心跳计时器heartbeatTimeoutTimer: null //消息超时计时器};constructor(url, protocols, options = {}) {// 合并配置this.config = {...WebSocketClient.config,...options};this.url = url;this.protocols = protocols;this.connect();}/** 初始化连接 */connect() {this.dispose(); // 清理旧连接try {// 创建WebSocket实例this.state.ws = this.protocols ?new WebSocket(this.url, this.protocols) :new WebSocket(this.url);this.bindEventListeners();} catch (error) {console.error('WebSocket初始化失败:', error);this.handleReconnect();}}/** 清理旧连接和定时器 */dispose() {if (this.state.ws) {this.state.ws.close();this.state.ws = null;}this.clearHeartbeat();}/** 绑定事件监听器 */bindEventListeners() {const {ws} = this.state;ws.addEventListener('open', (event) => {console.log('连接已建立', event);/** 重置重连状态 */this.resetReconnect();//开始心跳this.startHeartbeat();/** 发送队列中的消息 */this.flushPendingMessages();});ws.addEventListener('error', (error) => {console.error('连接异常:', error);this.handleReconnect();});ws.addEventListener('close', (event) => {console.log('连接关闭:', event);this.handleClose(event);});ws.addEventListener('message', (event) => {this.handleIncomingMessage(event);});}/** 心跳管理 */startHeartbeat() {this.clearHeartbeat();this.state.heartbeatTimer = setInterval(() => {if (this.isConnected) {this.sendHeartbeat();this.monitorHeartbeatResponse();}}, this.config.HEARTBEAT_INTERVAL);}/** 发送心跳包 */sendHeartbeat() {this.send(JSON.stringify({type: 'ping',timestamp: Date.now()}));}/** 监测心跳响应 */monitorHeartbeatResponse() {this.state.heartbeatTimeoutTimer = setTimeout(() => {console.warn('心跳响应超时，执行断开');this.state.ws.close();}, this.config.HEARTBEAT_TIMEOUT);}/** 处理接收消息 */handleIncomingMessage(event) {try {const data = JSON.parse(event.data);if (data.type === 'ping') {//关闭超时计时器clearTimeout(this.state.heartbeatTimeoutTimer);return;}this.onMessage?.(data);} catch (error) {console.error('消息解析失败:', error);this.onError?.(error);}}/** 重连控制 */handleReconnect() {if (this.shouldReconnect) {const delay = this.calculateReconnectDelay();console.log(`将在 ${delay}ms 后重试...`);setTimeout(() => {this.state.reconnectCount++;this.connect();}, delay);}}/** 智能重连延迟计算 */calculateReconnectDelay() {return Math.min(this.config.BASE_RECONNECT_DELAY * (2 ** this.state.reconnectCount),this.config.MAX_RECONNECT_DELAY);}/** 发送消息（带队列控制） */send(data) {if (this.isConnected) {this.state.ws.send(data);} else {if (this.state.pendingMessages.length >= this.config.MAX_PENDING_MESSAGES) {console.warn('消息队列已满，丢弃最旧消息');this.state.pendingMessages.shift();}this.state.pendingMessages.push(data);}}/** 清空心跳定时器 */clearHeartbeat() {clearInterval(this.state.heartbeatTimer);clearTimeout(this.state.heartbeatTimeoutTimer);this.state.heartbeatTimer = null;this.state.heartbeatTimeoutTimer = null;}/** 重置重连状态 */resetReconnect() {this.state.reconnectCount = 0;this.state.isUserClosed = false;}/** 处理连接关闭事件 */handleClose(event) {this.clearHeartbeat();if (!this.state.isUserClosed) {this.handleReconnect();}}/** 发送队列中的消息 */flushPendingMessages() {while (this.state.pendingMessages.length > 0 && this.isConnected) {this.state.ws.send(this.state.pendingMessages.shift());}}// 公开方法//关闭close() {this.state.isUserClosed = true;this.dispose();}//重链接reconnect() {this.close();this.state.isUserClosed = false;this.connect();}// 状态判断//判断socket是开启状态吗get isConnected() {return this.state.ws?.readyState === WebSocket.OPEN;}//判断可以重连吗get shouldReconnect() {return !this.state.isUserClosed &&this.state.reconnectCount < this.config.MAX_RECONNECT_ATTEMPTS;}
    }// 使用示例
    // const ws = new WebSocketClient('wss://echo.websocket.org');
    // ws.onMessage = (data) => console.log('收到消息:', data);
    // ws.send('Hello World');

    使用示例

    // 初始化客户端
    const client = new WebSocketClient('wss://api.example.com/ws');// 监听消息
    client.onMessage = (data) => {console.log('收到消息:', data);
    };// 发送消息
    document.getElementById('sendBtn').addEventListener('click', () => {client.send(JSON.stringify({ type: 'chat', content: 'Hello World' }));
    });// 异常处理
    client.onError = (error) => {console.error('连接异常:', error);
    };