前端 web socket企业级完美封装+jsDoc注释(含有ts+js两种版本)

使用js封装

const WebSocketService = (() => { // 使用立即执行函数包裹模块，确保变量不污染全局作用域
    let socket = null; // 定义 WebSocket 实例变量
    let reconnectAttempts = 3; // 重连尝试次数
    let currentAttempt = 0; // 当前重连尝试次数
    let heartbeatInterval = 30000; // 心跳检测间隔时间，单位：毫秒
    let heartbeatTimer = null; // 心跳定时器

    /**
     * 建立 WebSocket 连接
     * @param {string} url - WebSocket 服务的 URL 地址
     * @returns {WebSocket} 返回 WebSocket 实例
     */
    const connect = (url) => {
        socket = new WebSocket(url); // 创建 WebSocket 实例

        // WebSocket 连接成功时的事件处理函数
        socket.addEventListener('open', handleOpen);
        // WebSocket 收到消息时的事件处理函数
        socket.addEventListener('message', handleMessage);
        // WebSocket 连接发生错误时的事件处理函数
        socket.addEventListener('error', handleError);
        // WebSocket 连接关闭时的事件处理函数
        socket.addEventListener('close', handleClose);

        return socket; // 返回 WebSocket 实例
    };

    /**
     * 关闭 WebSocket 连接
     */
    const disconnect = () => {
        if (socket && socket.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
            socket.close(); // 关闭 WebSocket 连接
            stopHeartbeat(); // 停止心跳检测
        }
    };

    /**
     * WebSocket 连接成功时的处理函数
     */
    const handleOpen = () => {
        console.log('WebSocket连接已建立'); // 输出连接建立信息
        startHeartbeat(); // 启动心跳检测
        currentAttempt = 0; // 重置重连尝试次数
    };

    /**
     * 处理 WebSocket 收到的消息
     * @param {Event} event - WebSocket 消息事件
     */
    const handleMessage = (event) => {
        console.log('收到服务器消息:', event.data); // 输出收到的消息内容
        // 在这里添加消息处理逻辑，例如更新 UI 界面等操作
    };

    /**
     * WebSocket 连接发生错误时的处理函数
     * @param {Event} error - WebSocket 错误事件
     */
    const handleError = (error) => {
        console.error('WebSocket连接发生错误:', error); // 输出连接错误信息
        reconnect(socket.url); // 进行重连
    };

    /**
     * WebSocket 连接关闭时的处理函数
     */
    const handleClose = () => {
        console.log('WebSocket连接已关闭'); // 输出连接关闭信息
        stopHeartbeat(); // 停止心跳检测
        reconnect(socket.url); // 进行重连
    };

    /**
     * 启动心跳检测
     */
    const startHeartbeat = () => {
        heartbeatTimer = setInterval(() => { // 启动定时器
            if (socket.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
                socket.send('ping'); // 发送心跳消息
            } else {
                reconnect(socket.url); // 进行重连
            }
        }, heartbeatInterval); // 设置心跳检测间隔
    };

    /**
     * 停止心跳检测
     */
    const stopHeartbeat = () => {
        clearInterval(heartbeatTimer); // 清除定时器
    };

    /**
     * 断线重连机制
     * @param {string} url - WebSocket 服务的 URL 地址
     */
    const reconnect = (url) => {
        if (currentAttempt < reconnectAttempts) { // 检查重连尝试次数
            setTimeout(() => { // 设置定时器
                currentAttempt++; // 增加重连尝试次数
                connect(url); // 重新连接
            }, Math.pow(2, currentAttempt) * 1000); // 指数退避算法，增加重连间隔
        } else {
            console.error('WebSocket连接尝试达到上限，无法重新连接'); // 输出重连尝试达到上限信息
        }
    };

    return {
        connect,
        disconnect
    };
})();

使用ts封装

interface WebSocketService {
    connect(url: string): WebSocket;
    disconnect(): void;
}

const WebSocketService: WebSocketService = (() => {
    let socket: WebSocket | null = null; // 定义 WebSocket 实例变量
    let reconnectAttempts = 3; // 重连尝试次数
    let currentAttempt = 0; // 当前重连尝试次数
    let heartbeatInterval = 30000; // 心跳检测间隔时间，单位：毫秒
    let heartbeatTimer: NodeJS.Timeout | null = null; // 心跳定时器

    /**
     * 建立 WebSocket 连接
     * @param {string} url - WebSocket 服务的 URL 地址
     * @returns {WebSocket} 返回 WebSocket 实例
     */
    const connect = (url: string): WebSocket => {
        socket = new WebSocket(url); // 创建 WebSocket 实例

        // WebSocket 连接成功时的事件处理函数
        socket.addEventListener('open', handleOpen);
        // WebSocket 收到消息时的事件处理函数
        socket.addEventListener('message', handleMessage);
        // WebSocket 连接发生错误时的事件处理函数
        socket.addEventListener('error', handleError);
        // WebSocket 连接关闭时的事件处理函数
        socket.addEventListener('close', handleClose);

        return socket; // 返回 WebSocket 实例
    };

    /**
     * 关闭 WebSocket 连接
     */
    const disconnect = (): void => {
        if (socket && socket.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
            socket.close(); // 关闭 WebSocket 连接
            stopHeartbeat(); // 停止心跳检测
        }
    };

    /**
     * WebSocket 连接成功时的处理函数
     */
    const handleOpen = (): void => {
        console.log('WebSocket连接已建立'); // 输出连接建立信息
        startHeartbeat(); // 启动心跳检测
        currentAttempt = 0; // 重置重连尝试次数
    };

    /**
     * 处理 WebSocket 收到的消息
     * @param {MessageEvent} event - WebSocket 消息事件
     */
    const handleMessage = (event: MessageEvent): void => {
        console.log('收到服务器消息:', event.data); // 输出收到的消息内容
        // 在这里添加消息处理逻辑，例如更新 UI 界面等操作
    };

    /**
     * WebSocket 连接发生错误时的处理函数
     * @param {Event} error - WebSocket 错误事件
     */
    const handleError = (error: Event): void => {
        console.error('WebSocket连接发生错误:', error); // 输出连接错误信息
        reconnect(socket!.url); // 进行重连
    };

    /**
     * WebSocket 连接关闭时的处理函数
     */
    const handleClose = (): void => {
        console.log('WebSocket连接已关闭'); // 输出连接关闭信息
        stopHeartbeat(); // 停止心跳检测
        reconnect(socket!.url); // 进行重连
    };

    /**
     * 启动心跳检测
     */
    const startHeartbeat = (): void => {
        heartbeatTimer = setInterval(() => { // 启动定时器
            if (socket!.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
                socket!.send('ping'); // 发送心跳消息
            } else {
                reconnect(socket!.url); // 进行重连
            }
        }, heartbeatInterval); // 设置心跳检测间隔
    };

    /**
     * 停止心跳检测
     */
    const stopHeartbeat = (): void => {
        if (heartbeatTimer) {
            clearInterval(heartbeatTimer); // 清除定时器
            heartbeatTimer = null;
        }
    };

    /**
     * 断线重连机制
     * @param {string} url - WebSocket 服务的 URL 地址
     */
    const reconnect = (url: string): void => {
        if (currentAttempt < reconnectAttempts) { // 检查重连尝试次数
            setTimeout(() => { // 设置定时器
                currentAttempt++; // 增加重连尝试次数
                connect(url); // 重新连接
            }, Math.pow(2, currentAttempt) * 1000); // 指数退避算法，增加重连间隔
        } else {
            console.error('WebSocket连接尝试达到上限，无法重新连接'); // 输出重连尝试达到上限信息
        }
    };

    return {
        connect,
        disconnect
    };
})();

export default WebSocketService;

使用

import WebSocketService from './WebSocketService.js';

// 建立 WebSocket 连接
const url = 'ws://localhost:1332';
const socket = WebSocketService.connect(url);

// 当需要断开连接时
WebSocketService.disconnect();

注意：使用ts和js封装的功能没有差异，仅仅只是在ts上加了类型声明

给个关注呗！