EventSourcePolyfill 创建sse

1、安装

yarn add event-source-polyfill

2、引用

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

 

3、使用

// 创建SSE连接
const url = `${baseUrl}/ai/sse/` + routeParams.value.id;
eventSource.value = new EventSourcePolyfill(url, {
  headers: {
    'clientid': clientId,
    'Authorization': 'Bearer ' + getToken()
  }
});

eventSource.value.addEventListener('task-event', (e) => {
  console.log('自定义事件:', e);
  try {
    const data = JSON.parse(e.data);
    setTimeout(() => {
      updateTaskStatus(data);
    },500)
  } catch (error) {
    console.error('解析SSE消息失败:', error);
  }
});

// 监听错误事件
eventSource.value.onerror = async (error) => {
  console.error('SSE连接错误:', error);
  // await stopSseMonitoring();
  //
  // startSseMonitoring(true);
};

客户端在每次接收到消息时，会把消息的id字段作为内部属性Last-Event-ID 储存起来。SSE默认支持断线重连机制，在连接断开时会触发EventSource的error事件，同时自动重连。再次连接成功时EventSource 会把Last-Event-ID属性作为请求头发送给服务器，这样服务器就可以根据这个Last-Event-ID作出相应的处理。这里需要注意的是，id字段不是必须的，服务器有可能不会在消息中带上 id字段，这样子客户端就不会存在Last-Event-ID 这个属性。所以为了保证数据可靠，我们需要在每条消息上带上 id 字段。
重连效果如下