[网络协议]WebSocket封装心跳检测重新连接

对websocket简单的封装,复制到项目里基本可以直接使用
websocket.js

class Webscoket {
    constructor(url, fn) {
        this.url = url;
        this.fn = fn
        this.lockReconnect
        this.timerId;
        //重新连接时间
        this.connectTime = 2000;
        this.heart = new heartCheck()
        this.createConnect()
    }

    createConnect() {
        this.ws = new WebSocket(this.url)
        //连接成功
        this.ws.onopen = () => {
        	//主要用于检测心跳
            this.heart.reset().start(this)
            //连接成功之后可以获取你想要的数据 不用获取删除即可
            this.send("xxxx")
        };

        //接收消息回调
        this.ws.onmessage = event => {
            this.heart.reset().start(this);
            this.fn(event)
        }

        //关闭socket回调
        this.ws.onclose = () => {};

        //出现错误回调
        this.ws.onerror = () => {
            this.reconnect()
        }
    }

    //向服务器发送数据
    send(message) {
        this.ws.send(message)
    }

    //关闭socket
    close() {
        this.heart.reset()
        this.ws.close()
    }

    //重新连接socket
    reconnect() {
        if (this.lockReconnect) {
            return
        }
        this.lockReconnect = true
        this.timerId && clearTimeout(this.timerId)
        this.timerId = setTimeout(() => {
            this.lockReconnect = false
            this.ws.close()
            this.createConnect()
        }, this.connectTime)
    }

}

/*心跳检测*/
class heartCheck {
    constructor() {
        //心跳检测时间
        this.timeout = 5000
        this.timeoutObj = null
        this.serverTimeoutObj = null
    }

    reset() {
        clearTimeout(this.timeoutObj)
        clearTimeout(this.serverTimeoutObj)
        return this
    }

    start(websock) {
        this.timeoutObj = setTimeout(() => {
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
            websock.ws.send("xxxxx")
            //如果超过一定时间还没重置，说明后端未向我们推送消息
            this.serverTimeoutObj = setTimeout(() => {
                this.reset()
                websock.reconnect()
            }, this.timeout)
        }, this.timeout)
    }
}

使用

<script src="./websocket.js"></script>
<script type="text/javascript">
	//所有事件监听
    const ws = new Webscoket("你的ws服务器地址", (event) => {
         console.log(event);
    });
    
    //重新连接
    function reConnect() {
        ws.reconnect()
    }

    //关闭连接
    function closeConnect() {
        ws.close();
    }

	//发送事件
    function sendEvent(data) {
    	ws.send(data);
    }
</script>