一、项目概述
随着物联网(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进行数据发布,后端和前端无需修改即可适应新的传感器。