在前端中
调用 SSE（Server-Sent Events）
接口，可以使用
浏览器提供的 `EventSource` API。
SSE 是一种服务器向客户端推送事件的技术，适用于实时更新数据的场景，比如股票价格、聊天消息等。
下面是一个完整的示例，展示如何在前端
调用一个
SSE 接口并处理接收到的数据：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
SSE Example</title>
</head>
<body>
<h1>Messages from Server:</h1>
<div id="messages"></div>
<script>
// 创建 EventSource 实例，连接到服务器端的
SSE 接口
const eventSource = new EventSource("https://example.com/
sse");
// 监听服务器发送的消息
eventSource.addEventListener("message", function(event) {
const newElement = document.createElement("div");
newElement.textContent = "Message: " + event.data;
document.getElementById("messages").appendChild(newElement);
});
// 可以监听其他自定义事件，例如 'update'
eventSource.addEventListener("update", function(event) {
const newElement = document.createElement("div");
newElement.textContent = "Update: " + event.data;
document.getElementById("messages").appendChild(newElement);
});
// 错误处理
eventSource.addEventListener("error", function(event) {
console.error("EventSource f
ailed:", event);
});
// 关闭连接（可选）
// eventSource.close();
</script>
</body>
</html>
```
### 代码解释：
1. **创建 `EventSource` 实例**：
- `new EventSource("https://example.com/
sse")`：连接到指定的
SSE 接口。
- 这个
接口必须返回 `text/event-stream` 类型的内容。
2. **监听事件**：
- `eventSource.addEventListener("message", ...)`：监听默认的 `message` 事件，接收服务器推送的数据。
- `event.data`：包含从服务器接收到的数据。
3. **自定义事件**：
- 除了默认的 `message` 事件，你还可以监听服务器发送的自定义事件，比如 `update`。
4. **错误处理**：
- `error` 事件会在连接失败或发生错误时触发。
5. **关闭连接**：
- 如果需要停止接收事件，可以
调用 `eventSource.close()`。
### 后端支持（Node.js 示例）：
以下是一个简单的 Node.js 后端实现，用于提供
SSE 接口：
```javascript
const express = require('express');
const app = express();
app.get('/
sse', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 模拟每隔 5 秒发送一条消息
let count = 0;
const interval = setInterval(() => {
res.write(`data: ${JSON.stringify({ message: `Hello from server! ${count}` })}\n\n`);
count++;
}, 5000);
// 当客户端断开连接时清除定时器
req.on('close', () => {
clearInterval(interval);
res.end();
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
### 后端代码解释：
1. **设置响应头**：
- `Content-Type: text/event-stream`：告诉
浏览器这是一个
SSE 流。
- `Cache-Control: no-cache` 和 `Connection: keep-alive`：确保连接不会被缓存或中断。
2. **发送消息**：
- 使用 `res.write()` 发送消息，格式为 `data: <message>\n\n`。
- 这里每 5 秒发送一次消息。
3. **清理资源**：
- 当客户端断开连接时，通过 `req.on('close', ...)` 清除定时器并结束响应。
---
### 相关
问题：
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
