const eventSource = new EventSource('你的SSE接口地址');

eventSource.onmessage = (event) => {
  console.log('接收到數(shù)據(jù):', event.data);
  // 對響應(yīng)數(shù)據(jù)進(jìn)行業(yè)務(wù)處理
    ...業(yè)務(wù)代碼
};

eventSource.onerror = (error) => {
  console.error('SSE連接錯(cuò)誤:', error);
  // 可選：重連邏輯
};

const params = new URLSearchParams({ key1: 'value1', key2: 'value2' });
const url = `/api/v1/sse?${params.toString()}`;
const eventSource = new EventSource(url);

async function fetchSSE(url, options = {}) {
  const response = await fetch(url, {
    ...options,
    // 請求頭可根據(jù)接口文檔自行調(diào)整
    headers: {
      'Accept': 'text/event-stream', // 聲明需要SSE格式
      ...options.headers,
    },
  });

  if (!response.ok) Promise.reject(new Error(response.status));

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value);
    // 解析SSE格式的數(shù)據(jù)（如 "data: ...\n\n"）
    chunk.split('\n\n').forEach(event => {
      if (event.trim()) {
        const data = event.replace(/^data: /, '').trim();
        // 持續(xù)解析數(shù)據(jù)進(jìn)行業(yè)務(wù)處理
        ...業(yè)務(wù)代碼
      }
    });
  }
}

// 調(diào)用示例
fetchSSE('url', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer xxx' },
  body: JSON.stringify({ key: 'value' }),
}).catch(error => {
    // 錯(cuò)誤處理
})

function xhrSSE(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.setRequestHeader('Accept', 'text/event-stream');
  xhr.onprogress = function() {
    // 增量獲取響應(yīng)文本（需后端支持分塊傳輸）
    const newData = xhr.responseText.substring(lastIndex);
    lastIndex = xhr.responseText.length;
    // 業(yè)務(wù)處理
    ...業(yè)務(wù)代碼
  };
  xhr.send();
}

// streamUtils.ts

/**
 * SSE 請求配置選項(xiàng)
 * @template T - 期望解析的數(shù)據(jù)類型 (默認(rèn)為 string)
 */
type SSEOptions<T> = {
  /**
   * 請求目標(biāo) URL (必需)
   * @example "/api/chat-stream"
   */
  url: string;

  /**
   * fetch 請求初始化配置
   * @default { method: 'GET' }
   * @example {
   *   method: "POST",
   *   headers: { "Authorization": "Bearer token" },
   *   body: JSON.stringify({ prompt: "Hello" })
   * }
   */
  requestInit?: RequestInit;

  /**
   * 自定義事件塊解析器
   * @param eventChunk - 原始事件字符串 (包含 "data:" 等前綴)
   * @returns 解析后的數(shù)據(jù)對象或 null (表示無效數(shù)據(jù))
   * @default defaultParser
   */
  parser?: (eventChunk: string) => T | null;

  /**
   * 數(shù)據(jù)到達(dá)回調(diào) (必需)
   * @param data - 解析后的數(shù)據(jù)對象
   */
  onOpen: (data: String) => void;
  onData: (data: T) => void;

  /**
   * 錯(cuò)誤處理回調(diào)
   * @param error - 遇到的錯(cuò)誤對象
   */
  onError?: (error: Error) => void;

  /**
   * 流接收完成回調(diào)
   */
  onComplete?: () => void;
};

/**
 * SSE 流處理核心方法
 * @template T - 期望解析的數(shù)據(jù)類型
 * @param options - 配置選項(xiàng)
 * @returns 包含中止方法的對象 { abort: () => void }
 *
 * @example 基本使用
 * const { abort } = fetchStream({
 *   url: "/api/stream",
 *   onData: data => console.log(data),
 *   onError: err => console.error(err)
 * });
 *
 * @example 帶自定義解析器
 * fetchStream({
 *   parser: chunk => ({ msg: chunk.trim() }),
 *   // ...其他配置
 * });
 */
export function fetchStream<T = string>(options: SSEOptions<T>) {
  // 創(chuàng)建中止控制器用于中斷請求
  const controller = new AbortController();

  // 文本解碼器用于處理二進(jìn)制流
  const decoder = new TextDecoder();

  // 保存不完整的事件塊 (跨 chunk 的場景)
  let partialChunk = '';

  // 解構(gòu)配置參數(shù)并設(shè)置默認(rèn)值
  const { parser = defaultParser, onOpen, onData, onError, onComplete } = options;
  onOpen && onOpen('會話開始')
  /**
   * 處理流數(shù)據(jù)的內(nèi)部方法
   * @param response - fetch 返回的響應(yīng)對象
   */
  async function handleStream(response: Response) {
    try {
      // 獲取可讀流讀取器
      const reader = response.body?.getReader();
      if (!reader) throw new Error('Failed to get stream reader');

      // 持續(xù)讀取數(shù)據(jù)流
      while (true) {
        const { done, value } = await reader.read();
        if (done) break; // 流讀取結(jié)束

        // 解碼當(dāng)前 chunk 并拼接之前未完成的數(shù)據(jù)
        const chunk = decoder.decode(value, { stream: true });

        // 使用通用行結(jié)束符分割事件塊 (兼容不同系統(tǒng))
        // 注意：SSE 規(guī)范要求用 \n\n 分割，但某些服務(wù)可能使用 \r\n\r\n
        const events = (partialChunk + chunk).split(/\r\n\r\n|\n\n/);

        // 保存未完成的事件塊供下次處理
        partialChunk = events.pop() || '';

        // 處理每個(gè)完整的事件塊
        for (const eventChunk of events) {
          const data = parser(eventChunk);
          if (data !== null) {
            onData(data); // 觸發(fā)數(shù)據(jù)回調(diào)
          }
        }
      }

      // 處理剩余數(shù)據(jù) (最后一個(gè)事件塊)
      if (partialChunk) {
        const data = parser(partialChunk);
        if (data !== null) onData(data);
      }

      onComplete?.(); // 觸發(fā)完成回調(diào)
    } catch (error) {
      // 忽略主動中斷產(chǎn)生的錯(cuò)誤
      if (error instanceof Error && error.name !== 'AbortError') {
        onError?.(error);
      }
    }
  }

  // 發(fā)起 fetch 請求
  fetch(options.url, {
    ...options.requestInit, // 用戶自定義配置
    signal: controller.signal, // 綁定中止信號
    headers: {
      Accept: 'text/event-stream', // 確保接收 SSE 流
      ...options.requestInit?.headers, // 合并用戶自定義 headers
    },
  })
    .then(handleStream)
    .catch((error) => {
      // 處理初始請求錯(cuò)誤 (如網(wǎng)絡(luò)問題)
      if (error instanceof Error && error.name !== 'AbortError') {
        onError?.(error);
      }
    });

  // 返回中止方法供外部調(diào)用
  return {
    /** 中止當(dāng)前請求 */
    abort: () => controller.abort(),
  };
}

/**
 * 默認(rèn) SSE 解析器
 * @param eventChunk - 原始事件字符串
 * @returns 解析后的數(shù)據(jù)對象或 null
 *
 * @example 輸入示例
 * "data: Hello\ndata: World\n\n"
 *
 * @example 輸出結(jié)果
 * "Hello\nWorld" (自動合并多個(gè) data 行)
 */
function defaultParser<T = string>(eventChunk: string): T | null {
  try {
    let content = '';
    // 逐行處理事件內(nèi)容
    for (const line of eventChunk.split('\n')) {
      // 僅處理 data 字段 (忽略 event/id/retry 等)
      if (line.startsWith('data:')) {
        content += line.slice(5).trim() + '\n'; // 保留換行結(jié)構(gòu)
      }
    }
    content = content.trim(); // 去除首尾空白

    // 空內(nèi)容返回 null
    if (!content) return null;

    // 嘗試解析為 JSON，失敗則返回原始字符串
    try {
      return JSON.parse(content) as T;
    } catch {
      return content as unknown as T;
    }
  } catch (e) {
    console.error('SSE parsing error:', e);
    return null;
  }
}

let abortController: (() => void) | null = null; // 中止控制器

// 發(fā)起SSE請求
const { abort } = fetchStream({
   url: `/ai/chat/memory`,
    requestInit: {
      method: "POST",
      body: formData
    },
    onOpen(data) {
      // 開始
    },
    onData(data) {
      // 有返回?cái)?shù)據(jù)了
     
    },
    onError(err) {
      console.log("會話失敗");
      error.value = `請求失敗: ${err.message}`;
      
    },
    onComplete() {
      console.log("會話結(jié)束");
      
    },
  });

  abortController = abort; // 保存中止函數(shù)
};

// 組件卸載時(shí)中止請求
onUnmounted(() => {
  abortController?.();
});