网络信息网状态状态 JavaScript 网页 API
- 网络信息网状态状态 JavaScript 网页 API
- 正文
- 0. 基本信息
- 1. 相关 API
- 2. 代码实现
- 3. 最终效果
- 其他资源
- 参考连接
- 完整代码示例
/src/components/NetworkConnection.tsx
最后更新：2021-11-21 00:01:55 手机定位技术交流文章
网络信息网状态状态 JavaScript 网页 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 |
发件人: 网络信息 - MDN 特定 API 详细信息 :
2. 代码实现
接下来我们会尝试创建一些代码 看看它是如何运作的。
现在,让我们来描述一下我们将要记录的网络状况 除了我们讨论过的内容之外 我们还将保持最后的更新
以下是获得国家快照的两种方法。
最后,我们决定启动监听功能 并启动月球的网络状态
3. 最终效果
坦率地说,我并不认为它效果很好。也许获得真正的网络互动并从浏览器 http 请求中获取更多信息比较可行。
其他资源
参考连接
| Title | Link |
|---|---|
| NetworkInformation - MDN | https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation |
| 在联署材料中,有一个听取网络状况的共同机制。 | https://segmentfault.com/a/1190000023957246 |
完整代码示例
https://github.com/superfreeeee/Blog-code/tree/main/front_end/javascript/js_network_information
本文由 在线网速测试 整理编辑，转载请注明出处。
