获取网络连接状态

最新推荐文章于 2024-12-07 23:29:20 发布

原创最新推荐文章于 2024-12-07 23:29:20 发布 · 927 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

Web应用可以通过以下方式获取网络状态：

1、navigator.onLine属性：该属性返回一个布尔值，表示当前浏览器是否连上网络。如果返回true，则表示已经连接上网络；如果返回false，则表示网络已经断开。

if (navigator.onLine) {
  console.log("网络已连接");
} else {
  console.log("网络已断开");
}

2、online和offline事件：浏览器会触发这两个事件，来通知应用网络状态的变化。当网络连接上时，会触发online事件；当网络断开时，会触发offline事件。我们可以通过监听这两个事件来实现网络状态的监测。

window.addEventListener('online', function() {
  console.log("网络已连接");
});

window.addEventListener('offline', function() {
  console.log("网络已断开");
});

需要注意的是，这两个事件仅在浏览器支持HTML5时才有效，因此在使用这种方式判断网络状态时需要进行兼容性测试。

3、发送ping请求：在客户端发送ping请求，如果服务器成功响应，则说明当前客户端已经连接上了网络。

function checkNetworkStatus() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/ping");
  xhr.timeout = 1000;
  xhr.onload = function() {
    console.log("网络已连接");
  }
  xhr.onerror = function() {
    console.log("网络已断开");
  }
  xhr.send();
}

需要注意的是，以上方法仅能检测当前客户端是否连接上网络，无法检测客户端与服务器之间的网络状态。如果需要检测客户端与服务器之间的网络状态，可以使用WebSocket等技术。