Un client web MQTT en ligne vous permet de vous connecter à un broker, de vous abonner à des topics et de publier des messages de test directement depuis un onglet de navigateur, sans rien installer. Dans ce guide, vous verrez comment les clients navigateur atteignent réellement un broker, vous mènerez une session de test complète avec le client intégré au portail ConnectMQ, et vous construirez votre propre mini-client navigateur pour les cas qu'un outil hébergé ne couvre pas.
Pourquoi utiliser un client web MQTT en ligne ?
Les outils en ligne de commande comme mosquitto_sub sont excellents, mais ils ne sont pas toujours disponibles. Vous êtes peut-être sur un ordinateur d'entreprise verrouillé, en train d'aider un collègue en visioconférence, ou de vérifier une installation sur le terrain depuis une tablette. Un client dans le navigateur supprime l'étape d'installation : ouvrez une page, saisissez l'hôte et les identifiants, et vous voyez le trafic en direct.
Usages typiques d'un client web :
- Confirmer qu'un nouvel appareil publie réellement, et sur le topic attendu.
- Envoyer une commande ponctuelle, comme une mise à jour de configuration ou le basculement d'un relais, à un appareil en test.
- Vérifier les retained messages après un déploiement.
- Montrer à un interlocuteur non technique que les données circulent, sans lui expliquer un terminal.
- Reproduire un rapport de bug avec le payload exact envoyé par un client.
Un client web est un outil de test et de débogage, pas un consommateur de production. Gardez les intégrations de longue durée dans un véritable service et utilisez le navigateur pour le travail interactif.
Comment les clients MQTT navigateur se connectent
Les navigateurs ne peuvent pas ouvrir de sockets TCP bruts : un client navigateur ne peut donc pas utiliser les ports MQTT classiques 1883 ou 8883. Il encapsule MQTT dans une connexion WebSocket. Le broker doit exposer un listener WebSocket, et le client doit connaître à la fois le port et le chemin. Pour tout le contexte, lisez notre guide sur MQTT sur WebSocket.
ConnectMQ expose ces listeners sur chaque broker :
| Transport | Port | Forme de l'URL | Utilisable depuis un navigateur ? |
|---|---|---|---|
| MQTT sur TCP | 1883 | mqtt://host:1883 |
Non |
| MQTT sur TLS | 8883 | mqtts://host:8883 |
Non |
| WebSocket | 8083 | ws://host:8083/mqtt |
Uniquement depuis des pages HTTP non chiffrées |
| Secure WebSocket | 8084 | wss://host:8084/mqtt |
Oui, recommandé |
Deux règles des navigateurs expliquent la plupart des échecs de connexion. D'abord, une page chargée en HTTPS ne peut pas ouvrir de socket ws:// non chiffré : le navigateur le bloque comme contenu mixte. Ensuite, le chemin compte : se connecter à wss://broker.connectmq.com:8084 sans /mqtt atteint le serveur mais ne termine jamais la poignée de main MQTT. Utilisez le WebSocket sécurisé avec le chemin complet et les deux problèmes disparaissent. Le broker présente un certificat Let's Encrypt, que les navigateurs reconnaissent sans configuration supplémentaire.
Pas à pas : tester un broker avec le client web ConnectMQ
La voie la plus rapide est le client MQTT intégré au portail, car il connaît déjà les endpoints et les identifiants de votre broker.
- Inscrivez-vous sur app.connectmq.com, choisissez le plan Serverless (Free) et créez un broker. Le portail génère pour vous un nom d'utilisateur, un mot de passe et un client ID.
- Ouvrez le client MQTT intégré au navigateur depuis le portail. Les informations de connexion de votre broker sont disponibles à côté.
- Connectez-vous. Un CONNACK réussi signifie que les identifiants et le client ID ont été acceptés. N'oubliez pas que les client IDs sont liés aux identifiants émis : utilisez le client ID fourni par le portail plutôt que d'en inventer un.
- Abonnez-vous à un filtre à wildcard pour votre projet, par exemple
factory1/#, afin de voir tout ce qui se trouve sous cette racine. - Publiez un payload de test comme
{"temperature": 21.7}surfactory1/line1/sensor1/telemetryen QoS 1. Il doit apparaître immédiatement dans le panneau des abonnements. - Publiez une nouvelle fois avec le flag retain activé, déconnectez-vous, reconnectez-vous et réabonnez-vous. La valeur retained doit arriver instantanément, ce qui prouve que le broker conserve la dernière valeur de ce topic.
- Ouvrez l'explorateur de topics en direct dans un autre onglet. Le même topic apparaît désormais dans l'arborescence, ce qui permet de vérifier facilement que le message est bien passé par le broker.
Si vous voulez simplement expérimenter, vous pouvez aussi pointer n'importe quel client web vers le serveur MQTT public gratuit à l'adresse wss://broker.connectmq.com:8084/mqtt. Il accepte les connexions anonymes avec n'importe quel client ID unique non vide. Utilisez un préfixe de topic unique comme connectmq/demo/k3x9/..., car tout ce qui se trouve dans l'espace public est lisible par tous : ce serveur est réservé aux tests et aux prototypes, jamais aux données de production.
Construire un client navigateur minimal avec MQTT.js
Il arrive que vous ayez besoin d'un comportement qu'un outil générique ne propose pas : un générateur de payloads personnalisé, un bouton relié à une commande précise, ou une page à confier à un technicien de terrain. MQTT.js fonctionne dans le navigateur et parle nativement WebSocket. Installez-le dans n'importe quel projet basé sur un bundler (Vite, webpack ou équivalent) avec npm install mqtt, puis utilisez le module suivant :
import mqtt from "mqtt";
const prefix = `connectmq/demo/${Math.random().toString(16).slice(2, 8)}`;
const clientId = `web-${Math.random().toString(16).slice(2, 10)}`;
const client = mqtt.connect("wss://broker.connectmq.com:8084/mqtt", {
clientId,
protocolVersion: 5,
clean: true,
connectTimeout: 10_000,
reconnectPeriod: 3_000,
// Pour votre broker privé, ajoutez les identifiants du portail :
// username: "YOUR_USERNAME",
// password: "YOUR_PASSWORD",
// et utilisez clientId: "YOUR_CLIENT_ID"
});
client.on("connect", (connack) => {
console.log("Connected, reason code:", connack.reasonCode ?? 0);
client.subscribe(`${prefix}/#`, { qos: 1 }, (err, granted) => {
if (err) return console.error("Subscribe failed:", err);
console.log("Granted:", granted);
client.publish(
`${prefix}/sensor1/telemetry`,
JSON.stringify({ temperature: 21.7, ts: Date.now() }),
{ qos: 1 }
);
});
});
client.on("message", (topic, payload) => {
console.log(`${topic} -> ${payload.toString()}`);
});
client.on("error", (err) => console.error("MQTT error:", err.message));
client.on("close", () => console.log("Connection closed"));
Ouvrez la console du navigateur : vous devriez voir le message de connexion, la QoS accordée et votre propre payload renvoyé en écho. Comme le code utilise MQTT 5, la valeur connack.reasonCode est disponible, et une connexion refusée indiquera une raison explicite plutôt qu'un échec générique.
N'envoyez jamais de secrets de production au navigateur
Tout ce que vous placez dans du JavaScript front-end est visible par l'utilisateur. Pour une page de débogage interne, c'est acceptable ; pour un tableau de bord public, ça ne l'est pas. Si de nombreuses personnes ont besoin d'un accès en lecture, émettez un identifiant dédié au tableau de bord et gardez les identifiants des appareils séparés, ou placez un petit backend entre le navigateur et le broker. Nos bonnes pratiques de sécurité MQTT détaillent la séparation des identifiants.
Dépanner les connexions d'un client MQTT en ligne
La plupart des problèmes tiennent à des détails de transport. Parcourez cette checklist dans l'ordre :
- Mauvais port. 1883 et 8883 ne fonctionnent pas depuis un navigateur. Utilisez 8084 pour
wss://. - Chemin manquant. L'URL doit se terminer par
/mqtt. - Contenu mixte. Une page HTTPS ne peut pas ouvrir
ws://. Passez àwss://. - Client ID vide. Le serveur MQTT public gratuit exige un client ID non vide ; votre broker privé exige celui qui a été émis.
- Client ID en double. Si deux onglets utilisent le même client ID, le broker déconnecte l'ancienne session chaque fois que l'autre se connecte, et les deux onglets oscillent. Donnez à chaque onglet un ID unique sur le serveur public.
- Identifiants erronés. Copiez le nom d'utilisateur et le mot de passe directement depuis le portail. Des échecs de connexion répétés peuvent déclencher le blocage de l'IP dans le cadre de la protection anti-brute-force du broker : corrigez les identifiants avant de réessayer en boucle.
- Proxy d'entreprise. Certains proxys suppriment les en-têtes d'upgrade WebSocket. Testez depuis un autre réseau pour le confirmer.
- Quota atteint. Le plan Serverless (Free) autorise jusqu'à 25 connexions. En MQTT 5, le broker peut renvoyer le reason code
0x97(quota exceeded), que le client MQTT.js expose dans son erreur.
Interpréter les symptômes
| Symptôme | Cause probable | Correction |
|---|---|---|
| Le socket s'ouvre puis se ferme sans CONNACK | Chemin /mqtt manquant |
Ajoutez le chemin |
| « Mixed content » dans la console | ws:// depuis une page HTTPS |
Utilisez wss:// sur 8084 |
| Se connecte puis se reconnecte toutes les quelques secondes | Client ID en double | Utilisez un ID unique par onglet |
| Les publications disparaissent | Topic différent ou abonnement inactif | Abonnez-vous d'abord à prefix/# |
| Not authorized | Identifiants ou client ID erronés | Recopiez-les depuis le portail |
Quand aller au-delà du navigateur
Un client web est idéal pour les vérifications interactives, mais il s'arrête à l'onglet. Lorsque vous devez journaliser du trafic pendant des heures, rejouer des messages ou scripter des tests, passez à des outils qui tournent hors du navigateur. Les exemples mosquitto_pub et mosquitto_sub couvrent les tests scriptés, l'extension VS Code de ConnectMQ affiche les reason codes CONNACK, SUBACK et PUBACK dans votre éditeur, et l'explorateur MQTT Desktop de ConnectMQ convient mieux aux longues sessions. Pour inspecter visuellement une grande hiérarchie de topics, consultez notre présentation de l'explorateur de topics MQTT.
Pour le trafic de production lui-même, la décision importante porte sur le broker, pas sur le client. Un broker MQTT managé vous fournit d'emblée des endpoints WebSocket sécurisés, des identifiants émis et un portail avec un client web et un explorateur de topics, si bien que les vérifications dans le navigateur que vous venez d'apprendre fonctionnent dès le premier jour.
Démarrer avec ConnectMQ
Créez un broker gratuit sur app.connectmq.com avec le plan Serverless (Free) ; aucune carte bancaire n'est nécessaire. Vous obtenez des identifiants, les quatre transports dont le WebSocket sécurisé, et le client intégré au navigateur utilisé dans ce guide. Pour comparer ConnectMQ à l'exploitation de votre propre serveur, lisez notre guide pour choisir un broker MQTT cloud.
Questions fréquentes
Un navigateur peut-il se connecter au port MQTT 1883 ou 8883 ?
Non. Les navigateurs ne peuvent pas ouvrir de sockets TCP bruts : ils doivent utiliser MQTT sur WebSocket. Sur ConnectMQ, cela signifie wss://<host>:8084/mqtt pour les connexions chiffrées.
Est-il sûr d'utiliser un client web MQTT en ligne avec de vrais identifiants ?
Oui, lorsque le client tourne dans une page de confiance, comme le portail de votre propre broker, via wss://. Évitez de saisir des identifiants de production sur des sites tiers inconnus, et n'intégrez jamais d'identifiants d'appareil dans du code front-end public.
Pourquoi mon client web se déconnecte-t-il sans arrêt ?
La cause la plus fréquente est deux sessions utilisant le même client ID, ce qui pousse le broker à couper la plus ancienne à chaque fois. Donnez à chaque onglet et à chaque outil un client ID unique.
Le plan gratuit inclut-il le client web ?
Oui. Le plan Serverless (Free) inclut le portail avec le client MQTT intégré au navigateur et l'explorateur de topics en direct.
Puis-je utiliser les fonctionnalités de MQTT 5 depuis le navigateur ?
Oui. MQTT.js prend en charge MQTT 5 avec protocolVersion: 5 : vous pouvez lire les reason codes et utiliser des fonctionnalités comme l'expiration des messages et les user properties depuis un navigateur.
