SSE（Server-Sent Events）是一种允许服务器向客户端发送实时更新的技术。SSE 可以实现从服务器到客户端的单向数据流，非常适合用于实时数据推送，如股票行情、聊天应用、实时通知等场景。
SSE 的基本原理
SSE 使用HTTP协议，通过一个持续的HTTP连接来发送数据。服务器可以随时向客户端发送数据，而客户端只需监听这些数据即可。
SSE 的工作流程
- 建立连接：客户端通过HTTP请求连接到服务器。
- 发送数据：服务器通过HTTP响应体发送数据给客户端。
- 处理数据：客户端解析接收到的数据，并根据需要更新UI或其他逻辑。
SSE 的数据格式
SSE 数据格式遵循特定的规则：
data:：表示数据开始。event:：可选，表示事件类型。id:：可选，表示消息ID。retry:：可选，表示重试间隔时间（毫秒）。
每个字段必须以换行符（\n）结束，数据字段可以有多个。
示例代码
下面是一个简单的SSE客户端和服务器的示例。
客户端示例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Client</title>
</head>
<body>
<div id="messages"></div>
<script>
if (window.EventSource) {
const source = new EventSource('/sse');
source.onmessage = (event) => {
const messagesDiv = document.getElementById('messages');
const message = document.createElement('p');
message.textContent = event.data;
messagesDiv.appendChild(message);
};
source.onerror = (error) => {
console.error('EventSource error:', error);
};
} else {
console.error('Your browser does not support Server-Sent Events.');
}
</script>
</body>
</html>
服务器端示例（Node.js）
javascript
const http = require('http');
const url = require('url');
const server = http.createServer((req, res) => {
const { pathname } = url.parse(req.url);
if (pathname === '/sse') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
Connection: 'keep-alive'
});
setInterval(() => {
res.write('data: Hello, SSE!\n\n');
}, 1000);
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>Welcome to SSE Example</h1>');
}
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});
SSE 的主要特点
- 单向通信：SSE 仅支持从服务器到客户端的数据流。
- 低延迟：由于使用HTTP长连接，数据可以实时推送到客户端。
- 自动重连：如果连接断开，客户端会自动尝试重新连接。
- 简单易用：API简单，易于实现。
SSE 的应用场景
SSE 适用于以下场景：
- 实时数据更新：如股票行情、天气预报等。
- 实时通知：如邮件通知、消息提示等。
- 聊天应用：实时显示新消息。
SSE 的局限性
尽管SSE有很多优点，但也有一些局限性：
- 单向通信：只能从服务器到客户端发送数据。
- 浏览器支持：虽然现代浏览器普遍支持SSE，但在一些旧版浏览器中可能不支持。
- 连接管理：需要手动管理连接和重连逻辑。
总结
SSE（Server-Sent Events）是一种轻量级的实时数据推送技术，适用于从服务器向客户端发送实时更新。通过合理的使用SSE，可以实现高效、实时的数据推送，提升用户体验。
希望这些示例和说明对你有所帮助！如果有更多问题或需要进一步的帮助，请随时提问。
