使用HTML5服务器量事件（SSE）接收实时数据。

Server-Sent Events（SSE）是HTML5提供的服务器向浏览器推送实时更新的轻量级方案。它通过HTTP长连接实现单向通信，适合股票行情、通知等场景。使用时创建EventSource实例并监听消息：const eventSource = new EventSource('/stream'); eventSource.onmessage = function(event) { console.log('收到消息:', event.data); }; 服务器端需设置Content-Type为text/event-stream，保持连接打开，并按格式输出data: 内容\n\n。常见注意事项包括：1. 配置CORS解决跨域问题；2. 控制retry时间实现自动重连；3. 使用event: 定义自定义事件类型；4. 管理连接超时防止资源泄漏。相比WebSocket，SSE更简单易用，支持HTTP协议穿透防火墙，但仅限单向通信且兼容性略差，适用于无需频繁交互的实时推送场景。

在 web 开发中，如果你需要从服务器向浏览器推送实时更新，HTML5 提供了一个轻量级的解决方案：Server-Sent Events（SSE）。相比 WebSocket，它更简单、更容易实现，尤其适合只需要服务器向客户端单向通信的场景。

什么是 Server-Sent Events？

Server-Sent Events 是 HTML5 的一部分，允许服务器通过 HTTP 长连接将数据推送到浏览器。与传统的轮询方式不同，SSE 在建立连接后会保持打开状态，服务器可以随时发送新数据，比如股票行情、实时通知或聊天消息。

它的基本使用方式是创建一个 EventSource 实例，并指向服务器端的一个 URL：

const eventSource = new EventSource('/stream');
eventSource.onmessage = function(event) {
    console.log('收到消息:', event.data);
};

只要服务器持续发送数据，客户端就能不断接收。

如何设置服务器端支持 SSE？

不同的后端语言有不同的实现方式，但核心要点是一样的：保持连接打开，并按照 SSE 的格式输出内容。

以 Node.js Express 为例：

app.get('/stream', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');

    // 模拟发送数据
    setInterval(() => {
        res.write(`data: ${new Date()}\n\n`);
    }, 1000);
});

关键点：

• 设置正确的响应头，特别是 text/event-stream
• 不要过早结束响应，保持连接打开
• 数据格式必须是 data: 内容\n\n，两个换行符表示一条消息结束

其他语言如 Python（Flask）、PHP 或 Java Spring Boot 也可以类似地实现。

常见问题和注意事项

1. 跨域问题 如果前端和后端不在同一个域名下，需要配置 CORS，确保允许 EventSource 发起的请求：

Access-Control-Allow-Origin: *

或者指定具体域名。

2. 自动重连机制 当连接中断时，浏览器会自动尝试重新连接，默认等待时间是 3 秒。你可以在服务器端控制这个间隔：

retry: 5000

3. 自定义事件类型 除了默认的 onmessage，你还可以定义其他事件名：

event: update
data: {"type": "news", "content": "新消息来了"}

前端监听：

eventSource.addEventListener('update', function(event) {
    console.log('收到更新:', event.data);
});

4. 连接超时与资源释放 注意不要让连接无限期挂起。服务器应有机制检测客户端是否断开，并及时释放资源，避免内存泄漏。

什么时候该用 SSE 而不是 WebSocket？

WebSocket 更强大，支持双向通信，但复杂度也更高。如果你只需要服务器往客户端推送信息，而且不需要频繁交互，SSE 是更好的选择。

优势包括：

• 简化开发流程，前后端都容易实现
• 支持自动重连
• 可以使用标准 HTTP 协议，更容易穿透防火墙

缺点也很明显：

• 仅支持服务器到客户端的单向通信
• 浏览器兼容性略差（IE 和旧版 Edge 不支持）

基本上就这些。SSE 并不复杂，但在实际部署中要注意连接管理、错误处理和性能优化。如果你只是想做个简单的实时通知系统，SSE 是个轻量又实用的选择。

以上是使用HTML5服务器量事件（SSE）接收实时数据。的详细内容。更多信息请关注PHP中文网其他相关文章！