SSE 是服务器单向持续推送数据的轻量级 HTTP 机制。基于长连接,服务器保持响应打开并按 data: 格式写入,客户端用 EventSource 监听;需设置 text/event-stream 响应头、正确换行,支持自动重连与自定义事件。

JavaScript 服务器推送(Server-Sent Events,SSE)是一种让服务器**单向、持续地向浏览器发送数据**的轻量级机制。它不是双向通信(不像 WebSocket),也不依赖轮询(不像传统 AJAX 轮询),而是基于 HTTP 的长连接,由服务器主动“推”数据给客户端。
Server-Sent Events 的核心原理
SSE 基于一个持久的 HTTP 连接:浏览器发起一次 GET 请求,服务器保持连接打开,并在有新数据时,按特定格式逐条写入响应流。浏览器内置的 EventSource API 自动解析这些数据,触发事件。
关键点:
协议是纯文本,每条消息以 data: 开头,可选带 id:(用于断线重连)、event:(自定义事件名)、retry:(重连间隔毫秒) 服务器必须设置响应头:Content-Type: text/event-stream 和 Cache-Control: no-cache 连接默认在断开后自动重试(约 3 秒),支持手动关闭 只支持服务器 → 浏览器方向,适合实时通知、日志流、股票行情等场景
前端怎么用 EventSource?
只需创建 EventSource 实例,监听事件即可:
立即学习“Java免费学习笔记(深入)”;
const source = new EventSource(“/api/notifications”);
source.onmessage = function(event) {
console.log(“收到普通消息:”, event.data);
};
source.addEventListener(“update”, function(event) {
console.log(“收到 update 类型消息:”, event.data);
});
source.onerror = function(err) {
console.error(“SSE 连接出错”, err);
};
注意:EventSource 只支持 GET,不携带 Cookie(除非显式配置 withCredentials: true),且跨域需服务器返回 Access-Control-Allow-Origin。
后端如何发送 SSE 数据?(以 Node.js Express 为例)
关键是保持响应不结束、正确设置头部、按格式输出:
app.get(‘/api/notifications’, (req, res) => {
res.writeHead(200, {
‘Content-Type’: ‘text/event-stream’,
‘Cache-Control’: ‘no-cache’,
‘Connection’: ‘keep-alive’
});
// 发送一条消息
res.write(‘data: {“msg”: “欢迎连接”}nn’);
// 每 2 秒推送一次更新
const interval = setInterval(() => {
res.write(`data: {“time”: “${new Date().toISOString()}”}` + ‘nn’);
}, 2000);
req.on(‘close’, () => {
clearInterval(interval);
res.end();
});
});
真实项目中建议使用流式响应工具(如 Express 的 res.flush() 或更可靠的库如 sse-express)来确保数据及时写出,避免缓冲阻塞。
基本上就这些。SSE 不复杂但容易忽略响应头和换行格式——只要服务端按规范吐数据,前端用 EventSource 监听,就能实现低延迟、低开销的服务器推送。
以上就是什么是javascript服务器推送_Server-Sent Events如何工作?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542148.html
微信扫一扫
支付宝扫一扫