VSocket.js

function VSocket() {
    /**
     * 连接实例
     * @param {WebSocket}
     */
    this._socket = undefined

    /**
     * 事件处理器，那一系列 on 和 off 方法最终都会在这个属性里体现
     * @type {Object<string, Array>}
     */
    this._events = {}

    /**
     * 断线重连次数
     * @type {number}
     */
    this._reconnectCount = 5

    /**
     * 是否已连接
     * @type {boolean}
     */
    this.connected = false

    /**
     * 心跳间隔，毫秒
     * @type {number}
     */
    this._heartbeatInterval = 10000

    /**
     * 获取连接配置的方法
     * 通过外部赋值一个方法的方式，用于登录及断开连接重试
     * 返回一个object {server, appid, password}
     * 支持 async 方法
     * @type {function}
     */
    this.getConnectConfig = undefined
}

let reconnected = 0
let timeout = undefined

function reconnect(data, instance) {
    // 如果获取配置的方法没有赋值就不需要重试了
    if (typeof instance.getConnectConfig !== 'function') {
        instance.connected = false
        return
    }
    // 超时超过次数
    if (reconnected >= instance._reconnectCount) {
        instance.connected = false
        return
    }

    const second = 3
    clearTimeout(timeout)
    console.warn(`连接断开，将在 ${second} 秒后重试`)
    timeout = setTimeout(async () => {
        await instance.login()
        reconnected++
    }, second * 1000)
}

/**
 * 登录成功事件名
 * @type {string}
 */
VSocket.EVENT_LOGIN_SUCCESS = 'LOGON'

/**
 * 接收到新消息的事件名
 * @type {string}
 */
VSocket.EVENT_RECEIVE = 'RECEIVED'

/**
 * 连接断开的事件名
 * @type {string}
 */
VSocket.EVENT_DISCONNECT = 'CLOSED'

/**
 * 连接失败的事件名
 * @type {string}
 */
VSocket.EVENT_CONNECT_FAIL = 'CONNECT_FAIL'

VSocket.prototype = {
    constructor: VSocket,

    /**
     * 初始化
     * @param {string} server 服务地址
     * @returns {Promise}
     */
    init(server) {
        return new Promise(next => {
            this.connected = false
            this._socket = new WebSocket(server)
            this._socket.onmessage = res => {
                try {
                    let data = JSON.parse(res.data || '{}')
                    this._trigger(data.type, data.message)
                } catch (e) {
                    console.error("错误的消息格式：")
                    console.error(res.data)
                }
            }

            this._socket.onopen = () => {
                this.connected = true
                next()
            }
            this._socket.onclose = res => {
                // 如果之前连接成功，则触发断开，否则触发连接失败
                if (this.connected) {
                    this._trigger(this.constructor.EVENT_DISCONNECT, res)
                } else {
                    this._trigger(this.constructor.EVENT_CONNECT_FAIL, res)
                }
                next()
            }
            this.offDisconnect(reconnect)
            this.onDisconnect(reconnect)
        })
    },

    /**
     * 主动断开连接
     * 断开成功会触发 EVENT_DISCONNECT 事件
     */
    close() {
        if (this.connected) {
            this._socket.close()
        }
    },

    /**
     * 定时发送心跳包
     */
    heartbeat() {
        clearInterval(this.interval)
        this.interval = setInterval(() => {
            if (this.connected) {
                this._socket.send(JSON.stringify({
                    action: "Heartbeat"
                }))
            }
        }, this._heartbeatInterval)
    },

    /**
     * 获取心跳包间隔时长，毫秒
     * @returns {number}
     */
    getHeartbeatInterval() {
        return this._heartbeatInterval
    },

    /**
     * 设置心跳包间隔时长，毫秒
     * @param millisecond {number}
     */
    setHeartbeatInterval(millisecond) {
        this._heartbeatInterval = millisecond
    },

    /**
     * 登录
     * 该方法只能在 init 方法完成后调用，否则报错
     * @param {string} server 服务地址
     * @param {string} appid 应用ID
     * @param {string} password 密码
     */
    async login(server = "", appid= "", password= "") {
        if (!server) {
            let config = this.getConnectConfig()
            if (config instanceof Promise) {
                config = await config
            }
            if (typeof config === 'object' && config['server'] && config['appid'] && config['password']) {
                server = config['server']
                appid = config['appid']
                password = config['password']
            }
        }
        await this.init(server)
        this._socket.send(JSON.stringify({
            action: 'login',
            data: {
                appid,
                password,
            }
        }))
    },

    /**
     * 设置断线重连次数
     * @param count
     */
    setReconnectCount(count) {
        this._reconnectCount = count
    },

    /**
     * 获取断线重连次数
     * @returns {number}
     */
    getReconnectCount() {
        return this._reconnectCount
    },

    /**
     * 添加事件监听
     * @param {string} eventName
     * @param {function} callback
     */
    _on(eventName, callback) {
        if (!Array.isArray(this._events[eventName])) {
            this._events[eventName] = [];
        }
        this._events[eventName].push(callback)
    },

    /**
     * 移除事件监听
     * @param {string} eventName
     * @param {function|null} callback 传入一个函数，将只移除对应的监听器，否则移除该事件的全部监听器
     */
    _off(eventName, callback = null) {
        if (callback === null) {
            delete this._events[eventName]
            return
        }
        for (let index in (this._events[eventName] || [])) {
            if (callback === this._events[eventName][index]) {
                this._events[eventName].splice(index, 1)
            }
        }
    },

    /**
     * 触发事件
     * @param {string} eventName
     * @param data
     */
    _trigger(eventName, data) {
        for (let handler of this._events[eventName] || []) {
            handler(data, this)
        }
    },

    /**
     * 登录成功事件
     * @param {function} callback
     */
    onLoginSuccess(callback) {
        reconnected = 0
        this._on(this.constructor.EVENT_LOGIN_SUCCESS, callback)
    },

    /**
     * 移除登录成功事件监听
     * @param {function|null} callback 传入一个函数，将只移除对应的监听器，否则移除该事件的全部监听器
     */
    offLoginSuccess(callback = null) {
        this._off(this.constructor.EVENT_LOGIN_SUCCESS, callback)
    },

    /**
     * 接收消息事件
     * @param {function} callback
     */
    onReceive(callback) {
        this._on(this.constructor.EVENT_RECEIVE, callback)
    },

    /**
     * 移除新消息事件监听
     * @param {function|null} callback 传入一个函数，将只移除对应的监听器，否则移除该事件的全部监听器
     */
    offReceive(callback = null) {
        this._off(this.constructor.EVENT_RECEIVE, callback)
    },

    /**
     * 连接断开事件
     * @param {function} callback
     */
    onDisconnect(callback) {
        this._on(this.constructor.EVENT_DISCONNECT, callback)
    },

    /**
     * 移除连接断开事件监听
     * @param {function|null} callback 传入一个函数，将只移除对应的监听器，否则移除该事件的全部监听器
     */
    offDisconnect(callback = null) {
        this._off(this.constructor.EVENT_DISCONNECT, callback)
    },

    /**
     * 连接失败事件
     * @param {function} callback
     */
    onConnectFail(callback) {
        this._on(this.constructor.EVENT_CONNECT_FAIL, callback)
    },

    /**
     * 移除连接失败事件监听
     * @param {function|null} callback 传入一个函数，将只移除对应的监听器，否则移除该事件的全部监听器
     */
    offConnectFail(callback = null) {
        this._off(this.constructor.EVENT_CONNECT_FAIL, callback)
    },
}

export default VSocket