RabbitMQ + MQTT : Piloter un Arduino R4 WiFi depuis une page Web

0 comments

Un cours pour connecter le monde physique (Arduino) et le numérique (Web) en s’amusant !

🎯 Objectif pédagogique

À la fin de ce module, tu sauras :

✅ Installer RabbitMQ avec MQTT dans Docker (en exposant uniquement les ports utiles : 1883 et 15675).

✅ Créer une page Web (HTML/JS) avec MAMP pour contrôler ton Arduino en temps réel.

✅ Programmer ton Arduino R4 WiFi pour envoyer/recevoir des commandes MQTT sans surcharge.

✅ Faire communiquer tous ces éléments comme une équipe de super-héros !

Analogie :

RabbitMQ = Un facteur ultra-rapide qui transporte tes messages entre ton Arduino (un robot) et ta page Web (ton téléphone).
Docker = Sa boîte à outils magique pour le faire tourner.
MAMP = Son camion de livraison pour diffuser ta page Web sur ton réseau local.

🛠️ Matériel nécessaire pour ce projet

✅ Ordinateur (Windows/Mac/Linux) → Rôle : Exécuter Docker, MAMP

✅ Arduino R4 WiFi → Rôle : Carte connectée en WiFi pour recevoir/envoyer des commandes.

✅ Câble USB → Rôle : Brancher l’Arduino à ton ordinateur pour le programmer.

✅ 2 LEDs + résistances 220Ω → Rôle : Tester les sorties (pins 12 et 13). → Où les trouver ? Kit électronique de base (ex : Elegoo, Arduino Starter Kit).

✅ Potentiomètre 10kΩ → Rôle : Simuler une entrée analogique (pin A0).

✅ Docker Desktop → Rôle : Faire tourner RabbitMQ (broker MQTT) en local. → Où le trouver ? Téléchargement Docker

✅ MAMP (ou XAMPP/Laragon) → Rôle : Héberger ta page web en local pour contrôler l’Arduino. → Où le trouver ?Téléchargement MAMP

🚀 Étape 1 : Lancer RabbitMQ dans Docker (version optimisée)

🔹 Commande Docker simplifiée (uniquement les ports utiles)

docker run -d --name rabbitmqWeb \\
  -p 1883:1883 \\      # Port MQTT pour l'Arduino
  -p 15672:15672 \\    # Interface d'administration (pour vérifier que ça marche)
  -p 15675:15675 \\    # Port WebSocket pour la page Web
  rabbitmq:3.13-management

Explication des ports :

1883 : Port MQTT pour que l’Arduino communique avec RabbitMQ.
15672 : Interface web pour vérifier que RabbitMQ fonctionne (http://localhost:15672, identifiants : guest/guest).
15675 : Port WebSocket MQTT pour que ta page Web envoie/reçoive des messages en temps réel.

🔹 Activer les plugins MQTT et WebSocket

RabbitMQ a besoin que ces plugins soient activés pour fonctionner avec MQTT :

docker exec rabbitmqWeb rabbitmq-plugins enable rabbitmq_mqtt rabbitmq_web_mqtt

Vérification :

Ouvre http://localhost:15672 dans ton navigateur.
Va dans l’onglet "Plugins" : rabbitmq_mqtt et rabbitmq_web_mqtt doivent être activés (vert).

📡 Étape 2 : Programmer l’Arduino R4 WiFi

🔹 Code Arduino minimaliste (sans AMQP !)

#include <WiFiS3.h>
#include <MQTT.h>
#include "secrets.h"  // Fichier pour stocker ton SSID et mot de passe WiFi

// Configuration WiFi (à adapter)
const char ssid[] = "TON_SSID_WIFI";       // Remplace par ton SSID
const char pass[] = "TON_MOT_DE_PASSE";    // Remplace par ton mot de passe

// Configuration MQTT
const char mqttBroker[] = "192.168.1.XX";  // IP de ton ordinateur (où tourne RabbitMQ)
const int mqttPort = 1883;                 // Port MQTT (1883, pas 5672 !)
const char mqttClientId[] = "ArduinoR4";    // Identifiant unique pour l'Arduino

WiFiClient net;
MQTTClient client;

// Broches des LEDs et du potentiomètre
const int ledPin13 = 13;
const int ledPin12 = 12;
const int potPin = A0;

void setup() {
  Serial.begin(9600);
  pinMode(ledPin13, OUTPUT);
  pinMode(ledPin12, OUTPUT);

  // Connexion WiFi
  connectWiFi();

  // Connexion MQTT
  client.begin(mqttBroker, mqttPort, net);
  client.onMessage(messageReceived);  // Fonction appelée quand un message arrive
  connectMQTT();
}

void loop() {
  client.loop();  // Garde la connexion MQTT active

  // Publie l'état du potentiomètre toutes les secondes
  static unsigned long lastPublish = 0;
  if (millis() - lastPublish > 1000) {
    lastPublish = millis();
    int potValue = analogRead(potPin);
    client.publish("arduino/potentiometer", String(potValue));
  }
}

// Fonction pour gérer les messages MQTT reçus
void messageReceived(String &topic, String &payload) {
  Serial.println("Message reçu: " + topic + " - " + payload);

  if (topic == "arduino/led13") {
    digitalWrite(ledPin13, payload == "ON" ? HIGH : LOW);
  }
  else if (topic == "arduino/led12") {
    digitalWrite(ledPin12, payload == "ON" ? HIGH : LOW);
  }
}

// Fonction pour se connecter au WiFi
void connectWiFi() {
  Serial.print("Connexion au WiFi...");
  WiFi.begin(ssid, pass);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\\nConnecté au WiFi !");
}

// Fonction pour se connecter à MQTT
void connectMQTT() {
  Serial.print("Connexion à MQTT...");
  while (!client.connect(mqttClientId)) {
    Serial.print(".");
    delay(1000);
  }
  Serial.println("\\nConnecté à MQTT !");

  // S'abonner aux topics pour contrôler les LEDs
  client.subscribe("arduino/led13");
  client.subscribe("arduino/led12");
}

🔹 Fichier `secrets.h` (à créer)

// secrets.h
const char ssid[] = "TON_SSID_WIFI";       // Remplace par ton SSID
const char pass[] = "TON_MOT_DE_PASSE";    // Remplace par ton mot de passe

🔹 Explications clés du code

Connexion WiFi :
- L’Arduino se connecte à ton réseau WiFi avec WiFi.begin(ssid, pass).
- Analogie : C’est comme si ton Arduino "appelait" ton routeur pour se connecter à Internet.
Connexion MQTT :
- L’Arduino se connecte à RabbitMQ via le port 1883 (mqttPort = 1883).
- Analogie : C’est comme si ton Arduino "appelait" le facteur (RabbitMQ) pour envoyer/recevoir des messages.
Gestion des messages :
- Quand un message arrive (ex : "arduino/led13" avec "ON"), la fonction messageReceived allume/éteint la LED correspondante.
- Analogie : C’est comme si le facteur (RabbitMQ) te livrait un colis (message) et que tu ouvrais la porte (LED) en fonction de ce qu’il y a dedans.
Publication du potentiomètre :
- Toutes les secondes, l’Arduino envoie la valeur du potentiomètre (analogRead(potPin)) au topic "arduino/potentiometer".
- Analogie : C’est comme si ton Arduino envoyait une carte postale (valeur du potentiomètre) au facteur (RabbitMQ) toutes les secondes.

🌐 Étape 3 : Créer la page Web (HTML + JavaScript)

🔹 Structure du projet MAMP

Crée un dossier rabbitmq-arduino dans le répertoire htdocs de MAMP :
```
/Applications/MAMP/htdocs/rabbitmq-arduino/
```
Dans ce dossier, crée deux fichiers :
- index.html (la page Web).
- style.css (le style de la page).

🔹 Code HTML (`index.html`)

La page HTML est disponible en téléchargement pour des raison technique.

🔹 Explications clés de la page Web

Connexion MQTT via WebSocket :
- La page se connecte à RabbitMQ via le port 15675 (ws://192.168.1.XX:15675/ws).
- Analogie : C’est comme si ta page Web "appelait" le facteur (RabbitMQ) pour envoyer/recevoir des messages en temps réel.
Gestion des boutons :
- Quand tu cliques sur un bouton (ex : "Allumer LED 13"), la page envoie un message MQTT ("arduino/led13"avec "ON").
- Analogie : C’est comme si tu envoyais une lettre (message) au facteur (RabbitMQ) pour qu’il la livre à ton Arduino.
Affichage du potentiomètre :
- La page reçoit la valeur du potentiomètre ("arduino/potentiometer") et met à jour la jauge en temps réel.
- Analogie : C’est comme si ton Arduino envoyait une carte postale (valeur du potentiomètre) au facteur (RabbitMQ), qui la livre à ta page Web.

🔌 Étape 4 : Tester le système

1. Vérifier que RabbitMQ fonctionne

Ouvre http://localhost:15672 dans ton navigateur.
Identifiants : guest / guest.
Va dans l’onglet "Connections" : tu devrais voir ton Arduino et ta page Web connectés.

2. Téléverser le code Arduino

Ouvre le code Arduino dans l’IDE Arduino.
Remplace TON_SSID_WIFI, TON_MOT_DE_PASSE et 192.168.1.XX (IP de ton ordinateur) dans secrets.h.
Téléverse le code sur ton Arduino.

3. Lancer la page Web

Démarre MAMP et ouvre http://localhost/rabbitmq-arduino dans ton navigateur.
Teste les boutons : les LEDs doivent s’allumer/éteindre instantanément.
Tourne le potentiomètre : la jauge doit se mettre à jour en temps réel.

📌 Résumé des interactions

ÉlémentRôlePort utiliséProtocoleRabbitMQ (Docker)Serveur de messages1883 (MQTT) / 15675 (WebSocket)MQTT / WebSocketArduino R4 WiFiClient MQTT (envoie/reçoit des commandes)1883MQTTPage Web (MAMP)Interface de contrôle (envoie/reçoit des commandes)15675WebSocket MQTT

Analogie finale :

RabbitMQ = Le facteur qui transporte les messages.
Arduino = Le robot qui exécute les ordres.
Page Web = Ton téléphone pour donner des ordres au robot.
Docker/MAMP = Les outils pour que tout fonctionne ensemble.

🚀 3 idées pour aller plus loin

Ajouter un capteur de température :
- Branche un capteur DHT11 et publie sa valeur via MQTT.
- Affiche-la sur la page Web avec un graphique (utilise Chart.js).
Sécuriser la connexion :
- Ajoute un nom d’utilisateur/mot de passe pour RabbitMQ.
- Chiffre les messages MQTT avec TLS.
Créer un tableau de bord avancé :
- Utilise Node-RED pour créer une interface plus complexe (boutons, sliders, graphiques).
- Exemple : Un système d’arrosage automatique pour tes plantes !

🎉 Félicitations !

Tu as maintenant un système complet et optimisé pour piloter ton Arduino depuis une page Web en temps réel. 🎊

Prochaine étape : Invente ton propre projet ! Par exemple :

Un système d’alarme avec un buzzer et un capteur de mouvement.
Un jeu de lumière contrôlé depuis ton téléphone.
Un robot suiveur de ligne qui envoie sa position via MQTT.

N’hésite pas à partager tes créations avec la communauté ! 😊

Téléchargez les codes sources

0 comments

Sign upor login to leave a comment