运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

FastAPI与React实时通信：实现后端主动推送硬件状态更新

FastAPI与React实时通信：实现后端主动推送硬件状态更新

本文探讨了在fastapi后端向react前端推送实时硬件状态更新的有效方法，旨在解决传统轮询机制在状态不常变化时效率低下的问题。我们将重点介绍两种事件驱动的通信模式：server-sent events (sse) 和 websocket，并分析其适用场景，提供实现示例，帮助开发者构建响应更及时、资源消耗更低的实时应用。

在现代Web应用开发中，实时数据更新是提升用户体验的关键。尤其当涉及到硬件状态监控这类场景时，前端需要及时反映后端的变化。然而，传统的客户端轮询（即前端定时向后端发送请求查询数据）机制在数据不常变化时效率低下，会造成不必要的网络流量和服务器资源消耗。为了解决这一问题，事件驱动的通信模式应运而生，其中Server-Sent Events (SSE) 和 WebSocket 是两种主流且高效的解决方案。

告别轮询：事件驱动通信模式

当后端需要主动向前端推送数据，而非等待前端请求时，我们需要建立一种持久的连接或订阅机制。这正是SSE和WebSocket所擅长的领域。

1. Server-Sent Events (SSE)

Server-Sent Events 是一种基于HTTP协议的单向通信技术，允许服务器持续地向客户端推送数据。它利用了HTTP长连接，服务器可以在连接打开的情况下，通过特定的MIME类型（text/event-stream）发送一系列事件。

适用场景： SSE特别适合于那些数据流向主要是从服务器到客户端的场景，例如实时股价更新、新闻推送、日志监控或本文所讨论的硬件状态更新（当状态变化不频繁，且主要由服务器发起时）。它的优势在于实现相对简单，并且能够利用HTTP/2的多路复用特性。

FastAPI后端实现示例：

在FastAPI中，我们可以使用 StreamingResponse 结合异步生成器来实现SSE。

# main.py (FastAPI application)
from fastapi import FastAPI, Response
from fastapi.responses import StreamingResponse
import asyncio
import json
import time

app = FastAPI()

# 模拟硬件状态
hardware_status = {"temperature": 25, "pressure": 1000, "online": True}

# 模拟硬件状态变化的函数
async def simulate_hardware_updates():
    while True:
        # 假设硬件状态每隔一段时间可能变化
        await asyncio.sleep(5) # 每5秒检查一次
        new_temperature = hardware_status["temperature"] + (1 if time.time() % 2 == 0 else -1)
        if new_temperature < 20: new_temperature = 20
        if new_temperature > 30: new_temperature = 30

        if new_temperature != hardware_status["temperature"]:
            hardware_status["temperature"] = new_temperature
            print(f"Hardware status changed: {hardware_status}")
            yield f"data: {json.dumps(hardware_status)}\n\n"
        else:
            # 如果状态没变，可以不发送数据，或者发送一个心跳包
            yield "event: heartbeat\ndata: {}\n\n"

@app.get("/hardware-status-sse")
async def sse_hardware_status():
    """
    通过SSE推送硬件状态更新。
    """
    return StreamingResponse(
        simulate_hardware_updates(),
        media_type="text/event-stream"
    )

# 可以在后台运行一个任务来真正更新 hardware_status
# 例如，通过一个全局变量或消息队列

React前端实现示例：

前端通过 EventSource API 订阅SSE流。

// HardwareStatusDisplay.jsx (React Component)
import React, { useState, useEffect } from 'react';

function HardwareStatusDisplay() {
  const [status, setStatus] = useState({});
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    // 创建EventSource实例，连接到FastAPI的SSE端点
    const eventSource = new EventSource('http://localhost:8000/hardware-status-sse');

    eventSource.onopen = () => {
      console.log('SSE connection opened.');
      setIsConnected(true);
    };

    // 监听 'message' 事件，这是默认的事件类型
    eventSource.onmessage = (event) => {
      console.log('Received SSE message:', event.data);
      try {
        const newStatus = JSON.parse(event.data);
        setStatus(newStatus);
      } catch (error) {
        console.error('Failed to parse SSE data:', error);
      }
    };

    // 监听自定义事件，例如 'heartbeat'
    eventSource.addEventListener('heartbeat', (event) => {
        console.log('Received heartbeat:', event.data);
    });

    eventSource.onerror = (error) => {
      console.error('SSE Error:', error);
      setIsConnected(false);
      eventSource.close(); // 发生错误时关闭连接
    };

    // 组件卸载时关闭EventSource连接
    return () => {
      eventSource.close();
      console.log('SSE connection closed.');
    };
  }, []); // 空数组表示只在组件挂载和卸载时运行

  return (
    <div>
      <h2>硬件状态实时监控 (SSE)</h2>
      <p>连接状态: {isConnected ? '已连接' : '已断开'}</p>
      {Object.keys(status).length > 0 ? (
        <ul>
          {Object.entries(status).map(([key, value]) => (
            <li key={key}>
              <strong>{key}:</strong> {String(value)}
            </li>
          ))}
        </ul>
      ) : (
        <p>等待硬件状态数据...</p>
      )}
    </div>
  );
}

export default HardwareStatusDisplay;

2. WebSockets

WebSocket 是一种在单个TCP连接上进行全双工通信的协议。与SSE的单向性不同，WebSocket允许客户端和服务器之间进行双向、实时的数据交换。

适用场景： WebSocket适用于需要客户端和服务器频繁双向通信的场景，如在线聊天、多人游戏、实时协作文档编辑等。它提供了更低的延迟和更高的效率，但相对于SSE来说，实现和管理也更为复杂。

FastAPI后端实现示例：

FastAPI内置了对WebSocket的良好支持。

AI建筑知识问答 AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

AI建筑知识问答 172 查看详情 AI建筑知识问答 
# main.py (FastAPI application - 添加 WebSocket 部分)
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
import asyncio
import json
import time

# ... (上面的 FastAPI app 和 hardware_status 定义不变) ...

# WebSocket连接管理器
class ConnectionManager:
    def __init__(self):
        self.active_connections: list[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

    async def send_personal_message(self, message: str, websocket: WebSocket):
        await websocket.send_text(message)

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.send_text(message)

manager = ConnectionManager()

# 模拟硬件状态变化的函数 (用于WebSocket)
async def hardware_status_broadcaster():
    while True:
        await asyncio.sleep(5) # 每5秒检查一次
        new_temperature = hardware_status["temperature"] + (1 if time.time() % 2 == 0 else -1)
        if new_temperature < 20: new_temperature = 20
        if new_temperature > 30: new_temperature = 30

        if new_temperature != hardware_status["temperature"]:
            hardware_status["temperature"] = new_temperature
            print(f"Hardware status changed (WS): {hardware_status}")
            await manager.broadcast(json.dumps(hardware_status))
        # WebSocket通常不需要心跳，因为连接本身是持久的

@app.websocket("/ws/hardware-status")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        # 第一次连接时发送当前状态
        await websocket.send_text(json.dumps(hardware_status))
        # 保持连接活跃，等待客户端消息（如果需要）
        while True:
            data = await websocket.receive_text()
            print(f"Received message from client: {data}")
            # 如果客户端发送消息，可以根据消息进行处理
    except WebSocketDisconnect:
        manager.disconnect(websocket)
        print("Client disconnected from WebSocket.")

# 启动一个后台任务来持续广播硬件状态
@app.on_event("startup")
async def startup_event():
    asyncio.create_task(hardware_status_broadcaster())

React前端实现示例：

前端使用浏览器原生的 WebSocket API。

// HardwareStatusWebSocketDisplay.jsx (React Component)
import React, { useState, useEffect, useRef } from 'react';

function HardwareStatusWebSocketDisplay() {
  const [status, setStatus] = useState({});
  const [isConnected, setIsConnected] = useState(false);
  const ws = useRef(null); // 使用ref来保存WebSocket实例

  useEffect(() => {
    // 创建WebSocket实例
    ws.current = new WebSocket('ws://localhost:8000/ws/hardware-status');

    ws.current.onopen = () => {
      console.log('WebSocket connection opened.');
      setIsConnected(true);
      // 连接成功后可以发送一些初始化消息给服务器
      // ws.current.send(JSON.stringify({ type: 'init', clientId: 'react-app' }));
    };

    ws.current.onmessage = (event) => {
      console.log('Received WebSocket message:', event.data);
      try {
        const newStatus = JSON.parse(event.data);
        setStatus(newStatus);
      } catch (error) {
        console.error('Failed to parse WebSocket data:', error);
      }
    };

    ws.current.onclose = () => {
      console.log('WebSocket connection closed.');
      setIsConnected(false);
      // 可以尝试重新连接
    };

    ws.current.onerror = (error) => {
      console.error('WebSocket Error:', error);
      setIsConnected(false);
      // ws.current.close(); // 发生错误时关闭连接
    };

    // 组件卸载时关闭WebSocket连接
    return () => {
      if (ws.current) {
        ws.current.close();
        console.log('WebSocket connection closed on unmount.');
      }
    };
  }, []);

  // 示例：如果需要从前端发送数据到后端
  const sendMessage = () => {
    if (ws.current && ws.current.readyState === WebSocket.OPEN) {
      ws.current.send(JSON.stringify({ action: 'request_full_status' }));
    } else {
      console.warn('WebSocket not connected.');
    }
  };

  return (
    <div>
      <h2>硬件状态实时监控 (WebSocket)</h2>
      <p>连接状态: {isConnected ? '已连接' : '已断开'}</p>
      {Object.keys(status).length > 0 ? (
        <ul>
          {Object.entries(status).map(([key, value]) => (
            <li key={key}>
              <strong>{key}:</strong> {String(value)}
            </li>
          ))}
        </ul>
      ) : (
        <p>等待硬件状态数据...</p>
      )}
      {/* <button onClick={sendMessage} disabled={!isConnected}>发送消息到后端</button> */}
    </div>
  );
}

export default HardwareStatusWebSocketDisplay;

SSE与WebSocket的选择

在决定使用SSE还是WebSocket时，需要考虑以下几点：

  1. 数据流向：

    • SSE： 适用于服务器单向推送数据到客户端的场景。
    • WebSocket： 适用于客户端和服务器之间需要双向、频繁通信的场景。

  2. 实现复杂度：

    • SSE： 基于HTTP，实现相对简单，浏览器原生支持 EventSource，且会自动处理重连。
    • WebSocket： 需要独立的协议升级，实现略复杂，但有成熟的库和框架支持。

  3. 连接开销：

    • SSE： 仍然是HTTP连接，但在HTTP/2下可以复用连接。
    • WebSocket： 建立后是持久的TCP连接，开销较低。

  4. 代理和防火墙：

    • SSE： 基于HTTP，通常能很好地穿透代理和防火墙。
    • WebSocket： 需要进行协议升级，在某些严格的网络环境中可能会遇到问题。

总结： 根据原始问题描述，硬件状态变化可能长时间不发生，且主要是后端向前端推送数据。在这种情况下，Server-Sent Events (SSE) 是一个非常合适的选择。它提供了轻量级的服务器到客户端推送机制，且具有自动重连的特性，非常适合处理不频繁但需要实时通知的事件。如果未来需求演变为前端也需要频繁地向后端发送指令或消息，那么再考虑升级到WebSocket会更合适。

注意事项与最佳实践

  • 错误处理与重连： SSE的 EventSource 会自动处理重连，但对于WebSocket，你需要自行实现重连逻辑。
  • 心跳机制： 对于SSE，当长时间没有数据发送时，服务器可以发送一个空事件（心跳包）来保持连接活跃，并帮助客户端检测连接是否仍然有效。WebSocket通常不需要显式心跳，因为TCP层有自己的保活机制。
  • 认证与授权： 无论是SSE还是WebSocket，都应确保只有授权的客户端才能连接并接收数据。可以通过在连接建立时传递Token或Session ID进行验证。
  • 可伸缩性： 对于大规模的实时应用，你可能需要引入消息队列（如Redis Pub/Sub, Kafka, RabbitMQ）来解耦数据源和WebSocket/SSE服务器，实现更灵活和可伸缩的架构。
  • 资源管理： 确保在客户端断开连接时，服务器能及时清理相关资源，避免资源泄露。

通过采用SSE或WebSocket，我们可以有效地将FastAPI后端与React前端连接起来，实现高效、实时的硬件状态更新，从而极大地提升应用的响应性和用户体验，同时避免了传统轮询带来的性能瓶颈。

以上就是FastAPI与React实时通信：实现后端主动推送硬件状态更新的详细内容，更多请关注其它相关文章！


# 知识问答  # 建设网站用什么软件  # 网上订餐系统网站建设  # 中山靠谱网站建设平台  # 群发营销软件推广话术  # 鄂州seo推广优势分析  # 开封新媒体推广营销  # 密云区综合网站建设经历  # 宜春seo公司选择17火星  # 专业网站建设硬件设备  # 旅游路线怎么营销推广  # 提供给  # 长时间  # 两种  # 不需要  # 是一种  # react  # 适用于  # 加载  # 客户端  # s  # ai  # 后端  # session  # websocket  # app  # 浏览器  # 防火墙  # json  # 前端  # js  # redis 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： 秋风萧瑟洪波涌起中的萧瑟指的是什么  B站怎么快速升级 B站用户等级提升攻略【详解】  C++ cast类型转换总结_C++ reinterpret_cast与const_cast的使用  解决C#跨线程访问XML对象的异常 安全的并发XML处理模式  《单词速记宝》设置学习计划方法  支付宝网页版在线入口 支付宝官网电脑登录入口  重返未来：1999卡戎全方位攻略  高德地图导航路线偏差报警频繁怎么办 高德地图路线偏差修复与优化方法  《咸鱼之王》新版孙坚技能解析  J*aScript调试技巧_性能分析与内存快照  《海贝音乐》均衡器设置方法  韩剧圈正版官网入口_韩剧圈官方指定登录  微信客户端怎么查看二维码_微信客户端个人二维码查看方法  铁路12306官网登录入口 铁路12306在线购票官方平台  J*a中的值传递到底指什么_值传递模型在参数传递中的真正含义说明  《桃源记2》资源采集攻略  国际经济与贸易就业方向解析  抖音团长模式怎么做?团长模式是什么意思？  电脑没有声音了怎么办 电脑声音问题的全面排查与修复指南【详解】  《sketchbook》选中部分图案移动方法  手机雨课堂网页版入口免登录 雨课堂网页版可点击直接进入  《异星探险家》古怪的物品作用介绍  腾讯QQ邮箱官方入口 QQ邮箱网页版登录平台  MySQL多重JOIN技巧：高效关联同一表获取多角色信息  《跳跳舞蹈》循环播放方法  Linux如何开发轻量级数据服务模块_Linux服务化设计  《兴业银行》注册登录方法  米侠浏览器插件无法启用怎么办 米侠浏览器扩展兼容性修复  J*aScript二进制处理_ArrayBuffer与Blob  向往的生活小游戏启动处_向往的生活小游戏立即启动  Cassandra中复合主键、二级索引与ORDER BY排序的限制与解决方案  《下一站江湖2》独孤剑诀习得方法  京东物流快递破损了怎么办_京东快递破损理赔流程  Python csv 模块处理非字符串数据：列表写入 CSV 文件的机制解析  win11怎么启用或禁用休眠 Win11 powercfg命令管理休眠文件【技巧】  c++类和对象到底是什么_c++面向对象编程基础  《雷电模拟器》自动点击设置方法  J*aScript大数运算_BigInt使用指南  Highcharts雷达图轴线交点数值标注指南  怎样设置开机后自动运行某个程序_Windows启动文件夹与任务计划【自动化】  三星A55应用闪退排查步骤_Samsung A55稳定性优化技巧  风神瞳获取全攻略  高效调试PHP大型嵌套数组：JSON序列化与可视化工具实践  C#中的Record类型有什么优势？C# 9新特性Record与Class的用法区别  漫蛙漫画官方版直通入口 2025漫蛙漫画免注册访问说明  Golang如何测试结构体方法_Golang reflect方法测试与调用技巧  家里的小飞虫总是不断，用什么方法可以彻底根除？  Yandex俄罗斯搜索引擎官网入口 Yandex网页端直接访问  Python中安全地将环境变量转换为整数的类型注解指南  Win10输入法不见了怎么办 Win10找回语言栏图标教程 

 2025-10-27

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.