// 監(jiān)聽網(wǎng)絡連接狀態(tài)
window.addEventListener('online', () => {
  console.log('網(wǎng)絡已連接');
  // 觸發(fā)數(shù)據(jù)同步...
});

window.addEventListener('offline', () => {
  console.log('網(wǎng)絡已斷開');
  // 進入離線模式...
});

// 實時獲取當前狀態(tài)
console.log('當前網(wǎng)絡狀態(tài):', navigator.onLine ? '在線' : '離線');

// client.js
class NetworkMonitor {
  constructor(options = {}) {
    this.options = {
      pingUrl: '/api/ping',        // 心跳檢測接口
      interval: 30000,              // 30秒檢測一次
      timeout: 5000,                 // 5秒超時
      onStatusChange: null,          // 狀態(tài)變化回調(diào)
      ...options
    };
    
    this.isOnline = navigator.onLine;  // 當前網(wǎng)絡狀態(tài)
    this.checking = false;              // 是否正在檢測
    this.timer = null;                  // 定時器
    this.consecutiveFailures = 0;       // 連續(xù)失敗次數(shù)
    this.maxFailures = 2;                // 最大允許失敗次數(shù)
    
    this.init();
  }
  
  init() {
    // 監(jiān)聽瀏覽器原生事件
    window.addEventListener('online', () => this.handleBrowserOnline());
    window.addEventListener('offline', () => this.handleBrowserOffline());
    
    // 啟動心跳檢測
    this.startHeartbeat();
  }
  
  startHeartbeat() {
    this.stopHeartbeat();
    this.timer = setInterval(() => this.checkNetwork(), this.options.interval);
    // 立即執(zhí)行一次
    this.checkNetwork();
  }
  
  stopHeartbeat() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
  
  async checkNetwork() {
    if (this.checking) return;
    
    this.checking = true;
    const startTime = Date.now();
    
    try {
      // 使用fetch發(fā)起一個輕量級請求
      const response = await fetch(this.options.pingUrl, {
        method: 'HEAD',  // 只獲取頭部，減少數(shù)據(jù)傳輸
        mode: 'no-cors', // 如果跨域且無需讀取響應
        cache: 'no-cache',
        headers: {
          'X-Network-Check': 'ping'
        }
      });
      
      // 請求成功
      this.handleSuccess();
      
    } catch (error) {
      // 請求失?。ǔ瑫r、網(wǎng)絡錯誤等）
      this.handleFailure();
    } finally {
      this.checking = false;
    }
  }
  
  handleSuccess() {
    // 重置失敗計數(shù)
    this.consecutiveFailures = 0;
    
    // 如果之前是離線，現(xiàn)在變?yōu)樵诰€
    if (!this.isOnline) {
      this.setOnlineStatus(true);
    }
  }
  
  handleFailure() {
    this.consecutiveFailures++;
    
    // 連續(xù)失敗達到閾值，判定為離線
    if (this.consecutiveFailures >= this.maxFailures && this.isOnline) {
      this.setOnlineStatus(false);
    }
  }
  
  handleBrowserOnline() {
    // 瀏覽器說在線了，但我們?nèi)孕栩炞C真正的API可達性
    console.log('瀏覽器報告網(wǎng)絡已連接，開始驗證...');
    this.checkNetwork();
  }
  
  handleBrowserOffline() {
    // 瀏覽器明確說離線，直接更新狀態(tài)
    this.setOnlineStatus(false);
  }
  
  setOnlineStatus(status) {
    if (this.isOnline !== status) {
      this.isOnline = status;
      
      console.log(`網(wǎng)絡狀態(tài)變更為: ${status ? '在線' : '離線'}`);
      
      // 觸發(fā)回調(diào)
      if (this.options.onStatusChange) {
        this.options.onStatusChange(status);
      }
      
      // 觸發(fā)自定義事件，方便其他地方監(jiān)聽
      window.dispatchEvent(new CustomEvent('network-status-change', {
        detail: { isOnline: status }
      }));
    }
  }
  
  // 手動觸發(fā)一次檢測
  async checkNow() {
    return this.checkNetwork();
  }
  
  // 銷毀
  destroy() {
    this.stopHeartbeat();
    window.removeEventListener('online', this.handleBrowserOnline);
    window.removeEventListener('offline', this.handleBrowserOffline);
  }
}

// 使用示例
const monitor = new NetworkMonitor({
  pingUrl: 'https://your-api.com/api/ping',
  interval: 15000,  // 15秒檢測一次
  timeout: 3000,
  onStatusChange: (isOnline) => {
    if (isOnline) {
      // 網(wǎng)絡恢復，觸發(fā)數(shù)據(jù)同步
      syncWithServer();
      showToast('網(wǎng)絡已恢復，正在同步數(shù)據(jù)...');
    } else {
      // 網(wǎng)絡斷開，進入離線模式
      enableOfflineMode();
      showToast('網(wǎng)絡已斷開，進入離線模式');
    }
  }
});

// server.js
const express = require('express');
const app = express();
const port = 3000;

// 心跳檢測接口
app.head('/api/ping', (req, res) => {
  // 可選：記錄心跳日志
  console.log(`[${new Date().toISOString()}] 收到心跳檢測請求 from ${req.ip}`);
  
  // 可選：檢查自定義頭
  if (req.headers['x-network-check'] === 'ping') {
    console.log('網(wǎng)絡健康檢查請求');
  }
  
  // 只需返回 200 狀態(tài)碼即可
  res.status(200).end();
});

// 如果需要 GET 也支持（某些場景可能需要）
app.get('/api/ping', (req, res) => {
  // 可以返回一些輕量級數(shù)據(jù)
  res.json({ 
    status: 'ok', 
    timestamp: Date.now(),
    message: 'success' 
  });
});

// 啟動服務器
app.listen(port, () => {
  console.log(`網(wǎng)絡監(jiān)控服務運行在 http://localhost:${port}`);
});

console.log("網(wǎng)絡狀態(tài)：" + navigator.connection.effectiveType); // 比如：4g/3g/2g
console.log("網(wǎng)絡下行速度：" + navigator.connection.downlink  + "MB/S"); // 比如：10MB/S