基于树莓派与WebSocket的实时温湿度监控系统搭建指南

1. 项目缘起为什么要在树莓派上折腾实时温湿度图表几年前我接手了一个小项目需要在办公室的几个角落实时监控温湿度的变化。市面上现成的物联网传感器要么太贵要么数据平台封闭要么就是数据刷新慢得让人着急。当时我就想能不能自己动手用最少的成本搭建一个数据实时可见、历史可查、还能在局域网内任何设备上随时查看的系统这个想法最终落地成了一个基于树莓派、WebSocket和动态图表的实时监控方案。它听起来有点技术栈但拆解开来核心就三块一个负责采集数据的树莓派Raspberry Pi一个负责实时推送数据的通信协议WebSocket和一个负责把数据画得漂亮的前端图表库Charts。今天我就把这个从零搭建的过程以及其中踩过的坑、总结的经验完整地分享出来。无论你是想监控家里的花房、实验室的环境还是想学习如何将硬件数据与Web应用实时结合这篇内容都能给你一份可以直接“抄作业”的指南。整个系统的逻辑非常直观树莓派上连接着温湿度传感器比如经典的DHT22它定时读取数据同时树莓派运行着一个Python Web服务器这个服务器一方面通过WebSocket与访问网页的浏览器保持长连接另一方面将读取到的传感器数据实时地“推”给所有正在查看的浏览器浏览器端则用JavaScript图表库比如Chart.js接收这些数据并动态地绘制出实时变化的曲线图。这样一来你只要在手机或电脑的浏览器里输入树莓派的IP地址就能看到一个不断更新的温湿度仪表盘。2. 硬件选型与树莓派基础环境搭建工欲善其事必先利其器。硬件是数据的源头环境是系统稳定运行的基石。这一部分我们来搞定硬件连接和最精简、稳定的软件环境。2.1 传感器与树莓派的选型考量对于温湿度监测DHT11和DHT22是最常见的选择。DHT11价格极低但精度也相对较低湿度±5%温度±2℃刷新速度慢最快1秒一次。DHT22价格稍高但精度湿度±2-5%温度±0.5℃和响应速度最快2秒一次要好得多。对于环境监控尤其是需要观察细微变化的场景我强烈推荐直接上DHT22多花的那点钱在数据质量上完全值得。树莓派方面从Zero W到最新的Pi 5都能胜任。我的建议是如果项目需要7x24小时长期运行并且可能在未来扩展其他功能比如加个摄像头那么至少选择树莓派3B或4B它们有更强的处理能力和更好的稳定性。如果追求极致的低功耗和迷你体积树莓派Zero W带无线也完全足够运行我们这个轻量级的Web服务。我这次演示用的是手头闲置的树莓派4B 2GB版本。连接非常简单。DHT22有三个引脚有的版本是四个但通常第四个是空脚VCC3.3V、DATA、GND。VCC连接到树莓派的3.3V引脚例如物理引脚1或17。DATA连接到树莓派任意一个GPIO引脚比如GPIO4物理引脚7。GND连接到树莓派的任意GND引脚例如物理引脚6、9、14、20等。注意务必确认连接到3.3V而不是5V。树莓派的GPIO引脚耐压是3.3V接5V可能会永久损坏你的树莓派。另外DATA信号线最好连接一个4.7kΩ - 10kΩ的上拉电阻到3.3V以确保信号稳定。很多DHT22模块已经集成了这个电阻购买时可以留意。2.2 操作系统与Python环境配置首先为树莓派安装一个轻量级的操作系统。Raspberry Pi OS Lite无桌面版是最佳选择它资源占用少更适合作为服务器长期运行。使用Raspberry Pi Imager工具刷写系统到SD卡时记得在设置中预先开启SSH并配置好Wi-Fi这样你就能通过命令行远程访问无需连接显示器和键盘。系统启动后第一件事是更新软件包列表并升级现有软件这是一个好习惯sudo apt update sudo apt full-upgrade -y我们的核心服务将用Python编写因此需要确保Python3和pipPython包管理器已就位。树莓派OS通常预装了Python3但我们需要安装pip和一些必要的开发工具sudo apt install -y python3-pip python3-venv接下来我强烈建议为这个项目创建一个独立的Python虚拟环境。这能避免项目依赖包污染系统全局环境也便于管理和迁移。mkdir ~/temp_humidity_project cd ~/temp_humidity_project python3 -m venv venv source venv/bin/activate当你看到命令行提示符前出现(venv)字样就说明虚拟环境激活成功了。后续的所有Python包安装都应该在这个激活的环境中进行。2.3 核心Python依赖库安装我们的项目需要几个关键的Python库Adafruit_DHT这是读取DHT22传感器数据最常用、最稳定的库之一。Flask一个轻量级的Python Web框架我们将用它来搭建Web服务器和提供WebSocket支持。Flask-SocketIO为Flask应用提供WebSocket功能的扩展库它是我们实现实时数据推送的核心。在激活的虚拟环境中使用pip安装它们(venv) pip install Adafruit_DHT Flask Flask-SocketIO安装完成后可以写一个简单的测试脚本来验证传感器和库是否工作正常。创建一个名为test_sensor.py的文件import Adafruit_DHT import time # 设置传感器类型和GPIO引脚 SENSOR Adafruit_DHT.DHT22 PIN 4 # 我们之前连接的GPIO4 try: while True: humidity, temperature Adafruit_DHT.read_retry(SENSOR, PIN) if humidity is not None and temperature is not None: print(f温度: {temperature:.1f}°C, 湿度: {humidity:.1f}%) else: print(读取传感器失败请检查连接。) time.sleep(2) # 每2秒读取一次 except KeyboardInterrupt: print(程序停止)运行这个脚本python test_sensor.py如果能看到周期性的温湿度输出恭喜你硬件和基础环境搭建成功3. 构建后端Flask与WebSocket服务器数据能读出来了接下来我们要搭建一个“中转站”它既能通过网页提供访问界面又能通过WebSocket把数据实时推出去。Flask加上SocketIO的组合让这件事变得异常简单。3.1 Flask应用骨架与静态文件服务首先我们在项目根目录创建主应用文件app.py。Flask应用的基本结构如下from flask import Flask, render_template from flask_socketio import SocketIO, emit import Adafruit_DHT from threading import Thread, Event import time import json # 初始化Flask和SocketIO app Flask(__name__) app.config[SECRET_KEY] your_secret_key_here # 用于会话安全生产环境请使用强密钥 socketio SocketIO(app, cors_allowed_origins*) # 允许所有来源跨域开发时方便 # 传感器配置 SENSOR Adafruit_DHT.DHT22 SENSOR_PIN 4 # 用于控制后台数据采集线程 thread None thread_stop_event Event() def background_sensor_thread(): 后台线程持续读取传感器数据并通过WebSocket广播 print(传感器数据采集线程启动) while not thread_stop_event.is_set(): humidity, temperature Adafruit_DHT.read_retry(SENSOR, SENSOR_PIN) if humidity is not None and temperature is not None: # 准备数据 sensor_data { temperature: round(temperature, 1), humidity: round(humidity, 1), timestamp: time.time() * 1000 # 转换为JavaScript常用的毫秒时间戳 } # 通过SocketIO的emit方法广播数据到所有连接的客户端 # broadcastTrue确保所有打开页面的用户都能收到 socketio.emit(new_sensor_data, json.dumps(sensor_data), broadcastTrue) print(f广播数据: {sensor_data}) else: print(读取传感器数据失败本次跳过。) time.sleep(2) # 每2秒采集并推送一次数据 app.route(/) def index(): 主页面路由返回HTML return render_template(index.html) socketio.on(connect) def handle_connect(): 当WebSocket客户端连接时触发 global thread print(客户端已连接) # 确保只有一个后台线程在运行 if thread is None: thread Thread(targetbackground_sensor_thread) thread.start() socketio.on(disconnect) def handle_disconnect(): 当WebSocket客户端断开时触发 print(客户端断开连接) if __name__ __main__: # 启动服务器监听所有网络接口的5000端口 # allow_unsafe_werkzeugTrue 是Flask-SocketIO在调试模式下的一个选项 socketio.run(app, host0.0.0.0, port5000, debugTrue, allow_unsafe_werkzeugTrue)这段代码做了几件关键的事创建了Flask应用和SocketIO实例。定义了一个后台线程background_sensor_thread它在一个循环中不断读取传感器数据并使用socketio.emit将数据以new_sensor_data为事件名广播给所有连接的Web客户端。定义了根路由/返回一个HTML页面我们稍后创建templates/index.html。定义了WebSocket的连接 (connect) 和断开 (disconnect) 事件处理函数并在第一个客户端连接时启动后台数据采集线程。3.2 处理WebSocket连接与数据广播的细节这里有几个容易出错的细节需要展开讲讲。首先是socketio.run(app, ...)这行。在开发时我们通常用Flask自带的开发服务器启动但Flask-SocketIO为了处理WebSocket需要使用它自己封装过的run方法而不是app.run()。参数host0.0.0.0至关重要它让服务器监听所有网络接口这样你才能在同一局域网下的其他设备如手机、电脑上通过树莓派的IP地址访问这个服务。如果只监听127.0.0.1或localhost那就只有树莓派本机可以访问了。其次是跨域问题。在初始化SocketIO时我设置了cors_allowed_origins*。这在开发和测试阶段没问题意味着任何来源的网页都可以连接这个WebSocket。但在生产环境或对安全有要求时你应该将其设置为具体的域名或IP例如cors_allowed_origins[http://192.168.1.100:5000]以防止不受信任的网站连接你的数据流。后台线程的设计是为了避免阻塞主Web服务器。传感器读取 (Adafruit_DHT.read_retry) 可能会有短暂的延迟如果放在Web请求处理函数里会拖慢整个服务器的响应。用一个独立的线程在后台默默工作主服务器只负责接收HTTP请求和推送WebSocket事件这样架构更清晰、性能更好。thread_stop_event是一个线程事件对象用于在服务器关闭时优雅地停止后台线程虽然上面的示例代码没有实现关闭逻辑但在更完善的服务中需要处理。4. 打造前端动态图表与实时数据绑定后端准备好了持续喷涌的数据流前端就需要一个容器来接收并漂亮地展示它。我们将创建一个简单的HTML页面引入Chart.js来绘制图表并使用Socket.IO的客户端库来建立WebSocket连接。4.1 基础HTML结构与Chart.js初始化在项目根目录下创建templates文件夹然后在里面创建index.html。这是我们的前端界面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title树莓派温湿度实时监控/title script srchttps://cdn.jsdelivr.net/npm/chart.js/script script srchttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.min.js/script style body { font-family: sans-serif; margin: 20px; background-color: #f5f5f5; } .container { max-width: 1000px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .chart-container { position: relative; height: 400px; margin-bottom: 30px; } .status { margin-bottom: 20px; padding: 10px; border-radius: 5px; background-color: #e8f5e9; border-left: 4px solid #4caf50; } .data-display { display: flex; justify-content: space-around; margin-bottom: 20px; } .data-box { text-align: center; padding: 15px; border-radius: 8px; min-width: 120px; } .temp-box { background-color: #ffebee; border: 2px solid #ef5350; } .humi-box { background-color: #e8f5e9; border: 2px solid #66bb6a; } .value { font-size: 2.5em; font-weight: bold; } .unit { font-size: 1em; color: #666; } .label { font-size: 1.2em; margin-bottom: 5px; } /style /head body div classcontainer h1️ 树莓派温湿度实时监控仪表板/h1 div classstatus idconnectionStatus 正在连接数据服务器... /div div classdata-display div classdata-box temp-box div classlabel当前温度/div div classvalue idcurrentTemp--/div div classunit°C/div /div div classdata-box humi-box div classlabel当前湿度/div div classvalue idcurrentHumi--/div div classunit%/div /div /div h2历史趋势图/h2 div classchart-container canvas idsensorChart/canvas /div /div script // 页面加载完成后执行的代码 document.addEventListener(DOMContentLoaded, function() { // 1. 初始化图表 const ctx document.getElementById(sensorChart).getContext(2d); let chart new Chart(ctx, { type: line, data: { labels: [], // 时间标签初始为空 datasets: [{ label: 温度 (°C), data: [], // 温度数据点 borderColor: rgb(255, 99, 132), backgroundColor: rgba(255, 99, 132, 0.1), tension: 0.4, // 曲线平滑度 yAxisID: y, }, { label: 湿度 (%), data: [], // 湿度数据点 borderColor: rgb(54, 162, 235), backgroundColor: rgba(54, 162, 235, 0.1), tension: 0.4, yAxisID: y1, }] }, options: { responsive: true, maintainAspectRatio: false, interaction: { mode: index, intersect: false }, scales: { x: { title: { display: true, text: 时间 }, ticks: { maxTicksLimit: 10 } }, y: { type: linear, display: true, position: left, title: { display: true, text: 温度 (°C) }, suggestedMin: 10, suggestedMax: 40 }, y1: { type: linear, display: true, position: right, title: { display: true, text: 湿度 (%) }, suggestedMin: 20, suggestedMax: 80, // 确保右侧湿度轴与左侧温度轴的网格线不重叠 grid: { drawOnChartArea: false }, } }, plugins: { legend: { display: true }, tooltip: { mode: index, intersect: false } } } }); // 2. 连接WebSocket服务器 // 注意这里的地址需要替换成你树莓派的实际IP // 例如const socket io(http://192.168.1.100:5000); const socket io(); // 如果前端和后端在同一主机和端口可以这样简写 // 3. 更新连接状态 socket.on(connect, function() { console.log(WebSocket连接成功); document.getElementById(connectionStatus).innerHTML ✅ 已连接到数据服务器正在接收实时数据...; document.getElementById(connectionStatus).style.backgroundColor #e8f5e9; document.getElementById(connectionStatus).style.borderLeftColor #4caf50; }); socket.on(disconnect, function() { console.log(WebSocket连接断开。); document.getElementById(connectionStatus).innerHTML ❌ 数据服务器连接已断开正在尝试重连...; document.getElementById(connectionStatus).style.backgroundColor #ffebee; document.getElementById(connectionStatus).style.borderLeftColor #ef5350; }); // 4. 监听后端发来的new_sensor_data事件 socket.on(new_sensor_data, function(dataStr) { const data JSON.parse(dataStr); console.log(收到新数据:, data); // 更新顶部当前值显示 document.getElementById(currentTemp).textContent data.temperature.toFixed(1); document.getElementById(currentHumi).textContent data.humidity.toFixed(1); // 将新数据点添加到图表中 const timeLabel new Date(data.timestamp).toLocaleTimeString(); // 转换为本地时间字符串 chart.data.labels.push(timeLabel); chart.data.datasets[0].data.push(data.temperature); chart.data.datasets[1].data.push(data.humidity); // 限制图表上显示的数据点数量避免过于拥挤例如只保留最近60个点 const maxDataPoints 60; if (chart.data.labels.length maxDataPoints) { chart.data.labels.shift(); // 移除最旧的时间标签 chart.data.datasets[0].data.shift(); // 移除最旧的温度数据 chart.data.datasets[1].data.shift(); // 移除最旧的湿度数据 } // 更新图表触发重绘 chart.update(none); // 参数‘none’表示不应用动画更新更流畅 }); }); /script /body /html4.2 图表配置与数据更新的核心逻辑前端代码的核心是Chart.js的配置和Socket.IO的事件监听。在图表配置中我创建了两个Y轴y和y1分别位于左右两侧用于显示单位和量纲都不同的温度和湿度。tension: 0.4让曲线变得平滑观感更好。scales配置中的suggestedMin和suggestedMax为坐标轴提供了一个初始的建议范围Chart.js会根据实际数据的进入动态调整但这给了图表一个良好的初始状态。数据更新逻辑是前端的灵魂。当socket.on(new_sensor_data)触发时我们解析数据从WebSocket收到的JSON字符串中解析出温度、湿度和时间戳。更新数值显示立即更新页面顶部两个大数字给用户最直观的反馈。追加图表数据将新的数据点温度、湿度和时间标签分别推入push图表对应的数据数组中。限制数据量这是一个非常重要的优化。如果不加限制图表数据数组会无限增长最终导致浏览器内存占用过高、图表渲染卡顿。这里我们设定只保留最近60个数据点即最近2分钟的数据假设2秒一个点。当数组长度超过60时使用shift()方法移除数组最开头的元素最旧的数据。这样图表始终显示一个“滑动窗口”内的最新数据。触发图表更新调用chart.update(none)重绘图表。参数none表示禁用更新动画这样在快速接收数据时图表的刷新会更流畅没有视觉上的滞后感。注意前端代码中const socket io();这行它假设前端页面是从与后端服务器相同的主机:端口加载的。在我们的场景里树莓派的IP是192.168.1.100服务跑在5000端口。那么你在同一局域网的电脑上访问http://192.168.1.100:5000时页面能正常加载但Socket.IO客户端库会默认尝试连接加载页面的同一个主机和端口也就是192.168.1.100:5000这是正确的。所以这种简写方式在部署后是可行的。但在开发调试时如果你的前端文件是直接用浏览器打开本地文件file://协议那么io()会尝试连接localhost这就会失败。因此在最终部署时确保HTML页面是由你的Flask服务器app.py通过render_template(index.html)提供的这样它们就同源了。5. 局域网访问、部署与长期运行优化代码都写好了怎么让它跑起来并且稳定、安全地长期运行呢这一步才是从“玩具”到“工具”的关键。5.1 启动服务与局域网访问测试首先确保你在树莓派上项目虚拟环境已激活然后运行我们的主程序cd ~/temp_humidity_project source venv/bin/activate python app.py你应该会看到类似下面的输出* Serving Flask app app * Debug mode: on WARNING: This is a development server. Do not use it in a production deployment. * Running on all addresses (0.0.0.0) * Running on http://127.0.0.1:5000 * Running on http://192.168.1.100:5000 (此处是SocketIO和Werkzeug的日志) 传感器数据采集线程启动注意日志中显示的IP地址例如http://192.168.1.100:5000这就是你树莓派在局域网内的地址。测试步骤树莓派本地测试在树莓派本身如果接了显示器或者通过SSH连接的终端里用文本浏览器如lynx或者用curl测试路由是否正常。更简单的方法是在树莓派上安装一个图形化浏览器如sudo apt install chromium-browser然后打开浏览器访问http://127.0.0.1:5000应该能看到页面。同局域网其他设备测试这是关键。在你的笔记本电脑或手机上打开浏览器输入http://[树莓派的IP地址]:5000例如http://192.168.1.100:5000。如果能看到监控页面并且顶部的状态提示变成“已连接”温度湿度数值开始变化图表也开始绘制曲线那么恭喜你整个系统成功运行了如果无法访问请按以下步骤排查检查防火墙树莓派OS默认的防火墙如ufw可能关闭了5000端口。可以临时关闭防火墙测试sudo ufw disable或者开放5000端口sudo ufw allow 5000。检查IP地址确保你输入的IP正确。在树莓派终端输入hostname -I查看所有IP地址。检查服务绑定确认app.py中socketio.run(app, host0.0.0.0, ...)已正确设置。5.2 使用系统服务实现开机自启与后台运行我们不可能一直开着SSH窗口运行python app.py。我们需要让它作为一个系统服务在后台运行并且开机自动启动。这里我们使用systemd。首先创建一个服务文件sudo nano /etc/systemd/system/temp_humidity.service将以下内容粘贴进去注意修改WorkingDirectory和ExecStart的路径为你项目的实际路径以及User为你的树莓派用户名通常是pi[Unit] DescriptionTemp Humidity WebSocket Chart Service Afternetwork.target [Service] Typesimple Userpi WorkingDirectory/home/pi/temp_humidity_project EnvironmentPATH/home/pi/temp_humidity_project/venv/bin ExecStart/home/pi/temp_humidity_project/venv/bin/python /home/pi/temp_humidity_project/app.py Restarton-failure RestartSec10 StandardOutputjournal StandardErrorjournal [Install] WantedBymulti-user.target这个配置文件告诉系统WorkingDirectory服务启动时的工作目录。Environment设置环境变量这里将PATH指向了虚拟环境的bin目录确保服务使用虚拟环境中的Python和依赖。ExecStart启动服务的具体命令即用虚拟环境中的Python解释器运行我们的app.py。Restarton-failure如果程序异常退出自动重启。RestartSec10重启前等待10秒。保存退出后执行以下命令# 重新加载systemd配置 sudo systemctl daemon-reload # 启用服务使其开机自启 sudo systemctl enable temp_humidity.service # 立即启动服务 sudo systemctl start temp_humidity.service # 查看服务状态确认运行正常 sudo systemctl status temp_humidity.service如果状态显示为active (running)并且日志里没有报错说明服务启动成功。现在你可以重启树莓派服务也会自动启动。要查看实时日志可以使用sudo journalctl -u temp_humidity.service -f。5.3 性能优化与常见问题排查项目运行起来后你可能会遇到一些小问题这里分享一些优化和排查经验。1. 图表数据点过多导致浏览器卡顿我们之前在前端代码里限制了60个数据点这对于实时监控通常是足够的。但如果你的采样频率很高比如每秒一次并且需要查看更长时间的历史趋势60个点可能不够。这时可以考虑两种策略前端数据聚合在将数据推送给图表前对历史数据进行降采样。例如每10个原始数据点计算一个平均值作为一个显示点。这需要在前端JavaScript中增加一些逻辑。后端历史存储与查询在后端使用小型数据库如SQLite存储所有历史数据。前端图表初始化时先通过一个普通的HTTP API接口请求过去一段时间比如一小时的聚合数据来初始化图表然后WebSocket只负责推送最新的实时数据点。这样图表既能展示长期趋势又不会因为实时数据流而变得臃肿。2. WebSocket连接不稳定或断开在不太稳定的网络环境中WebSocket连接可能会中断。Socket.IO客户端库本身具备自动重连机制我们代码中已经体现了这一点监听disconnect事件并更新UI状态。为了增强健壮性可以在后端增加心跳检测ping/pong但Flask-SocketIO默认已经处理了。如果发现频繁断开可以检查树莓派的网络连接是否稳定或者考虑调整Socket.IO的传输方式默认会尝试WebSocket失败则降级为长轮询。3. 传感器读取失败或数据异常Adafruit_DHT.read_retry函数本身就有重试机制但有时会因为硬件接触不良、电源干扰等原因持续失败。在生产环境中可以增加更完善的错误处理逻辑比如连续失败N次后在WebSocket数据中增加一个“传感器故障”的状态标志前端收到后可以在页面上显示警告信息而不是一直显示旧数据或“--”。4. 提升前端体验自动重连提示当disconnect事件触发时除了改变状态框颜色还可以启动一个定时器每隔几秒尝试重新建立连接Socket.IO会自动做但我们可以给用户更明确的提示。图表交互Chart.js支持丰富的交互比如鼠标悬停显示精确值、拖动缩放查看历史细节等。这些功能在默认配置中已部分开启你可以根据文档进一步定制。移动端适配我们使用了viewport和相对单位基础适配已经不错。对于更复杂的移动端界面可以考虑使用更响应式的CSS框架或者针对小屏幕调整图表的maintainAspectRatio等选项。通过以上步骤你不仅拥有了一个可用的实时温湿度监控系统更掌握了一套将硬件数据通过Web技术实时可视化的完整方法。这个框架具有很强的扩展性你可以轻松地将DHT22传感器替换成其他GPIO设备如光照传感器、土壤湿度传感器或者在前端增加更多的图表类型和控件打造属于你自己的物联网监控面板。