SSE（Server-Sent Events）是一种允许服务器主动向客户端发送数据的技术。与传统的 AJAX 请求或 WebSockets 相比，SSE 提供了一种单向通信机制，即数据只能从服务器流向客户端，而客户端不能通过 SSE 连接向服务器发送数据。
SSE 的主要特点：
单向通信：SSE 仅支持服务器到客户端的单向数据流。
基于 HTTP：SSE 使用标准的 HTTP 协议，通过一个持久的 HTTP 连接发送数据。
自动重连：如果连接断开，浏览器会自动尝试重新连接服务器。
简单实现：与 WebSockets 相比，SSE 的实现相对简单，因为它不需要特殊的协议支持。
如何使用 SSE：
服务器端：
服务器需要创建一个特殊的响应，其 Content-Type 为 text/event-stream，并且连接需要保持打开状态，以便服务器可以在任何时候发送消息。
// Node.js 示例
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url === '/events') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
const sendEvent = (data) => {
res.write(`data: ${JSON.stringify(data)}\n\n`);
};
// 假设有一个事件循环每秒发送数据
const intervalId = setInterval(() => {
sendEvent({ time: new Date().toTimeString() });
}, 1000);
req.on('close', () => {
clearInterval(intervalId);
});
} else {
res.writeHead(404);
res.end();
}
});
server.listen(3000);
客户端：
客户端使用 EventSource 接口连接到服务器，并监听 message 事件来接收服务器发送的消息。
// HTML 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Demo</title>
</head>
<body>
<h1>Server-Sent Events Demo</h1>
<div id="data"></div>
<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
document.getElementById('data').textContent = `Time: ${data.time}`;
};
eventSource.onerror = function(event) {
eventSource.close();
};
</script>
</body>
</html>
SSE 的应用场景：
- 实时更新：例如股票价格、新闻更新、体育赛事的实时比分等。
- 监控系统：实时显示系统状态或监控数据。
- 社交媒体：实时显示新消息、评论或点赞。
注意事项：
- SSE 连接不是全双工的，如果需要客户端与服务器之间的双向通信，可能需要使用 WebSockets。
- SSE 主要用于文本数据传输，对于二进制数据，WebSockets 可能是更好的选择。
- 自动重连机制虽然方便，但在某些情况下可能需要自定义重连策略或处理重连失败的情况。
SSE 是实现服务器推送技术的一种简单有效的方式，尤其适用于不需要客户端到服务器通信的场景。