JavaScript中SSE怎么在Node.js服务端配合前端EventSource实现一个简易的实时时钟-js教程-PHP中文网

用sse实现简易实时时钟需服务端每秒推送iso时间字符串，前端通过eventsource接收并更新dom；服务端用node.js原生http模块设置text/event-stream响应头、禁用缓存、保持长连接并按data:...\n\n格式发送，监听客户端断开清理定时器；前端监听message事件解析数据并格式化显示。

javascript中sse怎么在node.js服务端配合前端eventsource实现一个简易的实时时钟

用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 事件（默认事件名），解析数据并写入页面元素：

Wjs Syncing Multicam

当用户拥有两个或以上不同设备录制的同一事件视频/音频，并希望将它们同步或合并时使用。

下载

EventSource 自动重连，无需手动处理断线重试
接收到的 event.data 是字符串，需用 JSON.parse() 或直接显示（本例为 ISO 字符串，可直接用）
推荐用 <time></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