JavaScript实现获取设备网络连接信息

获取设备网络连接信息可以使用浏览器原生的navigator对象，其中包含了connection属性，该属性为Network Information API所提供的接口，我们可以使用该接口获取设备的网络连接信息。

以下为步骤：

步骤1：判断浏览器是否支持Network Information API

在使用Network Information API之前，我们需要先判断当前浏览器是否支持该API。我们可以通过代码获取navigator.connection对象，如果不存在，则说明浏览器不支持该API。

if ('connection' in navigator) {
    // 浏览器支持Network Information API
    console.log('支持Network Information API');
} else {
    // 浏览器不支持Network Information API
    console.log('不支持Network Information API');
}

步骤2：获取设备网络连接类型

使用navigator.connection.type属性，可以获取设备的网络连接类型。该属性返回一个字符串，包含4个可能的值：

• bluetooth：蓝牙传输
• cellular：蜂窝数据网络
• ethernet：以太网
• none：无连接
• wifi：Wi-Fi

const connectionType = navigator.connection.type;
console.log('设备当前网络连接类型为：', connectionType);

步骤3：获取设备网络连接实际速度

使用navigator.connection.downlink属性，可以获取设备当前的网络连接实际速度。该属性返回一个数字，代表当前连接的网络速度（以 Mbps 为单位）。

const speedMbps = navigator.connection.downlink;
console.log('设备当前网络连接实际速度为：', speedMbps + 'Mbps');

示例1

if ('connection' in navigator) {
    const connectionType = navigator.connection.type;
    const speedMbps = navigator.connection.downlink;
    console.log('当前网络连接类型为：', connectionType);
    console.log('当前网络连接实际速度为：', speedMbps + 'Mbps');
} else {
    console.log('很抱歉，浏览器不支持Network Information API');
}

示例2

window.addEventListener('DOMContentLoaded', function () {
    if ('connection' in navigator) {
        const connectionType = navigator.connection.type;
        const speedMbps = navigator.connection.downlink;
        const p = document.createElement('p');
        p.innerText = `当前网络连接类型为：${connectionType}，当前网络连接实际速度为：${speedMbps}Mbps`;
        document.body.appendChild(p);
    } else {
        console.log('很抱歉，浏览器不支持Network Information API');
        const p = document.createElement('p');
        p.innerText = '很抱歉，浏览器不支持Network Information API';
        document.body.appendChild(p);
    }
})

在上述第二个示例中，我们使用了DOMContentLoaded事件，在HTML文档加载完成后才执行JavaScript代码。此外，我们在页面中创建了一个p元素，将设备的网络连接信息显示在页面上。