用React、Node、MySQL、MQTT和Arduino简化物联网设备的搭建

2022-12-13 23:04:34

探索物联网的奇妙世界：使用 React、Node.js、MySQL、MQTT 和 Arduino 构建你的第一个设备

一、物联网设备：连接物理世界与数字世界的桥梁

物联网 (IoT) 正在改变我们与周围世界互动的方式。它连接物理设备和数字网络，创造了一个数据收集、处理和传输的生态系统，进而实现智能化控制。准备好踏上令人兴奋的物联网之旅了吗？让我们一起构建一个物联网设备，它将前端与后端分离，采用 MQTT 服务器连接 Arduino 设备，让你探索数据采集、存储、上传和下发命令的奇妙世界。

二、软硬件通讯流程：物联网设备的工作原理

我们的物联网设备的工作原理如下：

Arduino 设备采集数据： Arduino 设备通过传感器收集数据并将其发送到 MQTT 服务器。
MQTT 服务器传输数据： MQTT 服务器收到数据并将其转发给 Node.js 后端服务器。
后端服务器处理数据： Node.js 服务器处理数据并将其存储在 MySQL 数据库中。
前端展示数据： React 前端从后端服务器获取数据并将其可视化地呈现给用户。
用户操作设备： 用户可以通过前端界面对设备进行控制，并将控制命令发送给后端服务器。
后端服务器发送命令： 后端服务器将控制命令发送给 MQTT 服务器。
MQTT 服务器转发命令： MQTT 服务器将控制命令转发给 Arduino 设备。
Arduino 设备执行命令： Arduino 设备收到控制命令后，根据命令对设备进行控制。

三、构建之旅：搭建你的物联网设备

1. 软件安装：

安装 Node.js、MySQL、MQTT 服务器和 Arduino IDE。

2. 后端服务器：

创建一个 Node.js 项目，编写后端代码。
代码示例：

const mqtt = require('mqtt');
const client = mqtt.connect('mqtt://localhost');

client.on('connect', () => {
  client.subscribe('temperature');
});

client.on('message', (topic, message) => {
  // 处理接收到的数据并存储到 MySQL 数据库
});

3. MQTT 服务器：

安装 MQTT 服务器，配置相关参数。

4. MySQL 数据库：

创建 MySQL 数据库和数据表。

5. Arduino 设备：

将 Arduino 设备连接到电脑，编写 Arduino 代码。
代码示例：

#include <Arduino.h>
#include <Wire.h>
#include <DHT.h>

DHT dht(D2, DHT11);

void setup() {
  Serial.begin(9600);
  dht.begin();
}

void loop() {
  // 读取温度和湿度数据
  float temperature = dht.readTemperature();
  float humidity = dht.readHumidity();

  // 将数据发送到 MQTT 服务器
  String data = String(temperature) + "," + String(humidity);
  client.publish("temperature", data);
  
  // 等待 2 秒钟后再读取数据
  delay(2000);
}

6. 连接设备：

将 Arduino 设备与 MQTT 服务器连接。

7. 前端开发：

使用 React 框架编写前端代码，与后端服务器交互。
代码示例：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 从后端服务器获取数据
    const fetchData = async () => {
      const response = await fetch('/api/data');
      const data = await response.json();
      setData(data);
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>物联网设备</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.temperature}, {item.humidity}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;