// 1. 創(chuàng)建SSE連接（參數(shù)為后端SSE接口地址）
const eventSource = new EventSource('/api/sse');
// 2. 監(jiān)聽(tīng)通用消息（服務(wù)器發(fā)送的無(wú)type字段的消息）
eventSource.onmessage = (e) => {
  console.log('收到通用消息：', e.data); // e.data為服務(wù)器推送的文本數(shù)據(jù)
};
// 3. 監(jiān)聽(tīng)自定義類型消息（服務(wù)器指定type字段）
eventSource.addEventListener('customEvent', (e) => {
  console.log('收到自定義消息：', e.data);
});
// 4. 監(jiān)聽(tīng)連接打開(kāi)事件
eventSource.onopen = () => {
  console.log('SSE連接已打開(kāi)');
};
// 5. 監(jiān)聽(tīng)連接錯(cuò)誤事件
eventSource.onerror = (error) => {
  console.error('SSE連接異常：', error);
  // 錯(cuò)誤時(shí)會(huì)自動(dòng)重連，可在此處處理特殊邏輯（如登錄失效）
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log('SSE連接已關(guān)閉，將自動(dòng)重連');
  }
};
// 6. 手動(dòng)關(guān)閉連接
// eventSource.close();

class SSEClient {
  /**
   * 構(gòu)造函數(shù)
   * @param {Object} options 配置項(xiàng)
   * @param {string} options.url SSE接口地址
   * @param {Object} [options.headers={}] 自定義請(qǐng)求頭
   * @param {number} [options.reconnectInterval=3000] 重連間隔（毫秒）
   * @param {number} [options.maxReconnectTimes=10] 最大重連次數(shù)，-1表示無(wú)限重連
   * @param {boolean} [options.autoReconnect=true] 是否自動(dòng)重連
   * @param {string} [options.method='GET'] 請(qǐng)求方法（部分瀏覽器僅支持GET）
   * @param {Function} [options.onOpen] 連接打開(kāi)回調(diào)
   * @param {Function} [options.onMessage] 通用消息回調(diào)
   * @param {Function} [options.onError] 錯(cuò)誤回調(diào)
   * @param {Function} [options.onReconnect] 重連回調(diào)
   * @param {Function} [options.onClose] 連接關(guān)閉回調(diào)
   */
  constructor(options = {}) {
    // 默認(rèn)配置
    this.defaultOptions = {
      url: '',
      headers: {},
      reconnectInterval: 3000,
      maxReconnectTimes: 10,
      autoReconnect: true,
      method: 'GET',
      onOpen: () => {},
      onMessage: () => {},
      onError: () => {},
      onReconnect: () => {},
      onClose: () => {},
    };
 
    // 合并配置
    this.options = { ...this.defaultOptions, ...options };
    if (!this.options.url) {
      throw new Error('SSEClient: url is required');
    }
 
    // 狀態(tài)管理
    this.status = 'closed'; // closed, connecting, open
    this.eventSource = null; // 原生EventSource實(shí)例
    this.reconnectCount = 0; // 已重連次數(shù)
    this.reconnectTimer = null; // 重連定時(shí)器
 
    // 初始化連接
    this.connect();
  }
 
  /**
   * 創(chuàng)建連接
   */
  connect() {
    if (this.status === 'connecting' || this.status === 'open') return;
 
    this.status = 'connecting';
    // 原生EventSource不支持自定義請(qǐng)求頭，此處用XMLHttpRequest兼容（部分場(chǎng)景可用）
    // 若瀏覽器支持EventSource的withCredentials，可結(jié)合后端配置實(shí)現(xiàn)鑒權(quán)
    try {
      this.eventSource = new EventSource(this.buildUrl(), { withCredentials: true });
 
      // 監(jiān)聽(tīng)連接打開(kāi)
      this.eventSource.onopen = (e) => {
        this.status = 'open';
        this.reconnectCount = 0; // 重置重連次數(shù)
        this.options.onOpen(e);
      };
 
      // 監(jiān)聽(tīng)通用消息
      this.eventSource.onmessage = (e) => {
        const data = this.formatMessage(e.data);
        this.options.onMessage(data, e);
      };
 
      // 監(jiān)聽(tīng)錯(cuò)誤
      this.eventSource.onerror = (error) => {
        this.status = 'closed';
        this.options.onError(error);
        this.handleReconnect();
      };
    } catch (error) {
      this.status = 'closed';
      this.options.onError(error);
      this.handleReconnect();
    }
  }
 
  /**
   * 處理重連邏輯
   */
  handleReconnect() {
    if (!this.options.autoReconnect) {
      this.options.onClose();
      return;
    }
 
    // 超過(guò)最大重連次數(shù)，停止重連
    if (this.options.maxReconnectTimes !== -1 && this.reconnectCount >= this.options.maxReconnectTimes) {
      this.options.onClose();
      return;
    }
 
    // 清除之前的重連定時(shí)器
    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
 
    // 延遲重連
    this.reconnectTimer = setTimeout(() => {
      this.reconnectCount++;
      this.options.onReconnect(this.reconnectCount, this.options.maxReconnectTimes);
      this.connect();
    }, this.options.reconnectInterval);
  }
 
  /**
   * 構(gòu)建請(qǐng)求URL（拼接查詢參數(shù)，可選）
   * @returns {string} 處理后的URL
   */
  buildUrl() {
    const { url, method } = this.options;
    // 若為GET請(qǐng)求，可在此處拼接查詢參數(shù)（示例）
    // 實(shí)際場(chǎng)景可根據(jù)需求擴(kuò)展，如添加時(shí)間戳避免緩存
    return method.toUpperCase() === 'GET' ? `${url}?t=${Date.now()}` : url;
  }
 
  /**
   * 格式化消息數(shù)據(jù)（默認(rèn)JSON解析，可擴(kuò)展）
   * @param {string} data 原始消息數(shù)據(jù)
   * @returns {any} 格式化后的數(shù)據(jù)
   */
  formatMessage(data) {
    try {
      // 嘗試JSON解析
      return JSON.parse(data);
    } catch (error) {
      // 非JSON格式直接返回原始數(shù)據(jù)
      return data;
    }
  }
 
  /**
   * 監(jiān)聽(tīng)自定義類型消息
   * @param {string} eventType 消息類型
   * @param {Function} callback 回調(diào)函數(shù)
   */
  on(eventType, callback) {
    if (!this.eventSource) return;
    this.eventSource.addEventListener(eventType, (e) => {
      const data = this.formatMessage(e.data);
      callback(data, e);
    });
  }
 
  /**
   * 移除自定義類型消息監(jiān)聽(tīng)
   * @param {string} eventType 消息類型
   * @param {Function} callback 回調(diào)函數(shù)
   */
  off(eventType, callback) {
    if (!this.eventSource) return;
    this.eventSource.removeEventListener(eventType, callback);
  }
 
  /**
   * 手動(dòng)關(guān)閉連接
   */
  close() {
    this.options.autoReconnect = false; // 關(guān)閉自動(dòng)重連
    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
    if (this.eventSource) {
      this.eventSource.close();
      this.eventSource = null;
    }
    this.status = 'closed';
    this.options.onClose();
  }
 
  /**
   * 獲取當(dāng)前連接狀態(tài)
   * @returns {string} 連接狀態(tài)
   */
  getStatus() {
    return this.status;
  }
}

// 1. 初始化SSE連接（攜帶Token鑒權(quán)，假設(shè)后端支持通過(guò)請(qǐng)求頭獲取Token）
const sseClient = new SSEClient({
  url: '/api/sse/notifications',
  headers: {
    Authorization: 'Bearer ' + localStorage.getItem('token'), // 鑒權(quán)Token
  },
  reconnectInterval: 5000, // 重連間隔5秒
  maxReconnectTimes: 5, // 最大重連5次
  // 生命周期鉤子
  onOpen: () => {
    console.log('消息通知SSE連接已打開(kāi)');
  },
  onError: (error) => {
    console.error('消息通知SSE連接異常：', error);
  },
  onReconnect: (count, max) => {
    console.log(`消息通知SSE正在重連，第${count}/${max}次`);
  },
  onClose: () => {
    console.log('消息通知SSE連接已關(guān)閉');
  },
});
 
// 2. 監(jiān)聽(tīng)通用消息（若后端推送的通知無(wú)自定義type）
sseClient.options.onMessage = (data) => {
  console.log('收到新通知：', data);
  // 展示通知彈窗
  showNotification({
    title: data.title,
    content: data.content,
    time: data.createTime,
  });
};
 
// 3. 監(jiān)聽(tīng)自定義類型消息（若后端按通知類型區(qū)分，如system/pm）
sseClient.on('systemNotice', (data) => {
  console.log('收到系統(tǒng)通知：', data);
  // 系統(tǒng)通知特殊處理（如高亮顯示）
  showNotification({ ...data, type: 'system' });
});
 
sseClient.on('privateMessage', (data) => {
  console.log('收到私信：', data);
  // 私信處理（如跳轉(zhuǎn)聊天頁(yè)面）
  showNotification({ ...data, type: 'pm' });
});
 
// 4. 頁(yè)面卸載時(shí)關(guān)閉連接
window.addEventListener('beforeunload', () => {
  sseClient.close();
});

// 1. 初始化SSE連接（攜帶日志類型參數(shù)）
const logSseClient = new SSEClient({
  url: '/api/sse/logs?type=api', // 只接收API日志
  autoReconnect: true,
  maxReconnectTimes: -1, // 無(wú)限重連（日志展示需持續(xù)連接）
  onOpen: () => {
    console.log('日志SSE連接已打開(kāi)');
  },
});
 
// 2. 監(jiān)聽(tīng)日志消息，更新頁(yè)面列表
logSseClient.options.onMessage = (logData) => {
  const logList = document.getElementById('log-list');
  const logItem = document.createElement('li');
  // 格式化日志內(nèi)容（時(shí)間、級(jí)別、信息）
  logItem.innerHTML = `
${logData.timestamp}${logData.level}${logData.message}
  `;
  logList.prepend(logItem); // 新增日志插入頂部
  // 限制日志數(shù)量，避免DOM過(guò)多
  if (logList.children.length > 100) {
    logList.removeChild(logList.lastChild);
  }
};
 
// 3. 手動(dòng)關(guān)閉日志連接（如切換到其他標(biāo)簽頁(yè)時(shí)）
document.getElementById('close-log-btn').addEventListener('click', () => {
  logSseClient.close();
  console.log('日志SSE連接已手動(dòng)關(guān)閉');
});

// 1. 安裝依賴
npm install event-source-polyfill --save
 
// 2. 引入并使用
import { EventSourcePolyfill } from 'event-source-polyfill';
 
// 在SSEClient類中替換原生EventSource
// this.eventSource = new EventSource(this.buildUrl(), { withCredentials: true });
this.eventSource = new EventSourcePolyfill(this.buildUrl(), {
  withCredentials: true,
  headers: this.options.headers, //  polyfill支持自定義請(qǐng)求頭
});