前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。zWT28資訊網——每日最新資訊28at.com

檢測網速

想要在Web端檢測網速，其實很簡單，有一個全局的對象——navigation，我們來看看它的身上都有哪些東西：zWT28資訊網——每日最新資訊28at.com

圖片zWT28資訊網——每日最新資訊28at.com

useNetwork

我們可以自定義一個hook，用來獲取網頁當前的網絡狀態~需要具備以下要素：zWT28資訊網——每日最新資訊28at.com

1、返回的數據所需的ts類、監聽網絡變化的enumzWT28資訊網——每日最新資訊28at.com

2、獲取網絡狀態zWT28資訊網——每日最新資訊28at.com

3、監聽網絡變化，并實時更新最新的網絡狀態zWT28資訊網——每日最新資訊28at.com

第一步：所需的ts類型

說說NetworkState的各個參數：zWT28資訊網——每日最新資訊28at.com

• since：記錄當時檢測的時間
• oline：記錄是否有網絡
• rtt：記錄時延
• downlink：記錄帶寬
• saveData：記錄用戶代理是否設置了減少數據使用
• effectiveType：網絡連接類型

// hook返回的值interface NetworkState {  since?: Date;  online?: boolean;  rtt?: number;  downlink?: number;  saveData?: boolean;  effectiveType?: string;}// 監聽網絡變化的事件名enumenum NetworkEventType {  ONLINE = 'online',  OFFLINE = 'offline',  CHANGE = 'change',}

第二步：獲取網絡狀態

function getConnection() {  const nav = navigator as any;  if (typeof nav !== 'object') return null;  return nav.connection || nav.mozConnection || nav.webkitConnection;}function getConnectionProperty(): NetworkState {  const c = getConnection();  if (!c) return {};  return {    rtt: c.rtt,    saveData: c.saveData,    downlink: c.downlink,    effectiveType: c.effectiveType,  };}

第三步：實時更新網絡狀態

unction useNetwork(): NetworkState {  const [state, setState] = useState(() => {    return {      since: undefined,      online: navigator?.onLine,      ...getConnectionProperty(),    };  });  useEffect(() => {    const onOnline = () => {      setState((prevState) => ({        ...prevState,        online: true,        since: new Date(),      }));    };    const onOffline = () => {      setState((prevState) => ({        ...prevState,        online: false,        since: new Date(),      }));    };    const onConnectionChange = () => {      setState((prevState) => ({        ...prevState,        ...getConnectionProperty(),      }));    };    window.addEventListener(NetworkEventType.ONLINE, onOnline);    window.addEventListener(NetworkEventType.OFFLINE, onOffline);    const connection = getConnection();    connection?.addEventListener(NetworkEventType.CHANGE, onConnectionChange);    return () => {      window.removeEventListener(NetworkEventType.ONLINE, onOnline);      window.removeEventListener(NetworkEventType.OFFLINE, onOffline);      connection?.removeEventListener(NetworkEventType.CHANGE, onConnectionChange);    };  }, []);  return state;}

完整代碼

import { useEffect, useState } from 'react';export interface NetworkState {  since?: Date;  online?: boolean;  rtt?: number;  downlink?: number;  saveData?: boolean;  effectiveType?: string;}enum NetworkEventType {  ONLINE = 'online',  OFFLINE = 'offline',  CHANGE = 'change',}function getConnection() {  const nav = navigator as any;  if (typeof nav !== 'object') return null;  return nav.connection || nav.mozConnection || nav.webkitConnection;}function getConnectionProperty(): NetworkState {  const c = getConnection();  if (!c) return {};  return {    rtt: c.rtt,    saveData: c.saveData,    downlink: c.downlink,    effectiveType: c.effectiveType,  };}function useNetwork(): NetworkState {  const [state, setState] = useState(() => {    return {      since: undefined,      online: navigator?.onLine,      ...getConnectionProperty(),    };  });  useEffect(() => {    const onOnline = () => {      setState((prevState) => ({        ...prevState,        online: true,        since: new Date(),      }));    };    const onOffline = () => {      setState((prevState) => ({        ...prevState,        online: false,        since: new Date(),      }));    };    const onConnectionChange = () => {      setState((prevState) => ({        ...prevState,        ...getConnectionProperty(),      }));    };    window.addEventListener(NetworkEventType.ONLINE, onOnline);    window.addEventListener(NetworkEventType.OFFLINE, onOffline);    const connection = getConnection();    connection?.addEventListener(NetworkEventType.CHANGE, onConnectionChange);    return () => {      window.removeEventListener(NetworkEventType.ONLINE, onOnline);      window.removeEventListener(NetworkEventType.OFFLINE, onOffline);      connection?.removeEventListener(NetworkEventType.CHANGE, onConnectionChange);    };  }, []);  return state;}export default useNetwork;

zWT28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-84045-0.html通過JS獲取你當前的網絡狀況？建議大家學一學

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Prism：打造WPF項目的MVVM之選，簡化開發流程、提高可維護性

下一篇： 探索C++：十大讓代碼簡潔的特性