SSE是服务器向浏览器单向推送数据的技术，使用EventSource建立连接，通过text/event-stream格式持续发送消息，适合实时通知等场景。
服务器发送事件（Server-Sent Events，简称SSE）是一种让服务器通过HTTP连接向浏览器推送数据的技术。与WebSocket不同，SSE是单向通信，只允许服务器向客户端推送消息，适合用于实时通知、动态更新等场景，比如股票行情、新闻推送或日志监控。
前端如何使用JavaScript建立SSE连接
在浏览器中，使用EventSource对象可以轻松连接支持SSE的服务器。
创建 EventSource 实例，传入服务器端的URL 监听 message 事件接收推送数据 可选：监听 error 或自定义事件处理异常或特定消息
示例代码：
const eventSource = new EventSource('/api/sse');eventSource.onmessage = function(event) { console.log('收到消息:', event.data); // 更新页面内容 document.getElementById('output').innerText += event.data + 'n';};eventSource.onerror = function(event) { console.error('SSE连接出错', event); // 浏览器会自动尝试重连};
后端如何实现SSE响应（以Node.js为例）
SSE要求服务器返回特定格式的内容类型，并保持连接长期打开。以下是使用Express的简单实现。
立即学习“Java免费学习笔记（深入）”；
关键点：
设置响应头 Content-Type 为 text/event-stream 禁用缓存（Cache-Control: no-cache） 保持连接不关闭，可定时或按需发送数据 消息格式遵循SSE规范（如 data: xxxnn）
Node.js + Express 示例：
kimi.ai
Kimi.ai 是月之暗面(Moonshot AI)公司推出的AI智能聊天机器人，能进行智能闲聊、解答问题，提供生活AI助手服务等。
3008 查看详情
app.get('/api/sse', (req, res) => { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); // 每隔3秒推送一条消息 const interval = setInterval(() => { const data = { time: new Date().toISOString() }; res.write(`data: ${JSON.stringify(data)}nn`); }, 3000); // 客户端断开时清理资源 req.on('close', () => { clearInterval(interval); res.end(); });});
SSE消息格式和自定义事件
SSE支持发送标准消息和自定义事件，服务器可以通过不同的字段控制消息行为。
常见字段：
data: 消息正文，可多行（以 n 分隔） event: 自定义事件名，前端用 addEventListener 监听 id: 消息ID，用于断线重连时定位位置 retry: 重连时间（毫秒）
服务器发送自定义事件：
res.write('event: notificationndata: {"msg": "新消息提醒"}nid: 101nn');
前端监听：
eventSource.addEventListener('notification', function(event) { console.log('收到通知:', event.data);});
基本上就这些。SSE使用简单，兼容性好，适合不需要双向通信的推送场景。只要注意保持连接稳定、合理处理错误和重连，就能实现实时更新功能。不复杂但容易忽略细节，比如头部设置和换行格式。
以上就是JavaScript SSE服务器推送的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/725072.html
微信扫一扫 
支付宝扫一扫 
