本文旨在解决前端频繁轮询后端以获取实时状态更新的低效问题。我们将探讨两种高效的后端数据推送机制：server-sent events (sse) 和 websockets。重点介绍它们的工作原理、fastapi中的实现方式以及前端如何接收数据，并根据实际应用场景，提供选择这两种技术的指导，以实现从后端向前端的事件驱动型实时通信。
在现代Web应用中，实时数据更新是提升用户体验的关键。传统的做法是前端定时向后端发送请求（即轮询）以检查数据是否有更新。然而，当数据更新不频繁时，这种方式会造成大量的无效请求，浪费服务器资源和网络带宽，尤其是在硬件状态等可能长时间保持不变的场景下，其低效性尤为突出。为了解决这一问题，我们需要一种机制，让后端能够在数据发生变化时主动将信息推送给前端，而不是等待前端的请求。
实时数据推送机制概述
实现后端向前端实时推送数据主要有两种主流技术：Server-Sent Events (SSE) 和 WebSockets。它们都允许服务器在数据可用时立即发送给客户端，从而避免了低效的轮询。
1. Server-Sent Events (SSE)
Server-Sent Events 是一种基于HTTP的单向通信技术，允许服务器向客户端推送事件流。它通过一个持久的HTTP连接工作，服务器可以随时向客户端发送文本事件。
工作原理： 当客户端发起一个SSE连接时，服务器会保持这个连接打开，并以 text/event-stream 的MIME类型发送数据。数据以特定格式（data: your_message\n\n）发送，客户端的浏览器会自动解析这些事件。
优点：
- 简单易用： 基于HTTP，无需特殊协议或复杂库，浏览器原生支持 EventSource API。
- 自动重连： 客户端的 EventSource 会在连接断开时自动尝试重新连接。
- 单向通信： 适用于服务器只向客户端推送数据的场景，如实时通知、股票行情、硬件状态更新等。
- 防火墙友好： 使用标准HTTP协议，通常不会被防火墙阻拦。
FastAPI 实现 SSE： 在FastAPI中，可以使用 StreamingResponse 结合一个异步生成器来创建SSE端点。当硬件状态发生变化时，后端可以将最新的状态作为事件发送给所有订阅的客户端。
from fastapi import FastAPI, Request
from fastapi.responses import StreamingResponse
import asyncio
import json
app = FastAPI()
# 模拟硬件状态
hardware_status = {"temperature": 25.0, "humidity": 60, "power_on": True}
# 存储待发送的事件
event_queue = asyncio.Queue()
# 模拟硬件状态更新（在实际应用中，这会由硬件监控脚本触发）
async def simulate_hardware_updates():
while True:
await asyncio.sleep(5) # 每5秒模拟一次状态更新
new_temperature = hardware_status["temperature"] + 0.5
new_humidity = hardware_status["humidity"] + (1 if new_temperature > 27 else -1)
# 假设只有温度或湿度变化才推送
if new_temperature != hardware_status["temperature"] or new_humidity != hardware_status["humidity"]:
hardware_status["temperature"] = round(new_temperature, 2)
hardware_status["humidity"] = round(new_humidity, 2)
print(f"Hardware status updated: {hardware_status}")
# 将更新后的状态放入事件队列
event_data = {"status": hardware_status, "timestamp": asyncio.time()}
await event_queue.put(json.dumps(event_data))
@app.on_event("startup")
async def startup_event():
asyncio.create_task(simulate_hardware_updates())
@app.get("/events")
async def sse_endpoint(request: Request):
async def event_generator():
while True:
# 检查客户端是否断开连接
if await request.is_disconnected():
print("Client disconnected from SSE.")
break
# 从队列获取事件
event_data = await event_queue.get()
yield f"data: {event_data}\n\n"
# 确保在没有事件时不会阻塞太久，可以加入一个短时间的延迟
await asyncio.sleep(0.1)
return StreamingResponse(event_generator(), media_type="text/event-stream")
# 额外的端点，用于手动触发状态更新（可选，用于测试）
@app.post("/update_status")
async def update_status(new_temp: float = 26.0, new_hum: int = 65):
hardware_status["temperature"] = new_temp
hardware_status["humidity"] = new_hum
event_data = {"status": hardware_status, "timestamp": asyncio.time()}
await event_queue.put(json.dumps(event_data))
return {"message": "Status updated and event queued."}
前端 (React) 接收 SSE： 前端使用 EventSource API来监听来自 /events 端点的事件。
import React, { useEffect, useState } from 'react';
function HardwareStatus() {
const [status, setStatus] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
// 创建 EventSource 实例
const eventSource = new EventSource('http://localhost:8000/events'); // 替换为你的FastAPI地址
// 监听 'message' 事件，这是默认的事件类型
eventSource.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
setStatus(data.status);
setError(null); // 清除之前的错误
console.log("Received SSE event:", data);
} catch (e) {
console.error("Failed to parse SSE data:", e);
setError("Failed to parse data.");
}
};
// 监听 'open' 事件，表示连接已建立
eventSource.onopen = () => {
console.log('SSE connection opened.');
};
// 监听 'error' 事件
eventSource.onerror = (error) => {
console.error('SSE error:', error);
eventSource.close(); // 发生错误时关闭连接
setError("SSE connection error. Retrying...");
// EventSource 会自动尝试重连，但你也可以在这里自定义重连逻辑
};
// 组件卸载时关闭连接
return () => {
eventSource.close();
console.log('SSE connection closed.');
};
}, []); // 仅在组件挂载时运行一次
if (error) {
return <div>Error: {error}</div>;
}
if (!status) {
return <div>Connecting to hardware status updates...</div>;
}
return (
<div>
<h1>Hardware Status</h1>
<p>Temperature: {status.temperature}°C</p>
<p>Humidity: {status.humidity}%</p>
<p>Power On: {status.power_on ? 'Yes' : 'No'}</p>
</div>
);
}
export default HardwareStatus;2. WebSockets
WebSockets 提供了一个全双工的通信通道，允许客户端和服务器之间进行双向、低延迟的实时数据交换。与SSE不同，WebSockets在握手后建立一个持久的TCP连接，而不是基于HTTP请求-响应模型。
工作原理： 客户端通过一个特殊的HTTP握手请求升级到WebSocket协议。一旦握手成功，连接就升级为WebSocket，客户端和服务器可以独立地发送和接收数据帧。
优点：
- 双向通信： 客户端和服务器可以同时发送和接收消息，适用于聊天应用、多人协作等场景。
- 低延迟： 建立连接后，数据传输开销小，延迟低。
- 更灵活： 可以传输二进制数据，支持更复杂的消息格式。
FastAPI 实现 WebSockets： FastAPI通过 websocket 依赖提供了对WebSockets的良好支持。
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
import asyncio
import json
app = FastAPI()
# 模拟硬件状态
hardware_status_ws = {"temperature": 25.0, "humidity": 60, "power_on": True}
# 存储所有活跃的WebSocket连接
active_connections: list[WebSocket] = []
# 模拟硬件状态更新（在实际应用中，这会由硬件监控脚本触发）
async def simulate_hardware_updates_ws():
while True:
await asyncio.sleep(5) # 每5秒模拟一次状态更新
new_temperature = hardware_status_ws["temperature"] + 0.5
new_humidity = hardware_status_ws["humidity"] + (1 if new_temperature > 27 else -1)
if new_temperature != hardware_status_ws["temperature"] or new_humidity != hardware_status_ws["humidity"]:
hardware_status_ws["temperature"] = round(new_temperature, 2)
hardware_status_ws["humidity"] = round(new_humidity, 2)
print(f"Hardware status updated (WS): {hardware_status_ws}")
# 向所有连接的客户端广播更新
message = json.dumps({"status": hardware_status_ws, "timestamp": asyncio.time()})
for connection in active_connections:
try:
await connection.send_text(message)
except RuntimeError as e:
print(f"Error sending to WebSocket client: {e}")
# 可以在这里处理断开的连接，例如从 active_connections 中移除
@app.on_event("startup")
async def startup_event_ws():
asyncio.create_task(simulate_hardware_updates_ws())
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept()
active_connections.append(websocket)
print(f"New WebSocket connection: {websocket.client}")
# 首次连接时发送当前状态
initial_status = json.dumps({"status": hardware_status_ws, "timestamp": asyncio.time()})
await websocket.send_text(initial_status)
try:
while True:
# 可以在这里接收客户端发送的消息（如果需要双向通信）
# data = await websocket.receive_text()
# print(f"Received from client: {data}")
# await websocket.send_text(f"Message text was: {data}")
await asyncio.sleep(0.1) # 保持连接活跃，避免CPU空转
except WebSocketDisconnect:
active_connections.remove(websocket)
print(f"WebSocket client disconnected: {websocket.client}")
except Exception as e:
print(f"WebSocket error: {e}")
active_connections.remove(websocket)
前端 (React) 接收 WebSockets： 前端使用 WebSocket API来建立和管理连接。
import React, { useEffect, useState, useRef } from 'react';
function HardwareStatusWS() {
const [status, setStatus] = useState(null);
const [error, setError] = useState(null);
const ws = useRef(null); // 使用ref来存储WebSocket实例
useEffect(() => {
// 建立 WebSocket 连接
ws.current = new WebSocket('ws://localhost:8000/ws'); // 替换为你的FastAPI地址
ws.current.onopen = () => {
console.log('WebSocket connection opened.');
setError(null); // 清除之前的错误
};
ws.current.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
setStatus(data.status);
console.log("Received WebSocket message:", data);
} catch (e) {
console.error("Failed to parse WebSocket data:", e);
setError("Failed to parse data.");
}
};
ws.current.onclose = (event) => {
console.log('WebSocket connection closed:', event.code, event.reason);
setError("WebSocket connection closed. Reconnecting...");
// 可以实现重连逻辑
setTimeout(() => {
// Simple reconnect logic, consider more robust solutions for production
if (ws.current && ws.current.readyState === WebSocket.CLOSED) {
console.log("Attempting to reconnect WebSocket...");
ws.current = null; // Clear old instance
// Trigger effect to re-establish connection
// This is a simple way, often a dedicated reconnect function is better
// For simplicity, we'll let the effect re-run if dependencies change, or manually call a reconnect function
// For now, simply setting ws.current to null and letting the next render potentially re-trigger setup is too indirect.
// A more direct approach:
// ws.current = new WebSocket('ws://localhost:8000/ws'); // Re-initiate connection
// And then re-attach handlers, or better, wrap this in a function.
}
}, 3000); // 3秒后尝试重连
};
ws.current.onerror = (error) => {
console.error('WebSocket error:', error);
setError("WebSocket connection error.");
};
// 组件卸载时关闭连接
return () => {
if (ws.current) {
ws.current.close();
console.log('WebSocket connection cleaned up.');
}
};
}, []); // 仅在组件挂载时运行一次
// 示例：向服务器发送消息（如果需要双向通信）
// const sendMessage = () => {
// if (ws.current && ws.current.readyState === WebSocket.OPEN) {
// ws.current.send(JSON.stringify({ message: "Hello from client!" }));
// }
// };
if (error) {
return <div>Error: {error}</div>;
}
if (!status) {
return <div>Connecting to hardware status updates via WebSocket...</div>;
}
return (
<div>
<h1>Hardware Status (WebSocket)</h1>
<p>Temperature: {status.temperature}°C</p>
<p>Humidity: {status.humidity}%</p>
<p>Power On: {status.power_on ? 'Yes' : 'No'}</p>
{/* <button onClick={sendMessage}>Send Message</button> */}
</div>
);
}
export default HardwareStatusWS;SSE 与 WebSockets 的选择
在实际应用中，选择SSE还是WebSockets取决于具体的业务需求：
-
SSE (Server-Sent Events)：
- 推荐场景： 当你只需要从服务器向客户端单向推送数据时，例如实时通知、股票报价、新闻推送、日志流、以及本例中硬件状态更新（客户端不需要频繁发送消息给服务器）。
- 优势： 实现简单，浏览器原生支持自动重连，基于HTTP协议，防火墙友好。
- 劣势： 只能单向通信，每次事件传输的数据量相对较小。
-
WebSockets：
- 推荐场景： 当你需要客户端和服务器之间进行双向、低延迟的实时通信时，例如聊天应用、在线游戏、实时协作文档、需要客户端频繁发送控制指令的物联网应用。
- 优势： 全双工通信，协议开销小，延迟低，可以传输二进制数据。
- 劣势： 相较于SSE，实现略复杂，需要处理连接管理、心跳、重连逻辑等，可能需要额外的库。
针对本案例（硬件状态更新，可能长时间无变化）： 由于硬件状态更新属于服务器向客户端的单向推送，且可能长时间处于空闲状态，SSE是更推荐的选择。它的实现更简单，并且内置的自动重连机制能够很好地处理连接中断的情况，而无需客户端进行复杂的重连逻辑。WebSockets虽然也能实现，但对于这种单向推送的场景，其双向通信的能力并没有被充分利用，反而增加了实现的复杂性。
注意事项与最佳实践
- 连接管理： 对于WebSockets，需要妥善管理 active_connections 列表，确保在客户端断开连接时及时移除，避免向已断开的连接发送数据导致错误。SSE的 StreamingResponse 也会在客户端断开时抛出 RequestDisconnected 异常，需要捕获并处理。
- 消息队列： 在高并发场景下，直接在FastAPI应用中维护 event_queue 或广播到 active_connections 可能不够高效。可以考虑引入外部消息队列（如Redis Pub/Sub、Kafka、RabbitMQ）来解耦事件生产者和消费者，实现更强大的广播和扩展能力。
- 心跳机制： 对于长时间不发送数据的SSE或WebSocket连接，某些代理或负载均衡器可能会因为不活跃而断开连接。可以定期发送一个空事件（SSE）或心跳消息（WebSocket）来保持连接活跃。
- 错误处理与重连： 客户端应始终包含健壮的错误处理和重连逻辑。SSE内置了自动重连，但WebSocket需要手动实现。
- 安全性： 实时通信端点也应进行认证和授权，确保只有合法的客户端才能接收或发送数据。可以结合FastAPI的依赖注入系统实现。
- 可伸缩性： 当客户端数量增加时，单个FastAPI实例可能无法处理所有实时连接。可以考虑使用负载均衡器将连接分发到多个FastAPI实例，并结合消息队列实现跨实例的事件广播。
总结
通过采用SSE或WebSockets，我们可以彻底告别低效的轮询机制，实现后端数据向前端的实时、事件驱动型推送。对于本例中硬件状态更新这种以服务器向客户端单向推送为主，且可能长时间空闲的场景，SSE因其简洁性和内置的自动重连特性而成为更优的选择。而当需要客户端与服务器进行频繁双向通信时，WebSockets则能提供更强大的支持。理解这两种技术的特点并根据实际需求做出明智的选择，是构建高效实时Web应用的关键。
