构建以Zigbee为基础的智能网关：结合MQTT与Node.js、MongoDB、MQTT实现数据展示（代码示例）

在本项目中，我们结合Zigbee2MQTT、Node.js和MongoDB等技术栈，成功构建了一个可通过网页访问的Zigbee网关，实现了对传感器数据的实时监控。该系统使用Zigbee协议连接各类传感器，通过Zigbee2MQTT将数据发布到MQTT Broker（Mosquitto），后端服务基于Node.js实现，负责接收、处理和存储传感器数据到MongoDB数据库。前端网页应用则通过API接

qq_40431685

1277人浏览 · 2024-08-15 11:03:10

qq_40431685 · 2024-08-15 11:03:10 发布

一、项目概述

随着物联网（IoT）技术的快速发展，Zigbee作为一种低功耗、低数据速率的无线通信协议，越来越多地应用于家庭自动化和传感器网络中。本项目旨在构建一个可以通过网页访问的Zigbee网关，用户可以实时查看传感器数据。这一系统不仅提高了家庭的智能化程度，还为用户提供了便捷的数据监控和管理工具。

项目解决的问题

数据集中管理：通过Zigbee网关集中管理所有传感器数据，避免了信息孤岛。
实时监控：用户可以实时查看传感器数据，及时获取环境变化信息。
易于扩展：该系统架构允许用户根据需求添加更多传感器，扩展系统功能。

二、系统架构

本项目采用如下系统架构：

硬件组件：
- Zigbee协调器：用于接收来自Zigbee传感器的数据。
- 树莓派：作为主机设备，运行Zigbee2MQTT和后端服务。
软件组件：
- Zigbee2MQTT：将Zigbee传感器数据通过MQTT协议发布。
- MQTT Broker：使用Mosquitto作为消息代理，接收和管理Zigbee2MQTT的数据。
后端服务：使用Node.js或Python处理MQTT数据并存储在数据库中。
前端网页应用：通过API从后端获取数据并进行展示。

系统架构图

三、环境搭建

硬件环境

树莓派（推荐使用Raspberry Pi 3或4）
Zigbee协调器（如CC2531 USB Dongle）
Zigbee传感器（如温湿度传感器）

软件环境

操作系统：Raspberry Pi OS
Zigbee2MQTT
Mosquitto MQTT Broker
Node.js或Python
数据库（如SQLite或MongoDB）

环境安装步骤

安装Raspberry Pi OS：
- 下载并安装Raspberry Pi Imager，选择Raspberry Pi OS，写入SD卡。
连接Zigbee协调器：
- 将Zigbee协调器插入树莓派USB接口。

安装Zigbee2MQTT：

sudo apt update
sudo apt install git
git clone https://github.com/Koenkk/zigbee2mqtt.git
cd zigbee2mqtt
npm install

配置Zigbee2MQTT：
- 编辑 configuration.yaml 文件，设置串口为协调器的设备路径（如 /dev/ttyACM0）。

安装Mosquitto Broker：

sudo apt install mosquitto mosquitto-clients

启动Mosquitto Broker：

sudo systemctl enable mosquitto
sudo systemctl start mosquitto

安装Node.js（后端服务）：

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

安装数据库（以MongoDB为例）：
```
sudo apt install -y mongodb
```

注意事项

确保树莓派与Zigbee协调器连接正常。
配置文件中的端口设置需根据实际情况修改。

四、代码实现

1. Zigbee2MQTT配置

在 configuration.yaml 文件中，配置MQTT Broker信息：

mqtt:
  base_topic: zigbee2mqtt
  server: 'mqtt://localhost:1883'

2. 后端服务实现

首先，我们需要安装必要的依赖包。打开终端，进入后端服务项目目录，执行以下命令：

npm init -y
npm install express mongoose mqtt body-parser cors

这些依赖包括：

express：一个简洁的Web框架，用于构建API。
mongoose：用于MongoDB的对象数据建模库。
mqtt：用于与MQTT Broker进行通信的库。
body-parser：用于解析请求体的中间件。
cors：用于处理跨域请求的中间件。

接下来，我们创建一个简单的后端服务，处理MQTT数据并将其存储在MongoDB中。

后端服务代码

创建一个名为 server.js 的文件，并添加以下代码：

// server.js
const express = require('express');
const mongoose = require('mongoose');
const mqtt = require('mqtt');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3000;

// Middleware
app.use(cors());
app.use(bodyParser.json());

// MongoDB连接
mongoose.connect('mongodb://localhost:27017/zigbee_data', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});

// 数据模型
const SensorDataSchema = new mongoose.Schema({
    device: String,
    temperature: Number,
    humidity: Number,
    timestamp: { type: Date, default: Date.now },
});

const SensorData = mongoose.model('SensorData', SensorDataSchema);

// 订阅MQTT主题
const mqttClient = mqtt.connect('mqtt://localhost:1883');

mqttClient.on('connect', () => {
    console.log('Connected to MQTT Broker');
    mqttClient.subscribe('zigbee2mqtt/#', (err) => {
        if (!err) {
            console.log('Subscribed to zigbee2mqtt topic');
        }
    });
});

// 处理接收到的MQTT消息
mqttClient.on('message', (topic, message) => {
    const data = JSON.parse(message.toString());
    const sensorData = new SensorData({
        device: data.device,
        temperature: data.temperature,
        humidity: data.humidity,
    });
    
    // 保存数据到MongoDB
    sensorData.save((err) => {
        if (err) {
            console.error('Error saving data:', err);
        } else {
            console.log('Data saved:', sensorData);
        }
    });
});

// API端点：获取传感器数据
app.get('/api/sensor-data', (req, res) => {
    SensorData.find().sort({ timestamp: -1 }).limit(50).exec((err, data) => {
        if (err) {
            return res.status(500).json({ message: 'Error fetching data' });
        }
        res.json(data);
    });
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

3. 前端应用实现

接下来，我们需要创建一个简单的前端网页应用，以展示传感器数据。我们将使用HTML、CSS和JavaScript来构建前端。

前端代码

在项目目录中，创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zigbee传感器数据</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Zigbee传感器数据</h1>
    <div id="sensor-data"></div>

    <script>
        async function fetchSensorData() {
            const response = await fetch('http://localhost:3000/api/sensor-data');
            const data = await response.json();
            const sensorDataDiv = document.getElementById('sensor-data');
            sensorDataDiv.innerHTML = '';

            data.forEach(item => {
                const dataElement = document.createElement('div');
                dataElement.innerText = `设备: ${item.device}, 温度: ${item.temperature}°C, 湿度: ${item.humidity}%, 时间: ${new Date(item.timestamp).toLocaleString()}`;
                sensorDataDiv.appendChild(dataElement);
            });
        }

        // 定时刷新数据
        setInterval(fetchSensorData, 5000);
        fetchSensorData(); // 初始加载
    </script>
</body>
</html>

样式文件（styles.css）

在项目目录中创建一个名为 styles.css 的文件，并添加以下内容：

/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #333;
}

#sensor-data {
    margin-top: 20px;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#sensor-data div {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#sensor-data div:last-child {
    border-bottom: none;
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    h1 {
        font-size: 24px;
    }

    #sensor-data {
        padding: 10px;
    }
}

4. 启动和测试

完成以上步骤后，您可以按照以下步骤启动并测试整个系统：

启动MongoDB：
```
sudo systemctl start mongodb
```
启动后端服务：
在后端服务的项目目录中，执行以下命令启动Node.js服务器：
```
node server.js
```
启动Zigbee2MQTT：
在Zigbee2MQTT的目录中，启动Zigbee2MQTT：
```
npm start
```
打开前端网页：
使用浏览器打开 index.html 文件。您可以使用本地文件路径直接在浏览器中访问，或者可以使用一个简单的HTTP服务器（如http-server）来提供服务。

如果您选择使用http-server，可以安装并启动：
```
npm install -g http-server
http-server . -p 8080
```
然后在浏览器中访问 http://localhost:8080/index.html。

五、项目总结

通过以上步骤，我们成功构建了一个可以通过网页访问的Zigbee网关，并实时查看传感器数据。该项目的主要功能和实现过程如下：

系统架构：采用Zigbee2MQTT和Mosquitto实现Zigbee传感器与MQTT的集成，使用Node.js作为后端服务处理数据，并通过MongoDB存储数据。
实时数据展示：前端网页通过API接口定时请求后端数据，实时更新传感器状态。
可扩展性：系统架构允许轻松添加新的Zigbee传感器，并通过MQTT进行数据发布，后端和前端无需修改即可适应新的传感器。