EventSource的使用

什么是EventSource
EventSource 是一个用于服务器推送事件（Server-Sent Events, SSE）的接口，它允许服务器推送实时更新到浏览器。与 WebSocket 不同，SSE 是单向的（服务器到客户端），适用于更新频率不高的实时通知、消息推送等场景。下面是关于 EventSource 的详细介绍，包括使用示例和注意事项。

基本概念：服务器向客户端推送实时更新，而不需要客户端发起请求。
使用案例
（使用场景：前端页面需要一次性渲染大数据量时，不能一次性返回，需要服务器不断向前端推送）

  const pageSize = '1000';
    const cstId = params;
    const pageNum = '1';
    const url = `${process.env.VUE_APP_BASE_URL}api/url?pageSize=${pageSize}&cstId=${cstId}&pageNum=${pageNum}`;
    eventSource.value = new EventSource(url)
    eventSource.value.onmessage = (event) => {
        try {
          const message = JSON.parse(event.data);
          const dataAll = []
          if (message.code === 'DONE') {
            eventSource.value?.close()
            return
          }
          dataAll.push(message.data ? message.data : []);
          dataAll.forEach((item: any) => {
            data.value = [...data.value, ...item]
          })
        } catch (error) {
          eventSource.value?.close()
          console.error('Error parsing message:', error);
        }
      };
      
      eventSource.value.onerror = (error) => {
        console.log('SSE connection error:', error);
        eventSource.value?.close()
      }
      
 //记得在离开页面前销毁，否则造成内存溢出
onUnmounted(() => {
  if (eventSource.value) {
    eventSource.value.close()
  }
})