SSE event-source-polyfill 前后台建立通信 和@microsoft/fetch-event-source（消息推送）

1‌.1 安装库‌ event-source-polyfill （不支持post）

npm install event-source-polyfill

1.2 代码实现

import { EventSourcePolyfill } from 'event-source-polyfill';

const sse = new EventSourcePolyfill('https://api.xxx.com/sse', {//换成自己的后台地址
  headers: { 'Authorization': 'Bearer your_token' },  // 自定义请求头‌:ml-citation{ref="1,6" data="citationList"}
  withCredentials: true  // 跨域时携带 Cookie‌:ml-citation{ref="6" data="citationList"}
});

sse.onmessage = (event) => {
  console.log('Received:', event.data);
};

// 关闭连接
sse.close();

2.1 安装库‌ @microsoft/fetch-event-source （支持get和post）

npm install @microsoft/fetch-event-source

2.2 代码实现

import { fetchEventSource } from '@microsoft/fetch-event-source';


const sseInit = () => {
  fetchEventSource('/dev-api/xxxx/sse', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 'Authorization': 'Bearer YOUR_TOKEN',
    },
    body: JSON.stringify({
      "request_id": "1",
      "content": "测试", 
    }),
    onopen(response) {
      // 连接成功时触发
      if (response.ok) return;
      throw new Error('连接失败');
    },
    onmessage(event) {
      // 接收服务器发送的每条事件
      console.log('收到数据:', event.data); 
    },
    onclose() {
      // 连接关闭时触发
      console.log('连接终止');
    },
    onerror(err) {
      // 错误处理（默认会抛出异常并自动重试）
      console.error('错误:', err);
      throw err; // 抛出错误会触发重试机制
    }
  })
}