电商网站 开发费用百度风云榜官网

什么是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/gksk-fund-claim-web/n-fin-ar-demo/210/async?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()}
})