当前位置：首页 > news >正文

ESP32+PHP+MySQL：构建云端物联网数据可视化看板

news 2026/6/8 18:45:27

1. 从零搭建ESP32物联网数据采集系统

第一次接触ESP32时，我被它强大的WiFi和蓝牙功能惊艳到了。这块售价仅几十元的小开发板，居然能轻松实现传感器数据采集和无线传输。今天我要分享的，就是如何用ESP32构建一个完整的物联网数据可视化系统。

这个系统的核心架构分为三部分：ESP32负责采集环境数据（比如温湿度、光照强度等），通过WiFi将数据发送到云服务器；服务器端使用PHP脚本接收数据并存入MySQL数据库；最后通过网页前端动态展示数据变化曲线。听起来复杂？其实跟着我的步骤操作，两小时内就能跑通整个流程。

我选择这个方案有几个原因：首先成本极低，ESP32开发板价格亲民；其次扩展性强，后期可以轻松增加更多传感器；最重要的是稳定性好，经过我三个月的实际测试，系统可以7x24小时不间断运行。下面我就从硬件连接开始，带你一步步实现这个项目。

2. ESP32硬件配置与数据发送

2.1 开发环境搭建

建议使用Arduino IDE来开发ESP32程序，这对初学者最友好。首先需要在IDE中添加ESP32支持：

打开Arduino IDE的首选项

在"附加开发板管理器网址"中输入：

https://www.arduino.cn/package_esp32_index.json

然后在工具→开发板→开发板管理器中搜索安装ESP32

安装完成后，选择对应的ESP32开发板型号。我使用的是ESP32 Dev Module，你也可以根据自己的板子型号选择。

2.2 传感器数据采集

以DHT11温湿度传感器为例，接线非常简单：

VCC接3.3V
GND接GND
DATA接GPIO4

安装DHT传感器库后，读取数据的代码非常简洁：

#include <DHT.h> #define DHTPIN 4 #define DHTTYPE DHT11 DHT dht(DHTPIN, DHTTYPE); void setup() { Serial.begin(115200); dht.begin(); } void loop() { float humidity = dht.readHumidity(); float temperature = dht.readTemperature(); if (isnan(humidity) || isnan(temperature)) { Serial.println("读取传感器失败"); return; } Serial.print("温度: "); Serial.print(temperature); Serial.print("℃ 湿度: "); Serial.print(humidity); Serial.println("%"); delay(2000); // 2秒读取一次 }

2.3 数据发送到服务器

接下来是关键步骤 - 将采集到的数据发送到云服务器。这里我直接使用WiFiClient类建立TCP连接：

#include <WiFi.h> const char* ssid = "你的WiFi名称"; const char* password = "你的WiFi密码"; const char* host = "服务器公网IP"; const int port = 8080; // 自定义端口号 void sendToServer(float temp, float humi) { WiFiClient client; if (!client.connect(host, port)) { Serial.println("连接服务器失败"); return; } String data = String(temp) + "," + String(humi); client.print(data); client.stop(); Serial.println("数据发送成功: " + data); }

在实际项目中，建议添加以下优化：

增加JSON格式封装，方便服务器解析
加入简单的数据校验，比如CRC校验
实现断线重连机制
添加看门狗定时器防止程序卡死

3. 服务器端PHP与MySQL配置

3.1 数据库设计

首先在MySQL中创建存储传感器数据的表：

CREATE DATABASE iot_data; USE iot_data; CREATE TABLE sensor_data ( id INT AUTO_INCREMENT PRIMARY KEY, device_id VARCHAR(32) NOT NULL, temperature FLOAT NOT NULL, humidity FLOAT NOT NULL, timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP );

这个表结构设计考虑了以下几点：

device_id字段区分不同ESP32设备
timestamp自动记录数据插入时间
为常用查询字段建立索引提高效率

3.2 PHP接收脚本

创建一个receive.php文件处理ESP32发来的数据：

<?php // 配置数据库连接 $servername = "localhost"; $username = "数据库用户名"; $password = "数据库密码"; $dbname = "iot_data"; // 获取原始POST数据 $data = file_get_contents('php://input'); list($temp, $humi) = explode(',', $data); // 创建数据库连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 准备SQL语句 $stmt = $conn->prepare("INSERT INTO sensor_data (device_id, temperature, humidity) VALUES (?, ?, ?)"); $device_id = "ESP32_001"; // 设备标识 $stmt->bind_param("sdd", $device_id, $temp, $humi); // 执行并检查结果 if ($stmt->execute()) { echo "数据插入成功"; } else { echo "错误: " . $stmt->error; } $stmt->close(); $conn->close(); ?>

这个脚本做了几件事：

接收原始TCP数据
解析温度和湿度值
安全地插入到MySQL数据库
返回操作结果

3.3 安全性增强

实际部署时，务必添加以下安全措施：

使用HTTPS而不是HTTP
实现API密钥验证
对输入数据进行严格过滤
限制同一IP的请求频率
使用预处理语句防止SQL注入

4. 动态数据可视化看板实现

4.1 前端页面框架

创建一个index.html文件作为数据展示门户：

<!DOCTYPE html> <html> <head> <title>物联网数据看板</title> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> .dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; } .card { background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; } .current-value { font-size: 3em; text-align: center; margin: 20px 0; } </style> </head> <body> <div class="dashboard"> <div class="card"> <h2>温度监测</h2> <div class="current-value" id="current-temp">-- ℃</div> <canvas id="tempChart"></canvas> </div> <div class="card"> <h2>湿度监测</h2> <div class="current-value" id="current-humi">-- %</div> <canvas id="humiChart"></canvas> </div> </div> <script src="dashboard.js"></script> </body> </html>

4.2 数据获取与图表绘制

创建dashboard.js实现动态数据展示：

// 初始化图表 const tempCtx = document.getElementById('tempChart').getContext('2d'); const humiCtx = document.getElementById('humiChart').getContext('2d'); const tempChart = new Chart(tempCtx, { type: 'line', data: { labels: [], datasets: [{ label: '温度 ℃', data: [], borderColor: 'rgb(255, 99, 132)', tension: 0.1 }] }, options: { responsive: true } }); const humiChart = new Chart(humiCtx, { type: 'line', data: { labels: [], datasets: [{ label: '湿度 %', data: [], borderColor: 'rgb(54, 162, 235)', tension: 0.1 }] }, options: { responsive: true } }); // 定时获取最新数据 function fetchData() { fetch('get_data.php') .then(response => response.json()) .then(data => { // 更新当前值 document.getElementById('current-temp').textContent = data.temperature + ' ℃'; document.getElementById('current-humi').textContent = data.humidity + ' %'; // 更新图表 if(tempChart.data.labels.length > 20) { tempChart.data.labels.shift(); tempChart.data.datasets[0].data.shift(); humiChart.data.labels.shift(); humiChart.data.datasets[0].data.shift(); } const now = new Date(); const timeStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(); tempChart.data.labels.push(timeStr); tempChart.data.datasets[0].data.push(data.temperature); tempChart.update(); humiChart.data.labels.push(timeStr); humiChart.data.datasets[0].data.push(data.humidity); humiChart.update(); }); } // 每2秒刷新一次数据 setInterval(fetchData, 2000); fetchData(); // 初始加载

4.3 PHP数据接口

创建get_data.php提供JSON格式的数据：

<?php header('Content-Type: application/json'); $conn = new mysqli("localhost", "用户名", "密码", "iot_data"); if ($conn->connect_error) { die(json_encode(['error' => '数据库连接失败'])); } $sql = "SELECT temperature, humidity FROM sensor_data ORDER BY timestamp DESC LIMIT 1"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo json_encode($result->fetch_assoc()); } else { echo json_encode(['temperature' => 0, 'humidity' => 0]); } $conn->close(); ?>