vue3 中使用 sse 最佳实践，封装工具
工具
// 接受参数
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();
使用
我在我代码中是这样使用的，就这么简单
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.guideListscrollViewBottom()})return}chunk = JSON.parse(chunk)if (chunk.type === 'error') {errorText = chunk.contentconsole.log("errorText", errorText);updateChatData(errorText)return;}chunk = chunk.content;if (!chunk) {return;}lastText = lastText + chunk// 更新聊天数据源中的对话updateChatData(lastText)},finallyHandler: () => {console.log("finallyHandler操作")sessionStatus.value = 0inputDisabled.value = falsedataSources.value[dataSources.value.length - 1].loading = falseloading.value = falseif (!isMobile.value) {// 聚焦输入框inputRef.value?.focus()}}
};
sseService.connect(sseChatParams)
另外你可能还需要增加一下关闭触发时机
// 当组件从 DOM 中卸载前执行的操作
onUnmounted(() => {sseService.disconnect()
})
这里需要提一嘴，关于 sse 中的 onopen 触发时机
当你和服务器建立 sse 连接的时候，如果后端没有通过 sse 返回给你消息的话，那么前端浏览器大概率是不会触发 onopen 事件。
所以当与后端建立连接后要注意咯~
最后介绍一下自己的网站术士 AI：术士AI 2.0 (shushiai.com)
有兴趣用用玩玩，最好也支持一下，谢谢