@giszhc/sse-client：前端SSE（Server-Sent Events）通讯神器，这才是更优解（附在线示例）

SSE Client一个轻量、类型安全的 Server-Sent EventsSSE通信客户端库用于浏览器端实时数据订阅。相比 WebSocket本库基于HTTP 长连接更适合流式数据、日志推送、AI 输出等场景。✨ 特性开箱即用- 简单 API快速接入 SSE 服务自动重连- 内置重连机制含兜底策略Namespace 隔离- 避免不同业务消息冲突️类型安全- 完整 TypeScript 支持事件订阅机制- 基于 type 的消息分发⚡轻量无依赖- 基于原生EventSource天然支持流式- 非常适合 AI / 日志 / 进度流⚠️ 与 WebSocket 的关键区别这一段建议你保留否则用户 100% 会误用能力WebSocketSSE通信方式双向单向服务端 → 客户端协议ws / wsshttp / https发送消息✅❌需走 HTTP使用场景聊天 / 游戏流式数据 / 推送重要SSE 不支持直接发送消息在线示例我们提供了一个功能完整的在线演示页面您可以直接在浏览器中体验所有功能 立即体验点击访问在线演示 快速开始基本使用import{SSEClient}fromgiszhc/sse-client;constclientnewSSEClient({url:http://localhost:8080/sse,namespace:my-app:chat:v1,reconnect:true,maxReconnectAttempts:5,reconnectInterval:2000,onConnect:(){console.log(✅ 已连接);},onDisconnect:(){console.log(❌ 已断开连接);},onError:(error){console.error(错误:,error);}});// 监听消息client.on(MESSAGE,(data){console.log(收到消息:,data);}); 消息结构所有服务端推送的数据必须为{__socket_client__:true,namespace:string,type:string,payload?:any}__socket_client__: 内部标识namespace: 命名空间type: 消息类型payload: 消息体 服务端数据格式必须SSE 响应头Content-Type: text/event-stream数据格式data: {__socket_client__:true,namespace:my-app:chat:v1,type:MESSAGE,payload:{text:hello}}注意必须以两个换行结尾 发送消息正确方式由于 SSE 是单向通信发送数据需要通过 HTTPasyncfunctionsendMessage(type:string,payload:any){awaitfetch(/api/send,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({namespace:my-app:chat:v1,type,payload})});}API配置项interfaceSSEClientConfig{url:string;namespace:string;reconnect?:boolean;maxReconnectAttempts?:number;reconnectInterval?:number;onConnect?:()void;onDisconnect?:()void;onError?:(error:Event)void;}on(type, handler)监听事件client.on(MESSAGE,(data,rawEvent){console.log(data);});off(type, handler)取消监听consthandler(data){};client.on(MESSAGE,handler);client.off(MESSAGE,handler);isConnected()client.isConnected();disconnect()手动断开连接禁用重连client.disconnect();destroy()销毁实例client.destroy(); 使用示例流式 AI 输出推荐场景constclientnewSSEClient({url:/api/ai/stream,namespace:ai:chat:v1});letresult;client.on(TOKEN,(chunk){resultchunk;console.log(实时输出:,result);});client.on(END,(){console.log(完成:,result);});日志流client.on(LOG,(log){console.log([${log.level}],log.message);});多命名空间隔离constchatClientnewSSEClient({url:/sse,namespace:app:chat:v1});constnotifyClientnewSSEClient({url:/sse,namespace:app:notification:v1});⚠️ 注意事项1️⃣ SSE 不能发送消息// ❌ 错误client.sendMessage(...);// ✅ 正确fetch(...)2️⃣ namespace 必须一致前后端必须完全匹配namespace:my-app:chat:v13️⃣ 必须返回标准 SSE 格式data: xxx\n\n4️⃣ 注意资源释放useEffect((){constclientnewSSEClient({...});return(){client.destroy();};},[]);5️⃣ 生产环境建议// ✅ 推荐url:https://your-domain.com/sse❌ 常见问题Q: onConnect 什么时候触发A: 在 SSE 连接建立成功时EventSource.onopen。Q: 如何重连A: 默认开启自动重连reconnect:trueQ: payload 支持什么类型A: 所有 JSON 可序列化数据✅ Object / Array✅ String / Number / Boolean❌ FunctionQ: SSE 和 WebSocket 怎么选 简单判断用 SSEAI 流式输出日志 / 进度通知推送用 WebSocket聊天 IM实时互动游戏Q: 可以不用这个库吗可以使用原生constesnewEventSource(/sse);es.onmessage(e){console.log(e.data);};但你需要自己处理重连策略消息分发类型管理 安全建议使用 HTTPS校验 namespace校验 payload 数据做好错误处理 LicenseMIT如果这篇文章对你有帮助欢迎点赞 收藏 ⭐ 关注 完结撒花✿✿ヽ(°▽°)ノ✿