Vue 中如何监控用户网络状态

提出疑问

我们为什么要监控用户的网络状态？这个从前端的出发角度来说有什么作用？

当用户网络状态好的时候，我们可以预加载一些资源，例如图片量比较大的网站
当用户网络不好的时候，我们可以相对选择加载不一样的资源，比如说网络是 5g 时，前端就加载 4k 高清图片，如果网络是 3g ，前端可以选择稍微模糊一点的时候，这样也能提高用户的体验
当用户断网时，前端可以给出提示“您的网络已断开”，让用户知道自己网络不行

以上说的几种情况，都涉及到一个问题：如何监控用户的网络状态？

Web Api

这里我们需要用到几个 API: navigator.connection,online,offline

下面我们以 Vue3 模拟一下网络状态的显示：

<template>
  <a-space direction="vertical">
    <a-alert :message='networkOnline ? "当前网路状态良好" : "当前网路已断开"' :type='networkOnline ? "success" : "error"' />
    <a-descriptions bordered>
      <a-descriptions-item label="网络状态">{{ networkOnline ? networkState.info.effectiveType : '--' }}</a-descriptions-item>
      <a-descriptions-item label="延迟">{{ networkOnline ? networkState.info.rtt + 'ms':'--'  }}</a-descriptions-item>
      <a-descriptions-item label="带宽">{{ networkOnline ? networkState.info.downlink + 'Mb/s':'--'  }}</a-descriptions-item>
    </a-descriptions>
  </a-space>
</template>

<script setup>
import { reactive,ref,onMounted } from 'vue'

const networkOnline = ref(true)

// 当前网络状态
const networkState = reactive({
  info:{
    effectiveType:'',
    rtt:'',
    downlink:''
  }
})

const updateOnline = () => {
  const {effectiveType,rtt,downlink} = navigator.connection
  networkOnline.value = navigator.onLine
  networkState.info.effectiveType = effectiveType
  networkState.info.rtt = rtt
  networkState.info.downlink = downlink
}

onMounted(() => {
  // connection 的兼容性较低
  const connection = navigator.connection || navigator.webkitConnection || navigator.mozConnection
  // 初始化运行一次
  updateOnline()
  // 网络是否断开事件
  window.addEventListener('online', updateOnline)
  window.addEventListener('offline', updateOnline)
  // 监控网络变化
  connection.addEventListener('change',updateOnline)
})
</script>