AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

通過JS獲取你當前的網絡狀況?建議大家學一學

來源: 責編: 時間:2024-04-19 09:30:30 179觀看
導讀前言大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心。檢測網速想要在Web端檢測網速,其實很簡單,有一個全局的對象——navigation,我們來看看它的身上都有哪些東西:圖片屬性描述

前言

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

檢測網速

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

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

屬性Tfg28資訊網——每日最新資訊28at.com

描述Tfg28資訊網——每日最新資訊28at.com

類型Tfg28資訊網——每日最新資訊28at.com

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

有效帶寬估算(單位:兆比特/秒)Tfg28資訊網——每日最新資訊28at.com

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

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

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

slow-2g/2g/3g/4gTfg28資訊網——每日最新資訊28at.com

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

當前連接下評估的往返時延Tfg28資訊網——每日最新資訊28at.com

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

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

用戶代理是否設置了減少數據使用的選項Tfg28資訊網——每日最新資訊28at.com

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

useNetwork

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

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

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

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

第一步:所需的ts類型

說說NetworkState的各個參數:Tfg28資訊網——每日最新資訊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;


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

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

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

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

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

標簽:
  • 熱門焦點
Top