html Server-Sent Events

2026-04-24 09:00:12 454阅读 0评论

用 HTML Server-Sent Events 实现实时更新：思路、步骤与落地

在网页需要从后端持续推送信息的场景里，比如实时股票行情、聊天消息、天气变化或任务进度，传统的轮询会带来不必要的流量和延迟。用 HTML Server-Sent Events（SSE）来实现后端到浏览器的单向、有序、低延迟推送，是一种更轻量、更可控的选择。

从“被动等待”到“主动推送”的转变

想象你在等公交，不断刷新页面去查是否到站，不仅费时还容易错过信息；用 SSE 就像在公交站开启了一条“到站提醒”的单向通道，后端一到站就立刻把信息发过去，你只需保持连接打开即可。

核心概念与兼容性

SSE 是 HTML5 的一部分，要求服务器支持相应的响应头与协议。建立连接的关键在于：

响应头：服务器需返回 Content-Type: text/event-stream，并以 \r\n\r\n 结尾，确保浏览器识别为 SSE 流。
事件格式：使用 event:、data:、id:、retry: 等字段来构造消息体，字段值以 \r\n 分隔。
连接保持：SSE 建立的是长连接，只要客户端未主动关闭，服务器可以持续发送更新。

实战：从搭建连接到发送与处理

客端接入

在浏览器端，使用 EventSource 引入事件源：

<EventSource url="/sse-endpoint" onopen="onOpen" onmessage="onMessage" onerror="onError" />

<script>
function onOpen() {
  console.log('连接已建立，开始接收事件');
}

function onMessage(event) {
  console.log('收到消息:', event.data);
  // 这里可以进行数据解析与业务处理
}

function onError(error) {
  console.error('发生错误:', error);
  // 可以选择重新连接或进行容错处理
}
</script>

服务端实现（示例：Node.js）

const http = require('http');
const https = require('https');
const fs = require('fs');

const server = https.createServer({
  key: fs.readFileSync('path/to/your-key.pem'),
  cert: fs.readFileSync('path/to/your-cert.pem')
}, (req, res) => {
  if (req.url === '/sse-endpoint') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // 模拟推送间隔
    const interval = setInterval(() => {
      res.write(`event: update\ndata: ${Date.now()}\r\n`);
    }, 5000);

    // 关闭连接时清理
    req.on('close', () => {
      clearInterval(interval);
      res.destroy();
    });

    req.on('end', () => {
      clearInterval(interval);
      res.destroy();
    });

  }
});

server.listen(443, () => {
  console.log('SSE 服务已启动，监听 443 端口');
});