一、项目概述
随着物联网（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进行数据发布，后端和前端无需修改即可适应新的传感器。
3508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
