Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue - check if user is offline and then show div for a second once they come back online

I currently am using a function on a timed loop to check if a user goes offline:

created() {
   setInterval(() => {
        this.checkOnline();
   }, 30000);
}

Method:

checkOnline(){
   this.onLine = navigator.onLine ? true : false;
}

Is there a way I can detect this without using the timer?

Secondly...

I am trying to show an 1 second alert to tell the user they are back online. When this.onLine is true, the div should be hidden. When it is false it should also be hidden, but when it goes from false to true I want to show the div for a second or so and then hide it again. I have tried this with a settimeout and using a watcher but neither give the desired effect.

Edit:

So one method that gets me there is:

 data() {
     return {
         onLine: navigator.onLine ? true : false,
     }
 }

then a watcher to show the back online message

watch: {
    onLine: function (val) {
        if(this.onLine === true){
            this.showBackOnline = true;
            setTimeout(()=>{ this.showBackOnline = false; }, 1000);
        }
    },
},

Is there a better way than a watcher to achieve this, other than using a dedicated notify plugin?

like image 527
Adam Lambert Avatar asked Aug 04 '18 21:08

Adam Lambert


2 Answers

Is there a way I can detect this without using the timer? Yes. By using the online offline event.

Is there a better way than a watcher to achieve this, other than using a dedicated notify plugin? I think the watcher is the most suitable method here.

demo: https://jsfiddle.net/jacobgoh101/xz6e3705/4/

new Vue({
    el: "#app",
    data: {
        onLine: navigator.onLine,
        showBackOnline: false
    },
    methods: {
        updateOnlineStatus(e) {
            const {
                type
            } = e;
            this.onLine = type === 'online';
        }
    },
    watch: {
        onLine(v) {
            if (v) {
                this.showBackOnline = true;
                setTimeout(() => {
                    this.showBackOnline = false;
                }, 1000);
            }
        }
    },
    mounted() {
        window.addEventListener('online', this.updateOnlineStatus);
        window.addEventListener('offline', this.updateOnlineStatus);
    },
    beforeDestroy() {
        window.removeEventListener('online', this.updateOnlineStatus);
        window.removeEventListener('offline', this.updateOnlineStatus);
    }
})
like image 61
Jacob Goh Avatar answered Oct 07 '22 03:10

Jacob Goh


you can handle this (update onLine status), just by set arrow function in event listener and set that varible true/false by listener. window object has online/offline events and you don't need to watch for navigator.online value or set interval to check it. you can just set event listener for it and do something on callback method. in below code i just change value of my 'isOnLine' variable value and in template show message by v-if directive to user about online/offline.

  data() {
    return {
      isOnLine:navigator.onLine
    }
  },
  mounted() {
     window.addEventListener('online', ()=>{this.isOnLine=true});
     window.addEventListener('offline', ()=>{this.isOnLine=false});
  },
like image 29
Mohammad Daneshamooz Avatar answered Oct 07 '22 03:10

Mohammad Daneshamooz