webSocket 订单通知

收到通知窗口右上角弹窗提示

<audio id="audio">
       <source src="@/assets/prompt.mp3" type="audio/ogg" />
</audio>

 

data() {
        return {
            userinfo:{
                group_name:'',
                name:'账号名称',
            },
            msg: {
                    // offline_id:JSON.parse(localStorage.getItem("userInfo")).offline_id,
                    // type: "service_order",
                    // token: localStorage.getItem("token"),
            },
            websock: null, //建立的连接
            _num: 3, //链接失败次数
            lockReconnect: false, //是否真正建立连接
            timeout: 10 * 1000, //30秒一次心跳
            severTimeout: 5000, //服务端超时时间
            timeoutObj: null, //心跳心跳倒计时
            serverTimeoutObj: null, //心跳倒计时
            timeoutnum: null, //断开 重连倒计时
            notifications: [],
        };
    },

 

mounted() {this.initWebSocket()
    },

 

methods: {
        initWebSocket() {
            // const _protocol = window.location.protocol;
            // let wsL = _protocol == "http:" ? "ws://" : "wss://";
            // const wsuri = `${wsL}${window.httphost.websockUrl}`;
            const wsuri = 'ws://xx.xx.xx.xx';
            this.websock = new WebSocket(wsuri);
            //连接成功
            this.websock.onopen = this.websocketonopen;
            //连接错误
            this.websock.onerror = this.websocketonerror;
            //接收信息
            this.websock.onmessage = this.websocketonmessage;
            //连接关闭
            this.websock.onclose = this.websocketclose;
        },
        reconnect() {
            //重新连接
            var that = this;
            if (that.lockReconnect) {
                return;
            }
            that.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            that.timeoutnum && clearTimeout(that.timeoutnum);
            that.timeoutnum = setTimeout(function () {
                //新连接
                that.initWebSocket();
                //   console.log("重新连接");
                that.lockReconnect = false;
            }, 5000);
        },
        reset() {
            //重置心跳
            var that = this;
            //清除时间
            clearTimeout(this.timeoutnum);
            clearTimeout(that.timeoutObj);
            clearTimeout(that.serverTimeoutObj);
            //重启心跳
            that.start();
        },
        start() {
            //开启心跳
            var self = this;
            self.timeoutObj && clearTimeout(self.timeoutObj);
            self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
            self.timeoutObj = setInterval(function () {
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                if (self.websock.readyState == 1) {
                    let msg = self.msg
                    msg.type = 'ping'
                    //如果连接正常
                    self.websock.send(JSON.stringify(msg));
                    // console.log("心跳");
                } else {
                    //否则重连
                    // self.websock.close();
                    self.reconnect();
                    // console.log("重连");
                }
                self.serverTimeoutObj = setTimeout(function () {
                    this._num--;
                    //计算答复的超时次数
                    if (this._num === 0) {
                        this.reconnect();
                        // console.log("重连1");
                    }
                }, self.severTimeout);
            }, self.timeout);
        },

        websocketonopen() {
            //连接成功
            this.websocketsend(JSON.stringify(this.msg));
            console.log("连接成功,第一次ping");
            //开启心跳
            this.start();
        },
        websocketonerror(e) {
            //连接失败事件
            //错误
            console.log("WebSocket连接发生错误");
            //错误提示
            //重连
            this.reconnect();
        },
        websocketclose(e) {
            //连接关闭事件
            //关闭
            // console.log(e);
            //提示关闭
            // this.$message("连接已关闭");
            //重连
            // this.reconnect();
        },
        websocketonmessage(event) {
            //接收服务器推送的信息
            let that = this;
            let redata = JSON.parse(event.data);
            console.log(redata)
            if(redata.HotelName){
                that.play();
                let arr = Object.keys(this.notifications).length;
                //清除提示框
                // this.nclose()
                let msg = `<div class="notifyText">
                    <div style="width:100%;display: flex;align-items: center;justify-content: space-between;margin-top: 10px;color:#1F4051;font-size:14px;" ><span>${redata.HotelName}</span></div></div>`;
                    let notify = this.$notify({
                        title: redata.Content,
                        // message: redata.massage,
                        position: "top-right",
                        dangerouslyUseHTMLString: true,
                        message: msg,
                        type: 'warning',
                        onClick() {
                            that.nclose()
                            // 跳转质检订单页
                            that.$router.push("/order")
                        },
                        duration: 0,
                    });
                    this.notifications["message" + arr] = notify;
            }
if (redata.error == 20001) {
                //身份错误，断开链接
                // console.log("身份错误，断开链接");
                clearTimeout(this.timeoutnum);
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                this.websock.onclose;
            }
            //收到服务器信息，心跳重置
        },
        websocketsend(msg) {
            //向服务器发送信息
            //数据发送
            this.websock.send(msg);
        },
        play() {
            let that = this
            this.lastRunTime = Date.now();
            let audio = document.querySelector("#audio");
            audio.play().then(() => {
                    if (!this.isPlaying) {
                        this.isPlaying = true;
                    }
                })
                .catch(() => {
                    // that.$message({
                    //     type: "error",
                    //     message: '语音播报失效,点击"查询"按钮激活语音播报',
                    // });
                    this.isPlaying = false;
                });
        },
        stop(timeOut) {
            this.currentTime = Date.now();
            let audio = document.querySelector("#audio");
            if (this.currentTime - this.lastRunTime < 15000) {
            } else {
                if (this.isPlaying) {
                    audio.currentTime = 0;
                    audio.pause();
                    this.isPlaying = false;
                }
            }
            clearTimeout(timeOut);
        },
        nclose(){
            for (let key in this.notifications) {
                this.notifications[key].close();
                delete this.notifications[key];
            }
        },
    },