Pour que l’architecture web (JavaScript + PHP) fonctionne avec le broker Mosquitto local, il faut activer une option cruciale : les WebSockets.
Par défaut, Mosquitto n’écoute que sur le port MQTT standard (1883), que les navigateurs web ne peuvent pas lire directement.
Activer les WebSockets dans Mosquitto
Vous devez modifier le fichier de configuration de Mosquitto (généralement nommé mosquitto.conf).
Ajoutez ou modifiez les lignes suivantes pour ouvrir deux ports : le port standard pour vos scripts PHP/capteurs, et un port WebSocket pour votre page web.
# Port standard pour le PHP en ligne de commande et les objets connectés
listener 1883
protocol mqtt
# Port WebSocket pour le JavaScript du navigateur web
listener 9001
protocol websockets
# Optionnel : Autoriser les connexions anonymes (pour le développement local)
allow_anonymous=true
// Machine de votre réseau local (ex: Raspberry Pi) :
const brokerUrl = 'ws://192.168.1.50:9001';
const topicName = 'test/mon_topic_web';
const client = mqtt.connect(brokerUrl, {
clientId: 'web_client_' + Math.random().toString(16).substr(2, 8)
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>MQTT Web Listener</title>
<!-- Chargement de la bibliothèque MQTT.js via CDN -->
<script src="https://unpkg.com"></script>
</head>
<body>
<h1>Statut de la page Web</h1>
<div id="status">Connexion au broker...</div>
<h2>Dernier message reçu :</h2>
<div id="messages" style="background: #f0f0f0; padding: 15px; border-radius: 5px;">
En attente de données...
</div>
<script>
// 1. Connexion au Broker via WebSocket (ici, le broker 192.168.1.53)
// Note : On utilise 'ws' (WebSocket NON Sécurisé) pour les pages en HTTP
const brokerUrl = 'ws://192.168.1.53:9001';
const topicName = 'test/mon_topic_web';
const client = mqtt.connect(brokerUrl, {
clientId: 'web_client_' + Math.random().toString(16).substr(2, 8)
});
const statusDiv = document.getElementById('status');
const messagesDiv = document.getElementById('messages');
// Événement : Connecté au broker
client.on('connect', () => {
statusDiv.innerHTML = "🟢 Connecté au broker MQTT !";
statusDiv.style.color = "green";
// Abonnement au topic
client.subscribe(topicName, (err) => {
if (!err) {
console.log(`Abonné au topic : ${topicName}`);
}
});
});
// Événement : Réception d'un message (L'ACTION COMMENCE ICI)
client.on('message', (topic, message) => {
// Conversion du message binaire en texte
const msgString = message.toString();
// Action 1 : Mettre à jour l'interface graphique du site
messagesDiv.innerHTML = `<strong>[${topic}]</strong> : ${msgString}`;
// Action 2 : Déclencher un traitement côté serveur via PHP (optionnel)
executerActionPHP(msgString);
});
// Fonction pour envoyer la donnée reçue à un script PHP en tâche de fond
function executerActionPHP(donneeMqtt) {
console.log("Envoi de la donnée au serveur PHP...");
fetch('action.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'data=' + encodeURIComponent(donneeMqtt)
})
.then(response => response.text())
.then(result => {
console.log("Réponse du script PHP :", result);
})
.catch(error => console.error("Erreur AJAX :", error));
}
client.on('error', (err) => {
statusDiv.innerHTML = "🔴 Erreur de connexion.";
statusDiv.style.color = "red";
console.error(err);
});
</script>
</body>
</html>
Le script de traitement côté serveur (action.php)
Ce fichier est appelé de manière invisible par le JavaScript (en AJAX/Fetch) dès qu’un message MQTT est capté. C’est ici que vous placez vos actions lourdes (sauvegarde en base de données, envoi de mail, etc.).
<?php
// action.php
$server = '127.0.0.1'; // ou l'IP locale de votre broker
$port = 1883; // Le PHP utilise le port MQTT standard, PAS le port WebSocket
// Vérification que la requête vient bien de notre JavaScript en POST
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['data'])) {
$donneeRecue = $_POST['data'];
// EXEMPLES D'ACTIONS :
// 1. Écrire dans un fichier de log local
file_put_contents('mqtt_log.txt', date('Y-m-d H:i:s') . " - " . $donneeRecue . PHP_EOL, FILE_APPEND);
// 2. Insérer dans une base de données (exemple conceptuel)
/*
$pdo = new PDO('mysql:host=localhost;dbname=ma_base', 'user', 'password');
$stmt = $pdo->prepare("INSERT INTO mesures (valeur) VALUES (?)");
$stmt->execute([$donneeRecue]);
*/
// Réponse renvoyée au JavaScript
echo "Action exécutée avec succès côté PHP pour la donnée : " . htmlspecialchars($donneeRecue);
} else {
echo "Aucune donnée valide reçue.";
}
Point d’attention : Le protocole HTTPS / MixteSi, à l’avenir, vous hébergez votre page web (le code JavaScript) sur un serveur distant sécurisé en HTTPS, le navigateur bloquera par sécurité la connexion vers un broker local en ws:// (non sécurisé).