检测用户是否在线做出反应 - JavaScript

在网页应用程序中，我们经常需要检测用户的在线状态并做出相应的反应。这篇文章将介绍如何使用 JavaScript 检测用户是否在线，并在用户在线/离线状态发生改变时做出反应。

1. 检测用户在线状态

我们可以通过以下两种方式来检测用户是否在线：

1.1. 使用 navigator.onLine 属性

HTML5 的 navigator 对象提供了一个名为 onLine 的属性，用于检测用户是否在线。该属性返回一个布尔值，表示用户是否连接到网络。当用户断开网络连接时，该属性返回 false。

if (navigator.onLine) {
  console.log('用户在线');
} else {
  console.log('用户离线');
}

1.2. 使用 Ajax 请求检测

另一种检测用户在线状态的方法是通过向服务器发送 Ajax 请求。我们可以通过这种方法检查用户是否连接到互联网，但是它需要与服务器进行通信，因此可能会影响性能。

function checkOnlineStatus() {
  $.ajax({
    type: 'HEAD',
    url: window.location.href + '?noCache=' + Math.random(),
    cache: false,
    success: function() {
      console.log('用户在线');
    },
    error: function() {
      console.log('用户离线');
    }
  });
}

2. 检测用户在线/离线状态的变化

一旦我们知道如何检测用户在线状态，就可以开始检测用户在线/离线状态的变化并做出相应的反应。

2.1. 使用 window.addEventListener()

HTML5 的 window 对象提供了一个名为 online 的事件，当用户连接到网络时触发该事件。类似地，当用户断开网络连接时，window 对象提供的 offline 事件将被触发。

window.addEventListener('online', function() {
  console.log('用户已恢复在线状态');
});

window.addEventListener('offline', function() {
  console.log('用户已离线');
});

2.2. 使用 navigator.connection

navigator.connection 在某些情况下可以提供更详细的网络连接信息，例如网络类型和带宽限制。类似 navigator.onLine，该对象也提供了一个名为 onchange 的事件，用于检测用户在线/离线状态的变化。

navigator.connection.addEventListener('change', function() {
  console.log('用户网络状态发生了改变');
  console.log('当前网络类型：' + navigator.connection.type);
  console.log('当前网络带宽限制：' + navigator.connection.downlink);
});

结论

您已经学会如何使用 JavaScript 检测用户是否在线并在用户在线/离线状态发生变化时做出反应。在现代 Web 应用程序中，这是一个非常有用的技能，因为它可以帮助我们更好地管理用户体验和服务质量。

请享受您的工作！