电商网站 开发费用线上推广的公司
什么是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()}
})