浏览器中如何获取用户网络状态

网页开发中存在需要获取用户是否在线的场景及用户网络状态,浏览器提了navigator.onLine和navigator.connection可以实现这一需求。

获取在线状态

if (navigator.onLine) {console.log("online");
} else {console.log("offline");
}

监听网络状态变更事件

window.addEventListener("offline", (e) => {console.log("offline");
});window.addEventListener("online", (e) => {console.log("online");
});

通过 NetworkInformation API 获取更多网络相关信息

NetworkInformation API 中提供了更多网络状态相关的信息,如最大下行速度、网络连接类型等。

function getConnection() {const nav = navigator as any;if (!isObject(nav)) return null;return nav.connection || nav.mozConnection || nav.webkitConnection;
}function getConnectionProperty(): NetworkState {const c = getConnection();if (!c) return {};return {rtt: c.rtt,type: c.type,saveData: c.saveData,downlink: c.downlink,downlinkMax: c.downlinkMax,effectiveType: c.effectiveType,};
}
属性描述类型
rtt当前连接下评估的往返时延number
type设备使用与所述网络进行通信的连接的类型bluetooth | cellular | ethernet | none | wifi | wimax | other | unknown
downlink有效带宽估算(单位:兆比特/秒)number
downlinkMax最大下行速度(单位:兆比特/秒)number
saveData用户代理是否设置了减少数据使用的选项boolean
effectiveType网络连接的类型slow-2g | 2g | 3g | 4g

更多信息参考:MDN NetworkInformation

封装成一个 useNetwork 自定义 Hook

以下代码是 ahooks 中的 useNetwork 自定义 Hook 实现方式,其核心原理是通过以上的navigator.onLine和navigator.connection中提供的 API 进行分装的。

其他的自定义 Hooks 也有类似实现的封装。

import { useEffect, useState } from 'react';
import { isObject } from '../utils';export interface NetworkState {since?: Date;online?: boolean;rtt?: number;type?: string;downlink?: number;saveData?: boolean;downlinkMax?: number;effectiveType?: string;
}enum NetworkEventType {ONLINE = 'online',OFFLINE = 'offline',CHANGE = 'change',
}function getConnection() {const nav = navigator as any;if (!isObject(nav)) return null;return nav.connection || nav.mozConnection || nav.webkitConnection;
}function getConnectionProperty(): NetworkState {const c = getConnection();if (!c) return {};return {rtt: c.rtt,type: c.type,saveData: c.saveData,downlink: c.downlink,downlinkMax: c.downlinkMax,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;

useNetwork 自定义 Hook 使用方式

import React from 'react';
import { useNetwork } from 'ahooks';export default () => {const networkState = useNetwork();return (<div><div>Network information: </div><pre>{JSON.stringify(networkState, null, 2)}</pre></div>);
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

日志的介绍

知识铺垫&#xff1a;在我们日常开发中&#xff0c;其实日志是和我们息息相关的。但可能平常都没怎么注意到日志相关的知识点&#xff0c;也不怎么关注日志&#xff0c;然后&#xff0c;在生产环境中&#xff0c;日志是必不可少的存在&#xff0c;项目出现问题了都是通过日志来…

cesium 添加 Echarts 图层(空气质量点图)

cesium 添加 Echarts 图层(下面附有源码) 1、实现思路 1、在scene上面新增一个canvas画布 2、通坐标转换,将经纬度坐标转为屏幕坐标来实现 3、将ecarts 中每个series数组中元素都加 coordinateSystem: ‘cesiumEcharts’ 2、示例代码 <!DOCTYPE html> <html lan…

Excel 数据筛选难题解决

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

缓存穿透、雪崩与击穿

缓存穿透、雪崩、击穿 1、缓存穿透强调都没有数据并发访问布隆过滤器缓存NULL值 2、缓存雪崩强调批量Key过期并发访问 3、缓存击穿强调单个Key过期并发访问互斥锁逻辑过期 分布式并发控制 1、缓存穿透 缓存穿透是指数据库和缓存都没有的数据&#xff0c;这样缓存永远不会生效&…

图形化用户界面-java头歌实训

图形化用户界面 import java.awt.*; import javax.swing.*; public class GraphicsTester extends JFrame { public GraphicsTester() { super("Graphics Demo"); setSize(480, 300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public void paint…

服务器raid5坏盘-换盘-修复阵列过程

目录 背景原因分析解决步骤名词解释进入raid管理界面换回旧4号&#xff0c;进行import再次更换4号盘 总结 背景 服务器除尘之后文件服务器部分文件不能访问了,部分文件夹内容为空&#xff0c;起初以为是新配置的权限的问题&#xff0c;排查之后发现不仅仅是权限问题 jumpserv…

ISA95-标准2-数据字典部分的解析与设计指南

在 MES/MOM 系统中,ISA-95 第二部分的数据字典扮演着至关重要的角色,它确保了数据的一致性和准确性,为不同系统间的数据交换提供了标准化的术语和定义。以下是 MES/MOM 系统实现 ISA-95 第二部分数据字典的具体概念、功能模块以及应用场景: 一、概念、功能模块以及应用场景…

numpy - array(4)

arr1 np.array([[1, 2], [3, 4], [5, 6]]) &#xff08;1&#xff09;def insert(arr, obj, values, axisNone) 向array指定位置插入指定值 axis为默认值None时&#xff0c;如果array是多维数据,则先将array转化成向量obj&#xff1a;插入的索引&#xff0c;接受int或者多…

VTK学习日志:基于VTK9.3.0+Visual Studio c++实现DICOM影像MPR多平面重建+V R体绘制4个视图展示功能的实现(二)

前段时间对VTK9.3.0进行了编译&#xff0c;开发了MPRVR实现的demo,显示效果不是很理想&#xff0c;正好趁着周末有时间&#xff0c;再度对之前的程序进行优化和完善&#xff0c;先展示下效果&#xff1a; VTK实现MPRVR四视图 再次讲解下基于VTK的MPRVR实现的简单项目创建过程&a…

linux守护进程生命周期管理-supervisord

简介 supervisor是一个client/server系统,允许用户控制多个类unix系统的进程,摆脱rc.d脚本的不方便性.supervisor具有简单,集中化管理,搞笑,可扩展性,高兼容. 整套软件包含:supervisord(守护进程),supervisorctl(命令行工具),web server(一个web交互界面),XML-RPC 交互 安装 …

git回退commit的方式

在Git中&#xff0c;回退commit&#xff08;即撤销之前的提交&#xff09;可以通过多种方式来实现。以下是一些常见的方法&#xff0c;以及它们的详细步骤和注意事项&#xff1a; ### 1. 使用git revert命令 git revert命令用于撤销某次commit&#xff0c;但它并不会删除该comm…

FFmpeg 硬件编码加速文档介绍

介绍 硬件访问:许多平台提供了对专用硬件的访问,这些硬件可以用于执行解码、编码或过滤等视频相关操作。 性能与资源使用:使用硬件可以加快某些操作的速度或减少其他资源(特别是CPU)的使用,但可能会产生不同的结果或质量较低,或带来在使用纯软件时不存在的额外限制。 硬…

公爹公婆出首付买房,离婚的儿媳妇能分吗?

小两口结婚后为了更好地生活打算购房&#xff0c;男方父母帮助支付首付款&#xff0c;后房屋登记在夫妻名下。后两人因感情不和打算离婚&#xff0c;女方要求按照房屋的现行价值进行分割&#xff0c;能否得到支持&#xff1f;近日&#xff0c;江苏省南通市中级人民法院对这起离…

【Postman学习】

Postman是一个非常流行的API开发和测试工具&#xff0c;广泛用于Web服务的开发、测试和调试。它提供了一个图形界面&#xff0c;允许用户轻松地构建、发送和管理HTTP(S)请求&#xff0c;同时查看和分析响应。下面是对Postman接口测试工具的详细解释&#xff1a; 1. Postman简介…

Linux安装Node-RED并实现后台运行及开机启动

首先确保系统中已近成功安装Node.js&#xff0c;并保证需要的合适版本&#xff1a; 关于node.js的安装可以参考我的另一篇博文:《AliyunOS安装Node.js》。 然后就可以使用npm工具安装Node-RED了&#xff0c;很简单使用如下命令&#xff1a; sudo npm install -g --unsafe-per…

【代码随想录算法训练Day53】LeetCode 739.每日温度、LeetCode 496.下一个更大元素、LeetCode 503. 下一个更大元素 II

Day53 单调栈 LeetCode 739.每日温度 经典的单调栈题目&#xff0c;确实的感受到了单调栈的强大之处。 class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {stack<int> st;vector<int> res(temperatures.size…

php+redis 生成二维码库

项目场景&#xff1a; 活动报名二维码&#xff0c;生成 30W 的二维码量存放到 redis 中&#xff0c;并通过 redis 读取&#xff0c;以减轻 mysql 数据库的压力。 实现很简单&#xff0c;分为两步&#xff1a; 1、生成&#xff1a;通过 for 循环&#xff0c;以集合方式插入到…

MATLAB使用系统辨识工具箱建立PID水温的传递函数系数

概述 利用PID控制水温&#xff0c;由于实际在工程项目中&#xff0c;手动调节PID参数比较耗费时间&#xff0c;所以可以先利用MATLAB中的Simulink软件建立模型&#xff0c;先在仿真软件上调节大概的PID参数&#xff0c;再利用此PID参数为基础在实际的工程项目中手动调节PID参数…

这些并发编程技术你都知道吗?

与其碌碌无为&#xff0c;不如兴风作浪。 虽然不是所有的系统都需要很多的并发编程技术&#xff0c;但是掌握常见的高并发秘籍&#xff0c;便能让我们的系统快起来&#xff0c;面对访问量的剧增从容应对。 接下来&#xff0c;为我们一起来看看常见的高并发技术有哪些。总结起来…

SSH版本升级-openssh-9.7p1

SSH版本升级-openssh-9.7p1 1、查看当前版本2、安装openssl2.1、编译安装ssl 3、下载新版本SSH4、备份原有的SSH配置5、上传文件并解压6、卸载原有的openssh包7、编译安装openssh7.1、在解压后的目录&#xff0c;初始化openssh7.2、将文件拷回7.3、修改配置文件 最终实现&#…