Vue3判断/监控是否在线

小半 • 2024年3月2日下午5:59 • 前端开发 • 阅读 386

回顾JavaScript中的在线判断

`navigator.online`

navigator.online可以检查用户当前是否在线。如果在线为true，离线为false。

console.log(navigator.online)

online事件/offline事件

navigator.online只是获取当前的在线状态。因此，不可能执行比如“上线时做某事”之类的监视过程。

所以我们可以使用在线和离线事件来监控在线状态。online事件上线时触发，offline事件下线时触发。

window.addEventListener('online', () => {
  console.log('上线啦')
})
window.addEventListener('offline', () => {
  console.log('下线啦')
})

与 Vue3 一起使用

允许Vue3被动地确定和监控在线状态。以navigator.online为初始值，通过在线和离线事件来监控和切换在线状态。

<script lang="ts" setup>
import {ref, watch} from "vue";

//其值初始化为navigator.onLine，即当前是否在线
const isOnline = ref(navigator.onLine)
//使用addEventListener函数监听了online和offline事件
window.addEventListener('online',()=>{
    isOnline.value = true
})

window.addEventListener('offline',()=>{
    isOnline.value = false
})

//监听isOnline变化
watch(isOnline,()=>{
    if (isOnline.value){
        console.log('在线')
    }else{
        console.log('下线')
    }
},{immediate:true})
</script>

我们使用watch函数监听isOnline变量的变化，并在变化时执行回调函数。watch函数的第一个参数是要监听的变量，第二个参数是回调函数，当isOnline变化时，回调函数会被执行。我们在回调函数中判断isOnline的值，如果为true，则表示在线，否则表示下线，并在控制台输出相应的信息。注意，我们在watch函数的第三个参数中设置了immediate为true，这表示在组件挂载时立即执行一次回调函数，以便我们能够在页面加载时知道当前是否在线。

封装一个useOnline

我们可以将上面的代码进行一下封装。我们可以创建一个useOnline.ts文件。

//useOnline.ts
import { ref } from 'vue'

export default function useOnline() {
    const isOnline = ref(navigator.onLine)

    window.addEventListener('online', () => {
        isOnline.value = true
    })
    window.addEventListener('offline', () => {
        isOnline.value = false
    })

    return { isOnline }
}

在使用的地方引入就行了。

<script lang="ts" setup>
import { watch} from "vue";
import useOnline from "../useOnline.ts";
const { isOnline } = useOnline()
//监听isOnline变化
watch(isOnline,()=>{
    if (isOnline.value){
        console.log('在线')
    }else{
        console.log('下线')
    }
},{immediate:true})
</script>