一遍就能读懂的WebSocket协议详解

let ws =new WebSocket('ws://localhost:8080')

let ws = new WebSocket("ws://localhost:9090");

ws.onopen = function () {
    console.log("链接成功");
    
};

ws.onmessage = function (data) {
    console.log('接受服务端数据', data)
        ws.send('hello world')

};

ws.onclose = function (e) {
    console.log('连接已经关闭')
}
ws.onerror = function (e) {
    console.log('连接发生错误')
}

export default class WebSocketClient {
    /**
     * 创建一个WebSocket客户端对象。
     *
     * @param {string} url - WebSocket服务器的URL。
     */
    constructor(url) {
        this.url = url; // 保存WebSocket服务器的URL
        this.websocket = null; // WebSocket连接对象
        this.reconnectAttempts = 0; // 重连尝试次数
        this.maxReconnectAttempts = 10; // 最大重连次数
        this.messageHandlers = {}; // 消息处理器
        this.eventHandlers = {}; // 事件处理器
        this.timeoutIds = {}; // 超时定时器ID
    }

    /**
     * 连接WebSocket服务器。
     */
    connect(type, data) {
        this.websocket = new WebSocket(this.url); // 创建WebSocket连接
        this.websocket.binaryType = 'arraybuffer'; // 设置二进制数据类型为ArrayBuffer
        this.websocket.onopen = () => {
            console.log('Websocket connection established.'); // WebSocket连接建立成功
            this.reconnectAttempts = 0; // 重连尝试次数重置
            this.dispatchEvent('open', data); // 分发打开事件
        };
        this.websocket.onmessage = event => {
            const message = event.data instanceof ArrayBuffer ? event.data : JSON.parse(event.data); // 解析收到的消息
            if (message.id && this.timeoutIds[message.id]) { // 收到响应消息时清除超时定时器
                clearTimeout(this.timeoutIds[message.id]);
                delete this.timeoutIds[message.id];
            }
            if (message.type && this.messageHandlers[message.type]) {
                for (let handler of this.messageHandlers[message.type]) {
                    handler(message); // 处理收到的消息
                }
            }
            this.dispatchEvent('message', message); // 分发消息事件
        };
        this.websocket.onerror = error => {
            console.error('Websocket error:', error); // WebSocket错误处理
            this.dispatchEvent('error', error); // 分发错误事件
        };
        this.websocket.onclose = (type, data) => {
            console.log('Websocket connection closed.'); // WebSocket连接关闭
            if (this.reconnectAttempts < this.maxReconnectAttempts) {
                setTimeout(() => {
                    this.connect(); // 重新连接
                    this.reconnectAttempts++;
                }, 2000);
            } else {
                console.error(`Websocket connection failed after ${this.maxReconnectAttempts} attempts.`); // 达到最大重连次数后仍未成功连接
                this.dispatchEvent('close', data); // 分发关闭事件
            }
        };
    }

    /**
     * 发送一个WebSocket消息。
     *
     * @param {object|ArrayBuffer} message - 要发送的消息，可以是JavaScript对象或ArrayBuffer。
     * @param {number} timeout - 超时时间（毫秒），如果在指定时间内没有收到响应，则调用超时处理函数。
     * @param {function} timeoutHandler - 超时处理函数，接收一个参数：要发送的消息对象。
     */
    send(message, timeout, timeoutHandler) {
        if (this.websocket.readyState === WebSocket.OPEN) {
            if (message instanceof ArrayBuffer) {
                this.websocket.send(message); // 发送二进制消息
            } else {
                const messageId = Math.random().toString(36).substr(2, 8); // 生成随机消息ID
                const messageWithId = Object.assign({}, message, {id: messageId}); // 添加消息ID字段
                const data = JSON.stringify(messageWithId); // 将消息对象转换为JSON字符串
                this.websocket.send(data); // 发送消息
                if (timeout) {
                    this.timeoutIds[messageId] = setTimeout(() => {
                        console.warn(`WebSocket request ${messageId} timed out.`); // 超时警告
                        delete this.timeoutIds[messageId]; // 清除超时定时器ID
                        timeoutHandler && timeoutHandler(message); // 调用超时处理函数
                    }, timeout);
                }
            }
        } else {
            console.error('Websocket connection not open, message not sent:', message); // WebSocket连接未打开时无法发送消息
        }
    }

    /**
     * 添加一个WebSocket消息处理器。
     *
     * @param {string} type - 消息类型。
     * @param {function} handler - 处理函数，接收一个参数：消息对象或ArrayBuffer。
     */
    addMessageHandler(type, handler) {
        if (!this.messageHandlers[type]) {
            this.messageHandlers[type] = []; // 若不存在该类型的消息处理器，则初始化为空数组
        }
        this.messageHandlers[type].push(handler); // 添加消息处理函数
    }

    /**
     * 移除一个WebSocket消息处理器。
     *
     * @param {string} type - 消息类型。
     * @param {function} handler - 处理函数。
     */
    removeMessageHandler(type, handler) {
        if (this.messageHandlers[type]) {
            const index = this.messageHandlers[type].indexOf(handler); // 查找处理函数在数组中的索引
            if (index !== -1) {
                this.messageHandlers[type].splice(index, 1); // 移除处理函数
            }
        }
    }

    /**
     * 添加一个WebSocket事件处理器。
     *
     * @param {string} type - 事件类型。
     * @param {function} handler - 处理函数，接收一个参数：事件数据。
     */
    addEventHandler(type, handler) {
        if (!this.eventHandlers[type]) {
            this.eventHandlers[type] = []; // 若不存在该类型的事件处理器，则初始化为空数组
        }
        this.eventHandlers[type].push(handler); // 添加事件处理函数
    }

    /**
     * 移除一个WebSocket事件处理器。
     *
     * @param {string} type - 事件类型。
     * @param {function} handler - 处理函数。
     */
    removeEventHandler(type, handler) {
        if (this.eventHandlers[type]) {
            const index = this.eventHandlers[type].indexOf(handler); // 查找处理函数在数组中的索引
            if (index !== -1) {
                this.eventHandlers[type].splice(index, 1); // 移除处理函数
            }
        }
    }

    /**
     * 分发 WebSocket 事件。
     *
     * @param {string} type - 事件类型。
     * @param {any} data - 事件数据。
     */
    dispatchEvent(type, data) {
        if (this.eventHandlers[type]) {
            for (let handler of this.eventHandlers[type]) {
                handler(data); // 调用事件处理函数
            }
        }
    }
    
/**
 * 发送心跳消息。
 */
sendHeartbeat() {
    const message = { type: 'heartbeat' }; // 心跳消息内容
    const intervalId = setInterval(() => {
        this.send(message,5,(e)=>{
            console.log(e)}); // 发送心跳消息
    }, 1000);
    this.addEventHandler('close', () => {
        clearInterval(intervalId); // 关闭 WebSocket 连接时清除定时器
    });
}
 
}