微信小程序如何实现 SSE:从原理到生产实践
一、为什么需要 SSE? SSE(Server-Sent Events,服务器推送事件) 是一种基于 HTTP 的单向实时通信协议。与 WebSocket 的全双工不同,SSE 是 服务端 → 客户端 的单向推送,天然适合以下场景: 💬 实时聊天:接收对方发送的消息 🤖 AI 流式输出:ChatGPT 风格的逐字返回 📊 数据看板:实时刷新指标数据 🔔 消息通知:订单状态变更、审核结果推送 相比 WebSocket,SSE 的优势在于: 维度 SSE ✅ SSE ⚠️ 局限 基于 HTTP,天然支持认证、CORS ✅ 单向通信,客户端需另外发请求 自动重连机制(浏览器端) ✅ 浏览器限制最大 6 个并发连接 协议简单,调试方便 ✅ 不支持二进制数据 防火墙友好,不会被拦截 ✅ IE/Edge Legacy 不支持 二、浏览器中的 SSE 长什么样? 在浏览器中,使用 SSE 非常简单: // 浏览器原生 EventSource —— 就这么简单 const es = new EventSource('/api/events'); // 监听默认消息 es.onmessage = (e) => { console.log('收到消息:', JSON.parse(e.data)); }; // 监听自定义事件 es.addEventListener('chat-message', (e) => { const msg = JSON.parse(e.data); renderMessage(msg); }); // 监听连接状态 es.onerror = () => console.log('连接断开,浏览器会自动重连'); 浏览器的 EventSource API 帮你处理了所有脏活累活: ...