Створення панелі моніторингу даних сенсорів IoT у реальному часі за допомогою Django, MQTT, React та ESP32

Цей посібник показує, як побудувати панель моніторингу даних з сенсорів у реальному часі, де дані з сенсора з ESP32 надсилаються через MQTT до Django (для зберігання даних) і відображаються в реальному часі на веб-додатку.

Використовувані технології:

Django, MQTT, ESP32 та React

Апаратні вимоги:

• ESP32-WROOM-32 (або будь-який інший варіант ESP32): Для підключення до Wi-Fi та комунікації з MQTT брокером.
• Сенсорні компоненти: MQ4 (сенсор газу) та DHT11 (сенсор температури та вологості) — або будь-які інші сенсори, з якими ви хочете експериментувати.
• RTC (Годинник реального часу): Для додавання точних міток часу до ваших даних.

Ми почнемо з налаштування програмного забезпечення, включаючи сервер Django та MQTT брокер.

Налаштування Django:

Переконайтеся, що ви встановили django у віртуальному середовищі.

pip install djangorestframework paho-mqtt  

django-admin startproject iot_backend  

python manage.py migrate

Створіть додаток під назвою "sensors", де ми додамо команди для підключення до mqtt сервера та створення моделі.

python manage.py startapp sensors

Додайте це в список встановлених додатків:

INSTALLED_APPS = [  
 ....  
 'sensors'  
]

sensors/models.py

from django.db import models  
from django.utils import timezone  

class Sensor(models.Model):  
 temperature = models.FloatField(blank=True,null=True, default=0.0)  
 humidity = models.FloatField(blank=True,null=True, default=0.0)  
 methane = models.FloatField(blank=True,null=True, default=0.0)  
 timestamp = models.DateTimeField(default=timezone.now)

Потім застосуйте makemigrations та migrate.

Налаштування MQTT:

Ми використаємо Docker для запуску MQTT сервера локально, використовуючи образ Eclipse Mosquitto.

У проекті Django створіть файл docker-compose.yml і використовуйте цей код:

iot_backend/docker-compose.yml

version: '3.8'  

services:  
 # MQTT брокер (Mosquitto)  
 mqtt-broker:  
 image: eclipse-mosquitto:latest  
 container_name: mqtt_broker  
 ports:  
 - "1883:1883" # MQTT порт  
 - "9001:9001" # WebSocket порт   
 volumes:  
 - ./mosquitto/config:/mosquitto/config # Налаштування Mosquitto  
 environment:  
 - MQTT_USERNAME=admin  
 - MQTT_PASSWORD=admin  
 restart: unless-stopped

Також створіть папку "mosquitto/config" і створіть файл "mosquitto.conf" в каталозі проекту та додайте це:

allow_anonymous true  
listener 1883  
protocol mqtt  


listener 9001  
protocol websockets

Тепер нам потрібно створити mqtt_listener для того, щоб сервер Django міг підключатися та отримувати повідомлення.

Створіть папку та файл у модулі sensors.

iotbackend/sensors/management/commands/mqttlistener.py

from django.core.management.base import BaseCommand  
import paho.mqtt.client as mqtt  
import json   
from sensors.models import Sensor  
from django.utils import timezone  

class Command(BaseCommand):  
 help = 'Запускає MQTT прослуховувач'  

 def handle(self, *args, **kwargs):  
 # Налаштування MQTT брокера  
 mqtt_broker = ''
192.168.1.0  
 mqtt_port = 1883  
 mqtt_user = 'admin'  
 mqtt_pass = 'admin'  

 def on_connect(client, userdata, flags, rc):  
 if rc == 0:  
 self.stdout.write(self.style.SUCCESS("Підключення до MQTT брокера успішне!"))  
 client.subscribe("sensor/data/")  
 else:  
 self.stdout.write(self.style.ERROR(f"Підключення не вдалося, код результату {rc}"))  

 def on_message(client, userdata, msg):  
 try:  
 # Декодуємо вхідне повідомлення  
 message = msg.payload.decode()  
 # Парсимо JSON дані, що надіслав ESP  
 data = json.loads(message)  

 # Витягуємо дані з сенсора  
 temperature = data.get("temperature", 0.0)  
 humidity = data.get("humidity", 0.0)  
 methane = data.get("mq4_value", 0.0)   
 timestamp = data.get("time")   

 self.stdout.write(self.style.SUCCESS(f"Отримано повідомлення на тему {msg.topic}: {data}"))  

 # Створюємо об'єкт Sensor  
 sensor = Sensor.objects.create(  
 temperature=temperature,  
 humidity=humidity,  
 methane=methane,  
 timestamp=timestamp if timestamp else timezone.now()  
 )  

 self.stdout.write(self.style.SUCCESS(f"Дані сенсора збережено: {sensor}"))  

 except json.JSONDecodeError:  
 self.stdout.write(self.style.ERROR("Не вдалося декодувати JSON повідомлення."))  
 except Exception as e:  
 self.stdout.write(self.style.ERROR(f"Помилка обробки повідомлення: {str(e)}"))  

 # Ініціалізуємо MQTT клієнт  
 client = mqtt.Client()  

 # Встановлюємо ім'я користувача та пароль для брокера   
 client.username_pw_set(mqtt_user, mqtt_pass)  

 # Прив'язуємо функції зворотного виклику  
 client.on_connect = on_connect  
 client.on_message = on_message  

 try:  
 # Підключаємося до MQTT брокера  
 client.connect(mqtt_broker, mqtt_port, 60)  

 # Запускаємо мережевий цикл для прослуховування повідомлень  
 self.stdout.write(self.style.SUCCESS("Запуск MQTT циклу..."))  
 client.loop_forever()  
 except Exception as e:  
 self.stdout.write(self.style.ERROR(f"Помилка: {str(e)}"))

Ця команда Django налаштовує MQTT прослуховувач за допомогою бібліотеки paho-mqtt. Вона підключається до вказаного MQTT брокера та підписується на тему ‘sensor/data/’, що дозволяє отримувати повідомлення від ESP32 або будь-якого іншого підключеного пристрою, що підписаний на ту саму тему. Ви можете покращити безпеку, додавши унікальний токен до теми.

Після отримання повідомлення, воно декодується, витягуються дані сенсора (температура, вологість, рівень метану та мітка часу) та зберігаються в базі даних у моделі Sensor.

Щоб перевірити, чи отримує сервер MQTT повідомлення, і чи зберігає Django дані, запустіть Django, сервер MQTT та MQTT прослуховувач за допомогою наступних команд або просто скопіюйте мій файл docker-compose.yml з GitHub репозиторію, щоб запустити все:

python manage.py runserver   
docker compose up  
python manage.py mqtt_listener

Скопіюйте та вставте ці тестові дані:

mosquitto_pub -h  -p 1883 -u admin -P admin -t "sensor/data/" -m "{\"temperature\": 23.5, \"humidity\": 45.6, \"mq4_value\": 120.3, \"time\": \"2025-01-25T15:00:00Z\"}"

Журнали mqtt_listener повинні отримати це:

Все готово на сервері бекенду! Наступний крок — налаштування коду вашого ESP32 для відправки даних на MQTT сервер. Ось посилання на мій код, який ви можете використати:

GitHub репозиторій даних сенсорів ESP32

І нарешті, для фронтенду, ознайомтесь з моїм репозиторієм на GitHub і клонувати проєкт. Фронтенд — це базовий приклад, створений за допомогою React. Ви можете використовувати його як стартову точку та побудувати свій власний інтерфейс. Оскільки браузери не підтримують MQTT за замовчуванням, я використав MQTT через WebSocket як обхідний шлях. На мобільних пристроях підключення до MQTT є більш прямолінійним, тому не повинно виникати жодних проблем.

Дані в реальному часі

Це була основа для більш складного проєкту, над яким я працював, що включає використання сенсорів для відправки даних.
Ви можете розширити цей проєкт, додавши більше функціональностей, таких як створення API для перегляду історії логів даних сенсора, реалізацію автентифікації та додавання аналітики. Сподіваюся, це дасть вам уявлення про те, як побудувати проєкт у реальному часі з MQTT!

Мій репозиторій на Github для фронтенду та бекенду

Перекладено з: Building a Real-Time IoT Sensor Data Dashboard with Django, MQTT, React, and ESP32