网络状态监听

需求:在聊天室中需要对网络状态进行监听,当网络从离线状态切为在线状态时重连socket

解决方案:

    data(){
        return{
            onLine:false,// 网络状态
        }
    },
    mounted(){
        if (登录){
            window.addEventListener('online',  this.updateOnlineStatus);
            window.addEventListener('offline', this.updateOnlineStatus);
        }
    },
    watch:{
       onLine(val){
           if(val && this.isOpen){
               // 监听网络状态,如果网络重新连接并且聊天室是打开的状态则重新连接socket
               let that = this
               setTimeout(function () {
                   that.connectroom();
               },4000)
           }
       },
    },
    methods:{
       // 判断是否离线状态
       updateOnlineStatus(e) {
           const { type } = e;
           this.onLine = type === 'online';
       },
    },
    beforeDestroy() {
         window.removeEventListener('online',  this.updateOnlineStatus);
         window.removeEventListener('offline', this.updateOnlineStatus);
    },




 

你可能感兴趣的:(疑难杂症)