ตรวจสอบการเชื่อมต่อ Internet สำหรับ Web App (Vue.js)

2 min readApr 11, 2021

หากเราใช้แอพมือถือแน่นอนว่าเราต้องเคยเจอการแจ้งเตือนเมื่อแอพนั้นขาดการเชื่อมต่อกับอินเตอร์เน็ต ซึ่งเป็นฟีเจอร์ที่ดีสำหรับตัวแอพ เพื่อป้องกันไม่ให้เกิด action ต่างๆ เมื่อไม่พร้อมใช้งานและให้ UX ที่ยอดเยี่ยมสำหรับผู้ใช้งานอีกด้วย

สำหรับบทความนี้จะมาแนะนำการเขียนฟังก์ชั่นสำหรับตรวจสอบสถานะการเชื่อมต่ออินเตอร์เน็ต โดยมี 2 รูปแบบ คือ ใช้ Library กับ ใช้ Web Apis NavigatorOnLine

Use Library

สำหรับการตรวจสอบการเชื่อมต่ออินเตอร์เน็ตโดยใช้ Library นั้น จะใช้ Library ที่ชื่อว่า vue-internet-checker โดยมีวิธีการใช้งานดังนี้

เริ่มจากติดตั้ง Library ด้วยคำสั่ง

$ npm install vue-internet-checker# or$ yarn add vue-internet-checker

ต่อไปจะขอแยกอธิบายตามแต่ละเวอร์ชั่น Vue 2, Vue 3 และ Nuxt (SSR)

#Vue 2

เริ่มจากเพิ่มโค้ดนี้ในไฟล์ /src/main.js

// Import Library
import vueInternetChecker from 'vue-internet-checker';
Vue.component('vueInternetChecker', vueInternetChecker);

จากนั้นเพิ่ม component เช็คอินเตอร์เน็ตในไฟล์ /src/App.vue

<template>
   <div>
      ...     <no-internet-popup :show="!onLine" />
     <vue-internet-checker @status="status" @event="event" />
  </div>
</template>
export default {
  name: "App",
  data: () => ({
    onLine: null,
  }),
  methods: {
    status(ele) {
      this.onLine = ele;
    },
    event(ele) {
      console.log(ele);
    },
  },
};
</script>

#Vue 3

เริ่มจากเพิ่มโค้ดนี้ในไฟล์ /src/main.js

// Import Library
import vueInternetChecker from 'vue-internet-checker';
app.component('vueInternetChecker', vueInternetChecker)

จากนั้นเพิ่ม component เช็คอินเตอร์เน็ตในไฟล์ /src/App.vue

<template>
   ...

   <no-internet-popup :show="!onLine" />
   <vue-internet-checker @status="status" @event="event" />
</template><script>
export default {
  name: "App",
  data: () => ({
    onLine: null,
  }),
  methods: {
    status(ele) {
      this.onLine = ele;
    },
    event(ele) {
      console.log(ele);
    },
  },
};
</script>

จากนั้นสามารถเขียนโค้ดสำหรับ handle online/offline ที่ตัวแปร onLine ได้เลย

#Nuxt

เริ่มจากสร้างไฟล์ vueInternetChecker.js ในโฟลเดอร์ ~/plugins/

import Vue from 'vue'
import vueInternetChecker from 'vue-internet-checker';Vue.component('vueInternetChecker', vueInternetChecker);

จากนั้นเพิ่มการ import plugin ในไฟล์ nuxt.config.js

plugins: [
    ...    { src: "~/plugins/vueInternetChecker.js", ssr: true }
]

เรียกใช้ component เช็คอินเตอร์เน็ต ในไฟล์ layouts/default.vue

<template>
   <div>   
     ...

     <no-internet-popup :show="!onLine" />
     <vue-internet-checker @status="status" @event="event" />
  </div>
</template><script>
export default {
  name: "App",
  data: () => ({
    onLine: null,
  }),
  methods: {
    status(ele) {
      this.onLine = ele;
    },
    event(ele) {
      console.log(ele);
    },
  },
};
</script>

สำหรับการตรวจสอบการเชื่อมต่ออินเตอร์เน็ตโดยการใช้ Library สำหรับ Vue 2, Vue 3 และ Nuxt ก็ประมาณนี้ครับ

Web Apis (NavigatorOnLine)

สำหรับอีกวิธีหนึ่งคือใช้ Web Apis NavigatorOnLine แล้วเขียน Online and offline events ในการคอย listen การเชื่อมต่ออินเตอร์เน็ต โดยมีวิธีการดังนี้

เริ่มจากสร้างไฟล์ checkInternet.js ในโฟลเดอร์ ~/mixins/

export default {
  data() {
    return {
      onLine: true,
    };
  },
  methods: {
    updateOnlineStatus(e) {
      const { type } = e;
      this.onLine = type === "online";
    },
  },
  mounted() {
    window.addEventListener("online", this.updateOnlineStatus);
    window.addEventListener("offline", this.updateOnlineStatus);
  },
  beforeDestroy() {
    window.removeEventListener("online", this.updateOnlineStatus);
    window.removeEventListener("offline", this.updateOnlineStatus);
  },
}

จากนั้นเรียกฟังก์ชั่นที่ใน mixins ในไฟล์ layouts/default.vue

<template>
   <div>
     .
     .
     .
     <no-internet-popup :show="!onLine" />
   </div>
</template><script>
  import checkInternet from "~/mixins/checkInternet";
  export default {
     mixins: [checkInternet]
  }
</script>

เพียงเท่านี้ก็สามารถ handle online/offline ที่ตัวแปร onLine ได้แล้ว

สำหรับการตรวจสอบการเชื่อมต่ออินเตอร์เน็ตโดยการใช้ Web Apis NavigatorOnLine สำหรับ Vue 2, Vue 3 และ Nuxt จะสามารถใช้วิธีเดียวด้วยกันได้ โดยอาศัย mixins ฟีเจอร์ของ vuejs นั้นเอง

สุดท้ายนี้ก็หวังว่าบทความนี้จะมีประโยชน์ไม่มากก็น้อยแก่ผู้ที่กำลังมองหาวิธีการตรวจสอบการเชื่อมต่อกับอินเตอร์เน็ต >.<

Reference:

Online and offline events