JS Web API: NetworkInformation 网络状况 API

最新推荐文章于 2024-07-07 03:58:26 发布

超悠閒

最新推荐文章于 2024-07-07 03:58:26 发布

阅读量2.4k

点赞数

分类专栏： JavaScript 文章标签： web api network

本文链接：https://blog.csdn.net/weixin_44691608/article/details/121427365

版权

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍如何使用Web API获取用户的网络状况。重点介绍了NetworkInformation对象及其属性，并提供了代码示例，展示了如何监听网络变化并更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS Web API: NetworkInformation 网络状况 API

正文

0. 基本信息

今天要给大家讲解的是利用浏览器的 WebAPI 来获取当前用户的网络状况，然而实际上浏览器 API 提供的状态还是比较粗浅，而且大多都是估计值，同时兼容性并不是那么好，所以如测速下载等功能实际上还是依赖服务端对前端行为的响应进行检测还是比较准确的

1. 相关 API

网络状况的相关 API 主要集中在 NetworkInformation 对象上（从 Navigator.connection 属性上获得），以及 Window 对象上的 onLine 属性

属性	含义	类型
Window.online	是否连上网络	boolean
NetworkInformation.type	网络类型	string
NetworkInformation.effectiveType	网络类型	string
NetworkInformation.downlink	下载速度	number
NetworkInformation.downlinkMax	最大下载速度	number
NetworkInformation.rtt	信号延迟	number
NetworkInformation.saveData	当前设备是否开启节省流量开关	boolean

另外还有三个事件我们可以监听用于更新网络状态

事件
Window.ononline
Window.onoffline
NetworkInformation.onchange

具体 API 细节自己查：传送门：NetworkInformation - MDN

2. 代码实现

接下来我们尝试着写点代码来看看效果

/src/components/NetworkConnection.tsx

首先我们先定义接下来要保存的网络状态，除了前面提到的之外，我们另外保留一个最后更新时间

interface NetworkState {
  since?: Date;
  online?: boolean;
  type?: string;
  effectiveType?: string;
  downlink?: number;
  downlinkMax?: number;
  rtt?: number;
  saveData?: boolean;
}

接下来写两个方法用于获取状态快照

const getConnection = () => {
  const nav = window.navigator;
  if (!nav) return null;
  // @ts-ignore
  return nav.connection || nav.mozConnection || nav.webkitConnection;
};

const getNetworkState = (): NetworkState => {
  const connection = getConnection();
  if (!connection) {
    return {
      since: new Date(),
      online: navigator.onLine,
    };
  }
  const state: NetworkState = {
    since: new Date(),
    online: navigator.onLine,
    type: connection.type,
    effectiveType: connection.effectiveType,
    downlink: connection.downlink,
    downlinkMax: connection.downlinkMax,
    rtt: connection.rtt,
    saveData: connection.saveData,
  };

  console.table(state);

  return state;
};

最后我们选择在 mount 的时候初始化网络状况并挂载监听函数

  const [state, setState] = useState<NetworkState>({});

  useEffect(() => {
    // init state
    setState(getNetworkState());

    const onStateChange = () => {
      setState(getNetworkState());
    };

    const connection = getConnection();

    window.addEventListener('online', onStateChange);
    window.addEventListener('offline', onStateChange);
    connection?.addEventListener('change', onStateChange);
    return () => {
      window.removeEventListener('online', onStateChange);
      window.removeEventListener('offline', onStateChange);
      connection?.removeEventListener('change', onStateChange);
    };
  }, []);

3. 最终效果

老实说个人觉得效果不太好，可能还是搞个实际的服务端来进行真正的网络交互会更实在，还能从浏览器 http 请求头获取更多信息

其他资源

参考连接

Title	Link
NetworkInformation - MDN	https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
JS中监听网络状况的常用方法	https://segmentfault.com/a/1190000023957246