Tester un broker MQTT depuis votre navigateur (sans installation)

Vous pouvez tester un broker MQTT depuis votre navigateur en deux minutes environ — sans installer Mosquitto, sans Python, sans droits d'administrateur. Ouvrez le client MQTT en ligne, connectez-vous en WebSocket sécurisé (wss), abonnez-vous à un topic, publiez un message et regardez-le revenir. Si cet aller-retour fonctionne, le broker est en ligne, joignable depuis votre réseau et route les messages.

Ce guide détaille le test complet étape par étape, montre comment le diriger vers votre propre broker et comment partager un test prêt à l'emploi avec un collègue ou un développeur firmware.

Comment fonctionne MQTT dans le navigateur

Les navigateurs ne peuvent pas ouvrir de sockets TCP bruts : une page web ne peut donc pas parler MQTT directement sur le port 1883. Elle utilise à la place MQTT sur WebSockets : les mêmes paquets MQTT, encapsulés dans une connexion WebSocket qui commence par une requête HTTP d'upgrade.

Deux conséquences comptent pour les tests : le broker doit avoir un listener WebSocket activé (avec le bon chemin — généralement /mqtt), et depuis une page https vous devez utiliser wss. Le client TestMQTT propose aussi TCP et TLS ; comme les navigateurs ne peuvent pas ouvrir ces sockets, il les relaie par le serveur TestMQTT. C'est pratique pour vérifier un broker uniquement TCP, mais gardez à l'esprit que la connexion part alors du réseau du relais, pas du vôtre. Pour le contexte, voir MQTT sur WebSockets.

Étape 1 — Se connecter

1. Ouvrez testmqtt.com/client. Le protocole par défaut est WSS et un broker recommandé est présélectionné.
2. Cliquez sur Connect. Le statut passe à connecté et le journal enregistre la connexion réussie (le CONNACK du broker).
3. Un client ID unique (testmqtt_xxxxxxxx) est généré pour chaque onglet, si bien que deux onglets ne s'éjectent jamais mutuellement du broker.

Pour tester votre propre broker, choisissez Custom broker… dans la liste des brokers et renseignez les paramètres :

Si le broker utilise un certificat auto-signé, c'est le navigateur qui décide de lui faire confiance, pas la page. Ouvrez une fois https://host:8084/ dans un onglet et acceptez le certificat — ou mieux, utilisez un certificat émis par une CA publique.

Étape 2 — S'abonner et publier

Utilisez un topic que personne d'autre n'utilise. Sur un broker partagé, test est très fréquenté ; quelque chose comme testmqtt/<votre-nom>-<aleatoire>/# isole vos messages.

1. Dans Subscriptions, ajoutez testmqtt/demo-7f3a/# en QoS 1.
2. Dans Publish, indiquez le topic testmqtt/demo-7f3a/sensor, choisissez le modèle Sensor JSON ou saisissez votre propre payload, puis cliquez sur Publish.
3. Le message apparaît dans la liste, marqué comme reçu. Double-cliquez dessus pour voir tous les détails : topic, QoS, indicateur retained, taille et payload complet.

Si vous publiez et que rien n'apparaît, vérifiez que le filtre d'abonnement correspond vraiment au topic — testmqtt/demo-7f3a/+ correspond à un niveau, # à tous les niveaux inférieurs. Le topic matcher tranche la question en quelques secondes, et topics et wildcards en explique les règles.

Pour un flux régulier, définissez un intervalle de répétition dans le panneau de publication. Il devient alors facile d'observer la connexion pendant quelques minutes et de repérer déconnexions ou trous.

Étape 3 — Tester les messages retained et le Last Will

Un vrai test de broker va au-delà d'un seul message :

• Retained : publiez sur testmqtt/demo-7f3a/status avec retain activé. Déconnectez-vous, reconnectez-vous et réabonnez-vous — le broker doit livrer immédiatement la dernière valeur retenue. Pour l'effacer, publiez un payload retenu vide — ou utilisez Clear retained message dans les détails du message.
• Last Will : dans Settings, définissez un will topic comme testmqtt/demo-7f3a/lwt avec le payload offline. Ouvrez un second onglet abonné à ce topic, puis fermez le premier sans vous déconnecter. Après environ 1,5 fois l'intervalle de keep alive, le broker doit publier le will. Un Disconnect propre ne le déclenche pas — c'est le comportement attendu.
• MQTT 5 : passez la version du protocole à 5 et reconnectez-vous. Si le broker ne prend en charge que la 3.1.1, vous obtiendrez une erreur de CONNACK comme Unsupported Protocol Version ; l'outil des reason codes explique chaque code.

Étape 4 — Recouper avec un autre client

Un test dans le navigateur prouve que le listener WebSocket fonctionne. Les appareils utilisent généralement TCP ou TLS, alors bouclez la boucle : laissez le navigateur abonné et publiez depuis un terminal.

mosquitto_pub -h broker.connectmq.com -p 1883 \
  -t testmqtt/demo-7f3a/sensor -m '{"temp":21.5}' -q 1 -d

mosquitto_pub -h broker.connectmq.com -p 8883 \
  --cafile /etc/ssl/certs/ca-certificates.crt \
  -u "$MQTT_USER" -P "$MQTT_PASS" \
  -t testmqtt/demo-7f3a/sensor -m '{"temp":21.5}' -q 1

Si le message apparaît dans le navigateur, les deux listeners partagent le même broker et le routage fonctionne entre transports. Si TCP fonctionne mais pas le navigateur — ou l'inverse —, le problème vient du listener ou du chemin réseau d'un transport, pas du broker dans son ensemble.

Partager un test prêt à l'emploi

Quand vous déboguez avec quelqu'un d'autre — un développeur firmware, un client, un collègue —, envoyez-lui un lien qui ouvre le client déjà connecté au bon endpoint et abonné au bon topic :

https://testmqtt.com/client?url=wss://broker.connectmq.com:8084/mqtt&topic=testmqtt/demo-7f3a/%23

url définit protocole, hôte, port et chemin, et lance la connexion automatiquement ; topic définit l'abonnement (encodez # en %23). Vous voyez tous les deux les mêmes messages en direct, bien plus vite qu'en échangeant des captures de logs. Les identifiants ne font jamais partie du lien : chacun saisit les siens.

Quand le test dans le navigateur échoue

Les outils de développement du navigateur affichent les frames WebSocket brutes dans Network → WS — souvent le moyen le plus rapide de voir si le CONNECT est parti et ce qui est revenu. Déboguer MQTT avec Chrome DevTools explique la démarche.

Ouvrir le client de test dans le navigateur

Tester depuis le navigateur est la première vérification la plus rapide possible : rien à installer, fonctionne sur n'importe quelle machine, et un lien partagé met tout le monde devant le même topic en direct. Une fois l'aller-retour validé dans le navigateur, recoupez en TCP ou TLS : vous saurez que le broker, les listeners et le chemin réseau sont en ordre.

Questions fréquentes