使用 SSE 的基本步骤如下：
1. 建立连接：
- 客户端通过创建一个 EventSource 对象来与服务器建立 SSE 连接。
const eventSource = new EventSource('/sse-endpoint');
2. 服务器推送事件：
- 服务器通过发送带有 data 字段的消息来推送事件。
// 服务器端示例（Node.js）
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
}, 1000);
});
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
3. 客户端监听事件：
- 客户端通过监听 message 事件来处理从服务器端推送的消息。
eventSource.addEventListener('message', (event) => {
console.log('Received message:', event.data);
// 处理服务器推送的消息
});
SSE 的优势在于它的简单性和与服务器的实时通信能力。然而，需要注意 SSE 是单向通信，只能从服务器到客户端推送信息，而客户端不能向服务器发送数据。此外，SSE 并不适用于所有场景，例如需要双向通信的应用可能需要考虑其他技术，如 WebSocket。
在使用 SSE 时，也需要考虑浏览器的兼容性，虽然大多数现代浏览器都支持 SSE，但一些旧版本浏览器可能不支持。
转载请注明出处：http://www.zyzy.cn/article/detail/3683/HTML5