前端如何接收SSE流式数据传输
在现代网页应用中，流式数据传输的需求日渐增加，尤其是在涉及到实时数据更新、消息推送以及大型模型（如 AI 模型）输出的场景中。服务器发送事件（Server-Sent Events，SSE）是一种适用于这种场景的技术，能够让服务器主动向客户端推送更新。而在前端，我们需要掌握如何接收这些 SSE 数据流。
什么是 SSE？
SSE 是一种通过 HTTP 协议，允许服务器向客户端推送消息的技术。与 WebSocket 不同，SSE 是单向的，数据从服务器传输到客户端，而不是双向通信。SSE 具有以下优点：
- 简单易用：相比 WebSocket，SSE 的实现更为简单。
- 自动重连：当连接中断时，浏览器会自动尝试重新建立连接。
- 支持文本/JSON 格式：SSE 可以推送文本数据和 JSON 数据，非常适合实时更新的需求。
如何在前端接收 SSE 数据？
以下是一个简单的示例，展示了如何在前端使用 JavaScript 接收来自服务器的 SSE 数据流。
1. 创建后端 SSE 服务
首先，我们需要一个后端服务来发送 SSE 消息。以下是一个用 Node.js 实现的简单 SSE 服务器：
// server.js
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/sse', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
setInterval(() => {
const data = new Date().toLocaleTimeString(); // 发送当前时间
res.write(`data: ${data}\n\n`); // 发送数据
}, 1000); // 每秒发送一次
req.on('close', () => {
console.log('Client disconnected');
});
});
app.listen(PORT, () => {
console.log(`SSE server is running on http://localhost:${PORT}/sse`);
});
2. 前端接收 SSE 数据
在前端页面中，我们可以使用 EventSource 对象来接收 SSE 数据。下面是一个简单的HTML页面及对应的JavaScript代码。
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE 测试</title>
</head>
<body>
<h1>SSE 测试</h1>
<div id="output"></div>
<script>
// 创建一个EventSource对象来连接服务器
const eventSource = new EventSource('http://localhost:3000/sse');
eventSource.onmessage = function(event) {
// 当接收到消息时将其添加到页面
const output = document.getElementById('output');
output.innerHTML += `<p>当前时间: ${event.data}</p>`;
};
eventSource.onerror = function(event) {
console.error("发生错误", event);
eventSource.close(); // 关闭连接
};
</script>
</body>
</html>
3. 启动服务
在终端中，运行以下命令启动 Node.js 服务器：
node server.js
然后，打开 index.html 文件，您将能够看到当前时间每秒更新一次，表明我们成功通过 SSE 接收了流式数据。
总结
SSE 是一种非常有效的单向数据传输方式，适合用于实时数据更新的场景。通过简单的 EventSource API，我们能够方便地在前端接收和展示来自服务器的实时数据。希望这个示例能帮助你更好地理解和实现 SSE 数据传输的功能。
