html h5 vue websocket 断链心跳个人笔记

youarebeautiful - 2021-07-29 21:54:22

let webSocket = null;
let mAudio = null;
let webSocketStateInterval = null;
let heartInterval = null;
let number = 3;
let _closeType = false; // true主动挂断 false被动挂断

export default {
    initWebsocket() {
        let _that = this;
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        let _url = process.env.VUE_APP_socketURL + userInfo.id;
        webSocket = new WebSocket( _url);
        webSocket.onopen = function(event) {
            // console.log("webSocket onopen ----->", event);

            heartInterval = setInterval(function(){
                webSocket.send(JSON.stringify({cmd: 100}));
            }, 10000);

            webSocketStateInterval = setInterval(function(){
                switch (webSocket.readyState) {
                    case WebSocket.CONNECTING:
                        console.log("webSocket连接中---->");
                        break;
                    case WebSocket.OPEN:
                        console.log("webSocket打开中---->");
                        break;
                    case WebSocket.CLOSING:
                        console.log("webSocket关闭中---->");
                        break;
                    case WebSocket.CLOSED:
                        console.log("webSocket关闭成功---->");
                        if(webSocketStateInterval){
                            clearInterval(webSocketStateInterval);
                        }
                        if(_closeType == false){
                            _that.initWebsocket();
                            // number--; if(number === 0) {webSocket.close();}
                        }
                        break;
                    default:
                        console.log("webSocket-------");
                        break;
                }
            }, 2000);
        };
        webSocket.onmessage = function(event) {
            // console.log("webSocket onmessage ----->", event);
            let message = JSON.parse(event.data);
            // console.log("message----->", message);
            if (message.cmd == 100) {
                console.log("100-心跳中------", message.msg);
            }
        };
        webSocket.onerror = function(event) {
            console.log("webSocket onerror ----->", event);
            _that.initWebsocket();
        };
        webSocket.onclose = function(event) {
            console.log("webSocket onclose --->", event);
            if(_closeType){
                if(webSocketStateInterval){
                    clearInterval(webSocketStateInterval);
                }
            }
            if(heartInterval){
                clearInterval(heartInterval);
            }
            _closeType = false;
        };
        // return new Promise((resolve, reject) => {resolve()});
    },
    sendWebSocket(text) {
        webSocket.send(JSON.stringify(text));
    },
    closeWebSocket(closeType) {
        _closeType = closeType;
        webSocket.close();
    },
    closeAudio() {
        mAudio.pause();
    }
}

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：有福新闻UfqiNews: 没有富矿我们只提供了一张藏宝图

下一篇：将react构建的cli项目打包成二进制