JavaScript 中 SSE 怎么实现页面无刷新实时更新-js教程-PHP中文网

sse是基于http的服务器单向推送技术，通过text/event-stream格式持续发送数据，客户端用eventsource自动重连接收；适用于通知、日志等实时更新场景，实现简单、资源消耗低。

javascript 中 sse 怎么实现页面无刷新实时更新

SSE（Server-Sent Events）是浏览器原生支持的单向实时通信机制，适合服务端主动向页面推送更新（如通知、日志、状态变化），无需轮询或建立 WebSocket 连接。实现页面无刷新实时更新，关键在于后端持续输出符合 SSE 格式的文本流，前端用 EventSource 接收并响应。

后端按 SSE 协议输出数据（以 Express 为例）

SSE 要求响应头必须包含 Content-Type: text/event-stream，且每次发送需以 data: 开头，每条消息以双换行符（\n\n）分隔。连接保持长开，不能自动结束。

设置响应头：禁用缓存、指定类型、保持连接
每次推送前调用 res.flush()（Express 中需启用 res.socket.setNoDelay(true) 并确保不压缩）
可选使用 id:、event:、retry: 字段增强控制（如重连间隔）

示例（Node.js + Express）：

app.get('/events', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });
<p>// 每 2 秒推送一条消息
const timer = setInterval(() => {
const data = JSON.stringify({ time: new Date().toISOString(), count: Math.floor(Math.random() * 100) });
res.write(<code>data: ${data}\n\n</code>);
res.flush(); // 确保立即发送（Express 4.19+ 可用 res.flush()）
}, 2000);</p><p>req.on('close', () => {
clearInterval(timer);
res.end();
});
});</p>

前端用 EventSource 监听并更新 DOM

EventSource 自动处理重连（默认 3 秒），支持 open、message、error 事件。收到消息后解析 event.data，直接操作 DOM 即可实现无刷新更新。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

创建实例时传入 SSE 接口地址；若需携带凭证（如 cookie），设 { withCredentials: true }
message 事件对应无 event: 字段的默认消息；也可监听自定义事件名（如 source.addEventListener('update', ...)）
手动关闭用 source.close()；异常时可通过 source.readyState 判断状态（0=connecting, 1=open, 0=closed）

示例（HTML + JS）：

<div id="log"></div>
<script>
const source = new EventSource('/events');
<p>source.onopen = () => console.log('SSE 连接已建立');
source.onmessage = (e) => {
const data = JSON.parse(e.data);
const item = document.createElement('div');
item.textContent = <code>更新于 ${data.time} — 计数 ${data.count};
document.getElementById('log').prepend(item);
};
source.onerror = (err) => console.error('SSE 错误:', err);
</script>