赶快收藏！全网最佳 WebSocket 封装：完美支持断网重连、自动心跳！

IT_陈寒

发布于 2025-06-01 12:51:26

1.8K0

在现代 Web 开发中，WebSocket 已成为实现实时通讯的常用技术。然而，直接使用 WebSocket API 时，开发者常常需要面对断网重连、心跳检测等问题，增加了开发难度和复杂度。本文将介绍一种封装后的 WebSocket 解决方案，不仅支持断网重连和自动心跳，还简化了使用流程，极大提升开发效率。

一、WebSocket 基础

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它是为了解决 HTTP 协议不能进行实时通讯而设计的，可以在不经过轮询的情况下实现浏览器与服务器的实时、双向通讯。

WebSocket 的基本使用

在原生 JavaScript 中，WebSocket 的使用非常简单：

const socket = new WebSocket('ws://example.com/socket');

// 连接成功时触发
socket.onopen = function(event) {
    console.log('Connection established');
};

// 接收到消息时触发
socket.onmessage = function(event) {
    console.log('Message received: ' + event.data);
};

// 连接关闭时触发
socket.onclose = function(event) {
    console.log('Connection closed');
};

// 连接发生错误时触发
socket.onerror = function(event) {
    console.error('WebSocket error: ' + event);
};

// 发送消息
socket.send('Hello Server!');

尽管 WebSocket 的 API 简洁易用，但它并不提供自动重连和心跳检测等功能。接下来，我们将封装一个 WebSocket 客户端，解决这些问题。

二、封装 WebSocket 客户端

我们的目标是封装一个支持断网重连和自动心跳的 WebSocket 客户端。以下是实现代码：

WebSocketClient 类

class WebSocketClient {
    constructor(url, options = {}) {
        this.url = url;
        this.reconnectDelay = options.reconnectDelay || 1000; // 重连间隔时间
        this.heartbeatInterval = options.heartbeatInterval || 5000; // 心跳间隔时间
        this.heartbeatMsg = options.heartbeatMsg || 'ping'; // 心跳消息
        this.ws = null;
        this.isConnected = false;
        this.heartbeatTimer = null;
        this.reconnectTimer = null;
    }

    connect() {
        this.ws = new WebSocket(this.url);

        this.ws.onopen = () => {
            this.isConnected = true;
            console.log('Connection established');
            this.startHeartbeat();
        };

        this.ws.onmessage = (event) => {
            console.log('Message received: ' + event.data);
            if (event.data === 'pong') {
                console.log('Heartbeat response received');
            }
        };

        this.ws.onclose = () => {
            this.isConnected = false;
            console.log('Connection closed');
            this.stopHeartbeat();
            this.reconnect();
        };

        this.ws.onerror = (event) => {
            console.error('WebSocket error: ' + event);
            this.ws.close();
        };
    }

    send(message) {
        if (this.isConnected) {
            this.ws.send(message);
        } else {
            console.error('WebSocket is not connected');
        }
    }

    startHeartbeat() {
        this.stopHeartbeat();
        this.heartbeatTimer = setInterval(() => {
            if (this.isConnected) {
                this.send(this.heartbeatMsg);
            }
        }, this.heartbeatInterval);
    }

    stopHeartbeat() {
        if (this.heartbeatTimer) {
            clearInterval(this.heartbeatTimer);
            this.heartbeatTimer = null;
        }
    }

    reconnect() {
        if (!this.isConnected) {
            console.log(`Reconnecting in ${this.reconnectDelay / 1000} seconds...`);
            this.reconnectTimer = setTimeout(() => {
                this.connect();
            }, this.reconnectDelay);
        }
    }

    close() {
        this.ws.close();
    }
}

使用 WebSocketClient 类

以下是如何使用 WebSocketClient 类的示例：

const wsClient = new WebSocketClient('ws://example.com/socket', {
    reconnectDelay: 2000,
    heartbeatInterval: 10000,
    heartbeatMsg: 'ping'
});

// 连接 WebSocket
wsClient.connect();

// 发送消息
document.getElementById('sendButton').addEventListener('click', () => {
    const message = document.getElementById('messageInput').value;
    wsClient.send(message);
});

// 关闭 WebSocket 连接
document.getElementById('closeButton').addEventListener('click', () => {
    wsClient.close();
});

解释代码实现

构造函数：WebSocketClient 类的构造函数接受两个参数：WebSocket 服务器的 URL 和一个选项对象。选项对象允许我们设置重连间隔时间、心跳间隔时间和心跳消息。
连接方法：connect 方法创建一个新的 WebSocket 连接，并设置 onopen、onmessage、onclose 和 onerror 事件处理程序。
发送消息：send 方法用于发送消息。它首先检查 WebSocket 是否已连接。
心跳机制：startHeartbeat 方法启动一个定时器，每隔一段时间发送一次心跳消息。stopHeartbeat 方法用于停止心跳定时器。
重连机制：reconnect 方法在连接关闭后启动一个定时器，尝试重新连接 WebSocket 服务器。
关闭连接：close 方法用于手动关闭 WebSocket 连接。