封装一个 WebSocket 帮助类

export default class WS {
    // 构造函数
    constructor(url, messageHandler, maxReconnectAttempts = 500) {
        this.url = url;
        this.ws = null;
        this.messageHandler = messageHandler;   // 外部传入的消息处理函数
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = maxReconnectAttempts; // 最大重连次数

        this.connect()
    }

    // 连接
    connect() {
        this.unBindEvent();
        this.ws = new WebSocket(this.url);
        this.bindEvent(); 
    }

    // 绑定事件
    bindEvent () {
        this.ws.onopen = () => {
            this.reconnectAttempts = 0;
            console.log('Websocket 连接成功');
        }

        this.ws.onmessage = (e) => {
            if (this.messageHandler && typeof this.messageHandler === 'function') {
                this.messageHandler(e.data);
            }
        }
        
        this.ws.onclose = () => {
            console.log('Websocket 连接断开，尝试重连...');
            if (this.reconnectAttempts < this.maxReconnectAttempts) {
                setTimeout(() => { this.connect() }, 3000);
                this.reconnectAttempts++;
            } else {
                console.error('达到最大重连次数，放弃连接');
            }
        }

        this.ws.onerror = (e) => {
            console.error('Websocket 连接错误', e);
        }
    }

    // 清空绑定的事件，避免内存泄漏
    unBindEvent () {
        if (this.ws) {
            this.ws.onopen = null;
            this.ws.onclose = null;
            this.ws.onerror = null;
            this.ws.onmessage = null;
            this.ws.close();
        }
    }

    // 发送消息
    sendMessage (message) {
        if (this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(message)); // 数据的发送和接收都是字符串形式
        } else {
            console.error('连接未就绪');
        }
    }

    // 关闭，断开连接
    disconnect() {
        this.ws.close();
    }
}

import WS from 'common/ws.js'

export default {
    created () {
        this.initSocket()
    }
    methods: {
        initSocket () {
            // 回调函数
            const handle = (data) => {
                try {
                    // 拿到后端推送过来的数据，并转为 JSON
                    const dt = JSON.parse(data);
                    
                    // do something...
                } catch (e) {
                    console.log('data', data);
                }
            }

            // 创建实例对象，进行连接
            // 并且通过连接地址传参（uid），传入回调函数（handle）
            const ws = new WS(`ws://此处填写您的IP地址或域名:端口号?uid=${this.user_id}`, handle);
        }
    }
}