从零开始搭建一个完整的物联网系统：架构设计 + 设备通信 + 数据可视化

原创已于 2025-06-07 19:33:19 修改 · 540 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#物联网 #架构

于 2025-06-07 19:20:14 首次发布

一、项目目标

搭建一个完整的物联网系统，用于实时监控环境数据（如温度、湿度）。系统主要包括：

设备端（NodeMCU + DHT11 传感器）

云平台（MQTT Broker + 数据存储）

Web端（实时图表展示）

二、系统架构图

[传感器设备]

↓ (DHT11采集)

[NodeMCU]

↓ (MQTT通信)

[EMQX云服务器]

↓

[Web后端: Flask + MongoDB]

↓

[前端: ECharts可视化]

三、硬件准备

设备数量说明

NodeMCU ESP8266 1 Wi-Fi 控制器

DHT11 传感器 1 温湿度传感器

杜邦线若干用于连接

MicroUSB数据线 1 上电 + 串口调试

四、设备端编程（ESP8266 + Arduino IDE）

安装依赖

1. 安装 Arduino IDE

2. 添加 ESP8266 支持板

3. 安装库：

DHT sensor library

Adafruit Unified Sensor

PubSubClient

代码

#include <ESP8266WiFi.h>

#include <PubSubClient.h>

#include <DHT.h>

#define DHTPIN D4

#define DHTTYPE DHT11

const char* ssid = "your-wifi";

const char* password = "your-password";

const char* mqtt_server = "broker.emqx.io"; // 公共 MQTT Broker

WiFiClient espClient;

PubSubClient client(espClient);

DHT dht(DHTPIN, DHTTYPE);

void setup() {

Serial.begin(115200);

dht.begin();

setup_wifi();

client.setServer(mqtt_server, 1883);

}

void setup_wifi() {

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi...");

}

void loop() {

if (!client.connected()) {

reconnect();

}

client.loop();

float h = dht.readHumidity();

float t = dht.readTemperature();

String payload = "{\"temperature\":" + String(t) + ",\"humidity\":" + String(h) + "}";

client.publish("iot/env", payload.c_str());

delay(5000);

}

void reconnect() {

while (!client.connected()) {

if (client.connect("ESP8266Client")) {

client.subscribe("iot/env");

} else {

delay(5000);

}

---

五、搭建云端平台（MQTT + 数据存储）

你可以使用免费的 MQTT Broker，例如：

EMQX

Mosquitto

HiveMQ

数据持久化（Python + Flask + MongoDB）

pip install flask pymongo paho-mqtt

# app.py

from flask import Flask, jsonify

from pymongo import MongoClient

import paho.mqtt.client as mqtt

import json

app = Flask(__name__)

client = MongoClient("mongodb://localhost:27017/")

db = client["iot"]

collection = db["env_data"]

def on_connect(client, userdata, flags, rc):

client.subscribe("iot/env")

def on_message(client, userdata, msg):

data = json.loads(msg.payload.decode())

collection.insert_one(data)

mqtt_client = mqtt.Client()

mqtt_client.on_connect = on_connect

mqtt_client.on_message = on_message

mqtt_client.connect("broker.emqx.io", 1883, 60)

mqtt_client.loop_start()

@app.route("/data")

def get_data():

data = list(collection.find({}, {"_id": 0}))

return jsonify(data)

if __name__ == "__main__":

app.run(debug=True)

六、前端可视化（ECharts）

你可以使用 ECharts + Axios 获取 Flask API 的数据并动态展示。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

const chart = echarts.init(document.getElementById('main'));

function fetchData() {

axios.get('/data').then(response => {

const data = response.data;

const times = data.map((_, i) => i);

const temp = data.map(d => d.temperature);

const humi = data.map(d => d.humidity);

chart.setOption({

title: { text: '温湿度实时数据' },

tooltip: {},

legend: { data: ['温度', '湿度'] },

xAxis: { data: times },

yAxis: {},

series: [

{ name: '温度', type: 'line', data: temp },

{ name: '湿度', type: 'line', data: humi }

]

});

}

setInterval(fetchData, 5000);

fetchData();

</script>

</body>

</html>

七、总结与提升

本项目展示了一个基础但完整的物联网系统：

设备层：传感器 + 控制器（ESP8266）

网络层： MQTT 协议连接

平台层：后端存储 + 接口服务

应用层：前端数据展示