SSE是一种基于HTTP的服务器向客户端推送数据的技术，通过EventSource接口实现，适用于通知、实时日志等场景。它单向通信，服务端需设置Content-Type为text/event-stream并保持长连接，数据格式为data: 内容nn，可选id和event字段支持重连与事件类型区分。Node.js示例中每秒发送时间数据，客户端自动重连，默认3秒，可通过retry指令调整。含id的消息断开后恢复时携带Last-Event-ID头，便于续传。关闭用close()方法。SSE优势在于简单高效，兼容性好，无需额外协议，但仅单向、占用独立HTTP连接，IE不支持。适合低复杂度实时更新需求。
Server-Sent Events（SSE）是 JavaScript 中一种让服务器主动向客户端推送数据的技术。它基于 HTTP 协议，允许浏览器通过 EventSource 接口接收来自服务器的实时更新。与 WebSocket 不同，SSE 是单向通信——数据只能从服务器推送到客户端，适合用于通知、实时日志、股票行情等场景。
基本使用方式
SSE 的客户端实现非常简单，只需创建一个 EventSource 实例并监听消息即可：
const eventSource = new EventSource('/api/updates');eventSource.onmessage = function(event) { console.log('收到消息:', event.data);};eventSource.onerror = function(event) { console.error('发生错误', event);};
服务器只要返回正确的 MIME 类型（text/event-stream），并保持连接不断开，就可以持续发送数据。
服务器端实现要点
服务端需要满足几个关键条件才能支持 SSE：
立即学习“Java免费学习笔记（深入）”；
响应头必须设置 Content-Type 为 text/event-stream 连接不能立即关闭，应保持长连接 每次发送数据需遵循特定格式：data: 内容nn 可选地发送 id: 或 event: 字段以支持重连和事件类型区分
以 Node.js 为例：
app.get('/api/updates', (req, res) => { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); setInterval(() => { res.write(`data: ${JSON.stringify({ time: new Date() })}nn`); }, 1000);});
连接管理和错误处理
EventSource 会自动在断线后尝试重连，默认延迟约 3 秒。你也可以在服务端通过 retry: 指令指定重试时间：
LanguagePro
LanguagePro是一款强大的AI写作助手，可以帮助你更好、更快、更有效地写作。
120 查看详情 res.write(‘retry: 5000n’);
如果收到的消息包含 id 字段，浏览器会在 reconnect 时带上 Last-Event-ID 请求头，可用于恢复丢失的消息：
res.write(‘id: 123ndata: Hellonn’);
关闭连接时调用 eventSource.close() 可终止监听。
适用场景与限制
SSE 最大的优势是简单且兼容性较好，基于 HTTP 无需额外协议支持。但它也有局限：
只支持服务器到客户端的单向通信 每个 EventSource 实例占用一个 HTTP 连接，大量并发可能影响性能 IE 和旧版浏览器不支持
对于不需要双向交互的实时更新功能，SSE 是比轮询更高效、比 WebSocket 更轻量的选择。
基本上就这些。用好 SSE 能显著提升页面实时性，同时避免复杂性。关键是服务端输出格式要正确，客户端处理要稳定。不复杂但容易忽略细节。
以上就是JavaScript Server-Sent Events技术的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/722154.html
微信扫一扫 
支付宝扫一扫 
