SSE插件 event-source-polyfill 使用

项目中需要携带token

由于原生 EventSource 不支持自定义请求头，需要使用第三方库或 polyfill

npm install event-source-polyfill

示例：

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

const token = localStorage.getItem('token');

const eventSource = new EventSourcePolyfill('/api/sse/notifications', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'text/event-stream',
  },
  withCredentials: true, // 如果需要携带 Cookie
  heartbeatTimeout: 18000000, // 将超时时间改为 半小时（默认 45000）
});

// 连接打开
eventSource.onopen = (event) => {
    console.log("SSE连接成功", event);
    // 连接成功后，停止轮询
    stopPolling();
};
//默认推送
eventSource.onmessage = (event) => {
  console.log('收到推送:', JSON.parse(event.data));
};

//监听自定义事件 connected
eventSource.addEventListener('connected',(event)=>{
    console.log("收到 connected 事件:", event);
    const data = JSON.parse(event.data);
    console.log("解析后的数据:", data);
})
// 连接错误
eventSource.onerror = (error) => {
    console.error('SSE 连接错误:', error);
    // 关闭SSE连接
    eventSource.close();
    //移除监听
   eventSourcee.removeEventListener("connected");
};

SSE也有跨域问题

在 Vue 开发环境中，Vite 或 Webpack 的 proxy 代理可以有效解决 SSE 的跨域问题，但这仅限于开发环境。