服务器发送事件（Server-Sent Events, SSE） 是一种用于构建单向实时通信的技术，允许服务器主动向客户端（通常是浏览器）推送更新。SSE 提供了一个简单的 API，使得处理实时数据变得更直观，非常适合实时应用，如新闻更新、天气变化、社交媒体通知等。
1. SSE 的工作原理
SSE 基于 HTTP 协议，客户端通过一个长连接与服务器建立通信。当服务器有数据更新时，它会将消息发送到客户端。这种推送技术与 WebSocket 相似，但 SSE 是单向的——即数据仅从服务器到客户端。
2. SSE 的优点
- 简洁的 API：使用简单的 JavaScript API，无需引入其他库。
- 持久连接：一旦连接建立，客户端和服务器之间的连接将保持打开状态，可以随时接收消息。
- 自动重连：如果连接中断，浏览器会自动尝试重连。
- 原生支持：大多数现代浏览器都内置支持 SSE。
3. 创建和使用 SSE
3.1. 服务器端代码示例
首先，需要设置一个服务器端接口来发送 SSE。以下是一个使用 Node.js 的示例：
const http = require('http');
http.createServer((req, res) => {
// 设置响应头
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 设定内容类型
'Cache-Control': 'no-cache', // 禁止缓存
'Connection': 'keep-alive' // 保持连接
});
// 发送事件
setInterval(() => {
const currentTime = new Date().toLocaleTimeString();
res.write(`data: The current time is: ${
currentTime}\n\n`);
}, 1000); // 每秒更新一次
}).listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
3.2. 客户端代码示例
在客户端，使用 EventSource 接口来接收来自服务器的事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Example</title>
</head>
<body>
<h1>SSE Demo</h1>
<div id="time"></div>
<script>
const eventSource = new EventSource('http://localhost:3000');
eventSource.onmessage = function(event) {
document.getElementById('time').innerText = event.data; // 更新界面
};
eventSource.onerror = function(err) {
console.error("EventSource failed: ", err);
};
</script>
</body>
</html>
4. 事件格式
SSE 消息格式如下：
data: 你的消息内容
data: 更多消息内容
event: 事件类型
id: 事件 ID
retry: 重新连接时间
- data：要发送的消息，可能有多行，每行以换行符开头。
- event：自定义事件类型（可选）。
- id：用于跟踪事件的 ID（可选）。
- retry：客户端在连接断开后尝试重连的时间（以毫秒为单位）。
5. 注意事项
- 兼容性：大多数现代浏览器支持 SSE，但 Internet Explorer 不支持。可以通过
navigator对象检查浏览器支持情况。 - 限制：SSE 是单向的，只能从服务器到客户端。若需要双向通信，可以考虑 WebSocket。
- 跨域请求：对于跨域请求，需要正确配置 CORS 头。
- 性能考虑：长连接和频繁的数据推送可能会对服务器性能产生影响，需要合理管理。
总结
服务器发送事件（SSE）是一种轻量级、简洁的实时通信解决方案，使得 web 应用程序能够轻松接收来自服务器的实时更新。通过简单的实现，开发人员可以为用户提供更加互动和动态的体验。
