目次vue3利用sse最佳实践,封装工具工具[code]// 接受参数 export interface SSEChatParams { url: string,// sse 毗连 onmessage: (event: MessageEvent) => void,// 处理消息的函数 onopen: () => void,// 建立连打仗发的事件 finallyHandler: () => void,// 相当于 try_finally 中的 finally 部分，不管出现异常大概关闭一定会执行的代码块 } class SSEService { private eventSource: EventSource | null = null; private finallyHandler: (() => void) | undefined; // 建立毗连 connect(sseChatParams: SSEChatParams) { this.finallyHandler = sseChatParams.finallyHandler; this.eventSource = new EventSource(sseChatParams.url); if (sseChatParams.onopen != null) { this.eventSource.onopen = sseChatParams.onopen; }else{ this.eventSource.onopen = () => { console.log('SSE 毗连已开启'); }; } if (sseChatParams.onmessage != null) { this.eventSource.onmessage = sseChatParams.onmessage; } else { this.eventSource.onmessage = (event) => { console.log('收到消息：', event.data); }; } this.eventSource.onerror = (error) => { if (this.eventSource?.readyState === EventSource.CLOSED) { console.log("SSE 毗连已关闭"); } else { console.error("SSE 错误：", error); } sseChatParams.finallyHandler(); }; } // 关闭毗连 disconnect() { if (this.eventSource) { this.eventSource.close(); console.log("关闭 sse 毗连") if (this.finallyHandler != null) { this.finallyHandler(); } } } } export const sseService = new SSEService(); [/code]利用我在我代码中是如许利用的，就这么简单 [code]const onopen = () => { console.log("建立无敌 sse 毗连成功") } // 建立毗连 let sseChatParams: SSEChatParams = { onopen, url: import.meta.env.VITE_GLOB_API_URL + 'sse/createConnect?clientId=' + userStore.getSseClientId(), onmessage: (event: MessageEvent) => { // 收到消息 console.log('收到消息xsssx：', event.data); let chunk = event.data; if (chunk === '[DONE]') { sseService.disconnect() state.imageList = [] chatGuide(chatStore.activeChatId).then(resp => { chatGuideList.value = resp.data.guideList scrollViewBottom() }) return } chunk = JSON.parse(chunk) if (chunk.type === 'error') { errorText = chunk.content console.log("errorText", errorText); updateChatData(errorText) return; } chunk = chunk.content; if (!chunk) { return; } lastText = lastText + chunk // 更新聊天数据源中的对话 updateChatData(lastText) }, finallyHandler: () => { console.log("finallyHandler操作") sessionStatus.value = 0 inputDisabled.value = false dataSources.value[dataSources.value.length - 1].loading = false loading.value = false if (!isMobile.value) { // 聚焦输入框 inputRef.value?.focus() } } }; sseService.connect(sseChatParams) [/code]别的你大概还需要增长一下关闭触发机遇 [code]// 当组件从 DOM 中卸载前执行的操作 onUnmounted(() => { sseService.disconnect() })[/code]这里需要提一嘴，关于 sse 中的 onopen 触发机遇 当你和服务器建立 sse 毗连的时间，如果后端没有通过 sse 返回给你消息的话，那么前端浏览器大概率是不会触发 onopen 事件。 所以当与后端建立毗连后要留意咯~ 总结以上为个人履历，盼望能给大家一个参考，也盼望大家多多支持脚本之家。 来源：https://www.jb51.net/javascript/32665307y.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 09:20 , Processed in 0.038728 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
