js如何检测用户在线状态 在线状态检测的5种实用技巧

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

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

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

function sendHeartbeat() {
  fetch('/heartbeat') // 假设服务器有一个 /heartbeat 接口
    .then(response => {
      if (!response.ok) {
        throw new Error('心跳失败');
      }
    })
    .catch(error => {
      console.error('心跳失败:', error);
      // 处理心跳失败的情况，例如尝试重新连接
    });
}

setInterval(sendHeartbeat, 30000); // 每30秒发送一次心跳

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    console.log("用户离开了页面");
    // 可以暂停一些活动，例如停止轮播图
  } else {
    console.log("用户回到了页面");
    // 可以恢复活动
  }
});

const socket = new WebSocket('ws://example.com/socket');

socket.addEventListener('open', function (event) {
  console.log('WebSocket 连接已建立');
  // 定期发送心跳包
  setInterval(() => {
    socket.send('ping');
  }, 30000);
});

socket.addEventListener('close', function (event) {
  console.log('WebSocket 连接已关闭');
  // 处理连接关闭的情况，例如尝试重新连接
});

socket.addEventListener('message', function (event) {
  if (event.data === 'pong') {
    console.log('收到服务器心跳响应');
  }
});

socket.addEventListener('error', function (event) {
  console.error('WebSocket 发生错误:', event);
});

fetch('/ping') // 假设服务器有一个 /ping 接口
  .then(response => {
    if (response.ok) {
      console.log("网络畅通");
    } else {
      console.log("网络可能存在问题");
    }
  })
  .catch(error => {
    console.error('网络请求失败:', error);
    console.log("网络可能存在问题");
  });