前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心。oSc28資訊網(wǎng)——每日最新資訊28at.com

檢測(cè)網(wǎng)速

想要在Web端檢測(cè)網(wǎng)速，其實(shí)很簡(jiǎn)單，有一個(gè)全局的對(duì)象——navigation，我們來(lái)看看它的身上都有哪些東西：oSc28資訊網(wǎng)——每日最新資訊28at.com

圖片oSc28資訊網(wǎng)——每日最新資訊28at.com

useNetwork

我們可以自定義一個(gè)hook，用來(lái)獲取網(wǎng)頁(yè)當(dāng)前的網(wǎng)絡(luò)狀態(tài)~需要具備以下要素：oSc28資訊網(wǎng)——每日最新資訊28at.com

1、返回的數(shù)據(jù)所需的ts類(lèi)、監(jiān)聽(tīng)網(wǎng)絡(luò)變化的enumoSc28資訊網(wǎng)——每日最新資訊28at.com

2、獲取網(wǎng)絡(luò)狀態(tài)oSc28資訊網(wǎng)——每日最新資訊28at.com

3、監(jiān)聽(tīng)網(wǎng)絡(luò)變化，并實(shí)時(shí)更新最新的網(wǎng)絡(luò)狀態(tài)oSc28資訊網(wǎng)——每日最新資訊28at.com

第一步：所需的ts類(lèi)型

說(shuō)說(shuō)NetworkState的各個(gè)參數(shù)：oSc28資訊網(wǎng)——每日最新資訊28at.com

• since：記錄當(dāng)時(shí)檢測(cè)的時(shí)間
• oline：記錄是否有網(wǎng)絡(luò)
• rtt：記錄時(shí)延
• downlink：記錄帶寬
• saveData：記錄用戶代理是否設(shè)置了減少數(shù)據(jù)使用
• effectiveType：網(wǎng)絡(luò)連接類(lèi)型

// hook返回的值interface NetworkState {  since?: Date;  online?: boolean;  rtt?: number;  downlink?: number;  saveData?: boolean;  effectiveType?: string;}// 監(jiān)聽(tīng)網(wǎng)絡(luò)變化的事件名enumenum NetworkEventType {  ONLINE = 'online',  OFFLINE = 'offline',  CHANGE = 'change',}

第二步：獲取網(wǎng)絡(luò)狀態(tài)

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,  };}

第三步：實(shí)時(shí)更新網(wǎng)絡(luò)狀態(tài)

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;

oSc28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-84045-0.html通過(guò)JS獲取你當(dāng)前的網(wǎng)絡(luò)狀況？建議大家學(xué)一學(xué)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： Prism：打造WPF項(xiàng)目的MVVM之選，簡(jiǎn)化開(kāi)發(fā)流程、提高可維護(hù)性

下一篇： 探索C++：十大讓代碼簡(jiǎn)潔的特性