Server-Sent Events (SSE) 是一种允许服务器向客户端推送更新的技术。它使用 HTTP 协议，通过一个持久的 HTTP 连接，服务器可以在任何时间发送新的事件到客户端。SSE 通常用于实时更新，如股票价格、新闻更新等。
以下是一个简单的 SSE 使用示例：
服务器端 (Node.js + Express)
const express = require('express');
const app = express();
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 模拟实时数据更新
setInterval(() => {
res.write(`data: ${new Date().toISOString()}\n\n`);
}, 1000);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
客户端 (HTML + JavaScript)
<!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>Server-Sent Events Example</h1>
<div id="messages"></div>
<script>
// 创建一个新的 EventSource 实例
const eventSource = new EventSource('/events');
// 监听 message 事件
eventSource.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = `Message from server: ${event.data}`;
document.getElementById('messages').appendChild(message);
};
// 监听 open 事件
eventSource.onopen = function() {
console.log('Connection to server opened.');
};
// 监听 error 事件
eventSource.onerror = function(error) {
console.error('Error:', error);
};
</script>
</body>
</html>
解释
- 服务器端：创建一个 Express 服务器，监听
/events路由。当客户端连接到这个路由时，服务器会设置响应头以启用 SSE，并通过setInterval每秒发送一个新的事件（当前时间）。 - 客户端：创建一个
EventSource实例连接到服务器的/events路由。通过监听message事件，客户端可以接收到服务器发送的更新，并将这些更新显示在页面上。
注意事项
- SSE 使用 HTTP 协议，因此它不支持跨域请求，除非服务器配置了 CORS。
- SSE 连接是持久的，直到客户端或服务器关闭连接。
- SSE 不支持双向通信，如果需要双向通信，可以考虑使用 WebSocket。
通过这些示例，你可以看到如何使用 SSE 在服务器和客户端之间建立持久连接，并实时推送数据。
标签：res,Server,EventSource,SSE,服务器,服务端,客户端 From： https://www.cnblogs.com/jocongmin/p/18617930