用SSE实现简易实时时钟需服务端每秒推送ISO时间字符串，前端通过EventSource接收并更新DOM；服务端用Node.js原生http模块设置text/event-stream响应头、禁用缓存、保持长连接并按data:...\n\n格式发送，监听客户端断开清理定时器；前端监听message事件解析数据并格式化显示。
用SSE实现一个简易实时时钟，核心是服务端每秒推送一次当前时间，前端通过 EventSource 接收并更新页面。关键点在于：服务端保持长连接、按 SSE 格式发送数据、前端正确监听和渲染。
服务端：Node.js 搭建 SSE 接口（原生 HTTP）
不需要额外框架，用 Node.js 原生 http 模块即可。注意设置响应头、禁用缓存、保持连接不关闭，并按 SSE 协议格式发送事件（data: ...\n\n）：
- 设置
Content-Type: text/event-stream和Cache-Control: no-cache - 响应对象需调用
res.flushHeaders()（Node.js ≥18.12+）或手动写入响应头 - 每次发送必须以
data:开头，结尾用双换行符\n\n - 用
setInterval每秒发送当前 ISO 时间字符串（如new Date().toISOString()） - 监听客户端断开（
req.on('close')），及时清理定时器防止内存泄漏
示例代码片段：
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url === '/clock') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
const timer = setInterval(() => {
const now = new Date().toISOString();
res.write(`data: ${now}\n\n`);
}, 1000);
req.on('close', () => {
clearInterval(timer);
res.end();
});
} else {
res.writeHead(404).end('Not found');
}
});
server.listen(3000, () => console.log('SSE clock server running on http://localhost:3000/clock'));
前端：用 EventSource 接收并更新 DOM
创建 EventSource 实例指向服务端接口，监听 message 事件（默认事件名），解析数据并写入页面元素：
立即学习“Java免费学习笔记（深入）”；
-
EventSource自动重连，无需手动处理断线重试 - 接收到的
event.data是字符串，需用JSON.parse()或直接显示（本例为 ISO 字符串，可直接用） - 推荐用
<time>标签或textContent更新，避免重复渲染开销 - 可监听
error事件做降级提示（如网络异常时显示“连接中…”）
示例 HTML + JS：
<div>当前时间：<span id="clock">--</span></div>
<script>
const es = new EventSource('/clock');
es.onmessage = (e) => {
document.getElementById('clock').textContent = new Date(e.data).toLocaleString();
};
es.onerror = () => {
console.warn('SSE connection failed');
};
</script>
注意事项与常见问题
SSE 看似简单，但几个细节容易出错：
- 确保服务端响应头中
Content-Type严格为text/event-stream，多一个空格或大小写错误都会导致浏览器拒绝解析 - Chrome/Firefox 支持良好，但 Safari 对
EventSource的 CORS 处理较严格——若前端域名与服务端不同，需在服务端加Access-Control-Allow-Origin - 不要用
res.end()主动结束连接；连接由客户端关闭或超时触发，服务端只需清理定时器 - 开发时可用 curl 测试接口是否输出符合 SSE 格式：
curl -N http://localhost:3000/clock，应看到持续滚动的data: ...\n\n
进阶小优化（可选）
让时钟更实用一点：
- 服务端添加
retry: 3000\n前缀，控制重连间隔（单位毫秒） - 前端用
Intl.DateTimeFormat格式化时间，适配本地时区和语言 - 增加加载状态：连接建立前显示“正在同步…”，
es.readyState === 0表示未连接 - 服务端可改用
express，逻辑更清晰，但底层仍是流式响应
不复杂但容易忽略细节。跑通的关键就是两端都严格遵循 SSE 文本流协议——服务端不断发 data:，前端只管收和更新。
