封装WebSocket

功能

一般来说,WebSocket应该具有以下功能:

  • 断线重连
  • 单例模式
  • 发布订阅
  • 超时提示
  • 心跳保活
  • 错误处理

源码

源码使用ts编写:

/**
 * @file websocket链接相关
 */

interface SubscribeList {
    [index: string]: Function[]
}

export class Socket {
    private static instance: Socket|null;
    private static _isConnected: boolean = false;

    private readonly cachedUrl: string = '';
    private readonly cachedOnConnected: Function | undefined;

    private socket!: WebSocket;

    // all,通用回调函数
    private cbs: Function[] = [];
    private subscribeList: SubscribeList = {};
    // error,socket连接出错时的回调函数
    private errCbs: Function[] = [];

    // 重试次数
    private reconnectTimes: number = 0;
    private maxReconnectTimes: number = 10;

    private timeout: number = 60 * 1000; // 60s超时
    private timeoutTimer: any = null;

    // 心跳检测由server端触发:适用于服务端释放资源
    // websocket支持心跳检测帧消息 ping/pong opcode 9/10
    // 对于Javascript并没有暴露心跳相关API:https://stackoverflow.com/questions/10585355/sending-websocket-ping-pong-frame-from-browser
    // 实际测试:server端发送ping帧的时候,浏览器会自动回应pong消息

    constructor(url: string, onConnected?: Function) {
        if (Socket.instance) {
            return Socket.instance;
        }

        this.cachedUrl = url;
        this.cachedOnConnected = onConnected;
        this.socket = this.connect(url, onConnected);
        Socket.instance = this;
    }

    static get isConnected(): boolean {
        return this._isConnected;
    }

    connect(url: string, onConnected?: Function) {
        const ws = new WebSocket(url);
        ws.onopen = (...args) => {
            Socket._isConnected = true;
            onConnected && onConnected(...args);
        };
        this.init(ws);
        return ws;
    }

    init(socket: WebSocket) {
        socket.onmessage = (evt: any) => {
            this.timeoutTimer && clearTimeout(this.timeoutTimer);
            this.reconnectTimes = 0;
            let jsonData: any = {};
            try {
                jsonData = JSON.parse(evt.data);
            }
            catch (e) {
                throw new Error('[socket]: data' + evt.data + 'cannot convert to json.');
            }
            finally {
                this.callCbs(this.cbs, jsonData);
                this.callCbs(this.subscribeList[jsonData.Name] || [], jsonData);
            }
        };

        socket.onerror = (...err) => {
            Socket._isConnected = false;
            Socket.instance = null;
            this.reconnected();
            this.errCbs.forEach((cb: Function) => cb(...err));
        };

        socket.onclose = (...reason) => {
            Socket._isConnected = false;
            Socket.instance = null;
        };
    }

    private callCbs(cbs: Function[], jsonData: object) {
        let delIdxList: number[] = [];

        cbs.forEach((cb, idx) => {
            cb(jsonData);
            // @ts-ignore
            if (cb.isOnce) {
                delIdxList.push(idx);
            }
        });

        delIdxList.forEach(it => {
            cbs.splice(it, 1);
        });
    }

    private startTimeOutTimer() {
        this.timeoutTimer = setTimeout(() => {
            this.callCbs(this.errCbs, new Error('[socket]: webSocket接受消息超时!'));
        }, this.timeout);
    }

    sendJSON(data: Object) {
        if (Socket._isConnected) {
            this.socket.send(JSON.stringify(data, null, 4));
            // 设置统一超时处理,不区分某个send请求的60s延迟,发送多个命令之后只要有响应就清除超时定时器
            // 因为只要有响应就说明服务器在正常工作,应继续等待请求处理
            this.startTimeOutTimer();
        }
        else {
            this.callCbs(this.errCbs, new Error('[socket]: 当前WebSocket未连接!'));
        }
    }

    sendPrimitive(data: string) {
        if (Socket._isConnected) {
            this.socket.send(data);
        }
        else {
            this.callCbs(this.errCbs, new Error('[socket]: 当前WebSocket未连接!'));
        }
    }

    private reconnected() {
        if (!Socket._isConnected && this.reconnectTimes < this.maxReconnectTimes) {
            setTimeout(() => {
                this.reconnectTimes++;
                this.socket = this.connect(this.cachedUrl, this.cachedOnConnected);
            }, 2000);
        }
    }

    destroy() {
        this.socket.close(1000);
        Socket.instance = null;
    }

    // 只能remove具名函数
    private removeListener(cbList: Function[], cb?: Function) {
        if (!cb) {
            cbList.length = 0;
            return;
        }

        for (let i = 0; i < cbList.length; i++) {
            const currentCb = cbList[i];
            if (cb === currentCb) {
                cbList.splice(i, 1);
                break;
            }
        }
    }

    unsubscribe(eventName: string, cb?: Function) {
        if (eventName === 'error') {
            this.removeListener(this.errCbs, cb);
        }
        else if (eventName === 'all') {
            this.removeListener(this.cbs, cb);
        }
        else if (this.subscribeList[eventName]) {
            this.removeListener(this.subscribeList[eventName], cb);
        }
    }

    subscribe(eventName: string, cb: Function, once?: boolean) {
        // @ts-ignore
        cb.isOnce = once;
        if (eventName === 'error') {
            this.errCbs.push(cb);
        }
        else if (eventName === 'all') {
            this.cbs.push(cb);
        }
        else {
            if (!this.subscribeList[eventName]) {
                this.subscribeList[eventName] = [cb];
            }
            else {
                this.subscribeList[eventName].push(cb);
            }
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值