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

window.addEventListener('offline', () => {
  console.log('網(wǎng)絡(luò)已斷開(kāi)');
  // 進(jìn)入離線(xiàn)模式...
});

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

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

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

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

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

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

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