Extension MQTT pour VS Code : publier et s'abonner sans quitter votre éditeur

Une extension MQTT pour VS Code met fin aux allers-retours incessants entre fenêtres du développement IoT : le firmware dans une fenêtre, un client desktop dans une autre, un terminal quelque part derrière. Dans ce guide, vous allez configurer MQTT dans Visual Studio Code avec l'extension ConnectMQ, organiser vos payloads de test sous forme de fichiers dans votre dépôt et ajouter des tâches d'espace de travail qui exécutent des vérifications CLI reproductibles. Tout est démontré sur le serveur MQTT public gratuit broker.connectmq.com.

Pourquoi intégrer MQTT à l'éditeur

Lorsque vous modifiez le nom d'un topic dans le code, vous voulez en voir l'effet immédiatement. Lorsque vous corrigez un champ JSON, vous voulez publier un payload de test qui met la correction à l'épreuve. Le faire dans l'éditeur offre des avantages concrets :

• Une boucle de rétroaction plus courte. Modifiez, flashez ou redémarrez, et observez le topic dans un panneau à côté du code.
• Les payloads vivent avec le code. Les messages de test deviennent des fichiers versionnés que vos collègues peuvent réutiliser et relire.
• Moins d'outils à installer. Les nouveaux membres de l'équipe récupèrent l'extension et les tâches de l'espace de travail, et ils sont opérationnels.
• Des paramètres de connexion cohérents. Tout le monde teste avec les mêmes paramètres de broker, ce qui évite les erreurs de topic du type « ça marche sur ma machine ».

Installer l'extension VS Code ConnectMQ

1. Ouvrez la vue Extensions (Ctrl+Shift+X, ou Cmd+Shift+X sous macOS).
2. Recherchez ConnectMQ et installez l'extension officielle.
3. Ouvrez l'extension depuis son icône ou via la palette de commandes (Ctrl+Shift+P) en tapant son nom.

L'extension vous permet de vous connecter à des brokers MQTT, de vous abonner à des topics et de publier des payloads de test sans quitter VS Code. Elle fonctionne avec n'importe quel broker MQTT standard. Les libellés exacts peuvent changer d'une version à l'autre ; la page de l'extension sur le Marketplace fait référence pour l'interface actuelle.

Se connecter à un broker

Créez une connexion avec ces valeurs pour le broker public de test :

Choisissez un préfixe de topic unique pour vos tests, comme connectmq/demo/7hq2/. L'espace public est lisible par tous : n'y publiez jamais de secrets ni de vraies données clients. Les limites publiques sont de 64 Ko par message, 10 messages par seconde par client, 10 abonnements par client et 8 niveaux de topic au maximum.

S'abonner et publier depuis l'extension MQTT VS Code

Une fois la connexion ouverte :

1. Abonnez-vous à connectmq/demo/7hq2/# pour voir tout ce qui se trouve sous votre préfixe.
2. Publiez un message de test sur connectmq/demo/7hq2/device1/cmd avec le payload {"action": "blink", "times": 3}.
3. Vérifiez qu'il arrive dans la vue de votre abonnement, puis pointez votre appareil ou votre service vers les mêmes topics.

Les gestes de débogage courants qui deviennent rapides dans l'éditeur :

• Traque des fautes de frappe dans les topics. Abonnez-vous au parent avec # et comparez les topics qui arrivent réellement avec les chaînes de votre code.
• Vérification de l'état retained. Reconnectez-vous et regardez quels topics affichent immédiatement une valeur : ce sont les topics retained.
• Test des commandes. Publiez exactement la commande que votre application enverrait, et observez le topic de réponse de l'appareil.

Conserver les payloads de test sous forme de fichiers dans votre dépôt

Quel que soit le client depuis lequel vous publiez, stockez les messages de test de référence dans le dépôt. Une organisation simple :

mqtt/
  payloads/
    cmd-blink.json
    cmd-reboot.json
    telemetry-normal.json
    telemetry-out-of-range.json
  README.md

Exemple de mqtt/payloads/telemetry-out-of-range.json :

{
  "deviceId": "device1",
  "temperature": 142.7,
  "humidity": -3,
  "ts": 1760600000000
}

Les payloads de cas limites comme celui-ci (valeurs impossibles, champs manquants, types erronés) sont ceux dont vous aurez besoin pour tester la validation dans votre backend. Les conserver sous forme de fichiers permet de les relire, et VS Code valide la syntaxe JSON au fil de la frappe.

Ajouter des tâches d'espace de travail pour des vérifications CLI reproductibles

Une extension est idéale pour le travail interactif. Pour les vérifications reproductibles, des tâches VS Code qui encapsulent mosquitto_pub et mosquitto_sub la complètent bien et s'exécutent dans le terminal intégré. Créez .vscode/tasks.json :

{
  "version": "2.0.0",
  "inputs": [
    {
      "id": "payloadFile",
      "type": "pickString",
      "description": "Payload to publish",
      "options": [
        "mqtt/payloads/cmd-blink.json",
        "mqtt/payloads/telemetry-normal.json",
        "mqtt/payloads/telemetry-out-of-range.json"
      ]
    }
  ],
  "tasks": [
    {
      "label": "MQTT: watch demo topics",
      "type": "shell",
      "command": "mosquitto_sub -h broker.connectmq.com -p 1883 -i vscode-watch-7hq2 -t 'connectmq/demo/7hq2/#' -v",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "MQTT: publish payload file",
      "type": "shell",
      "command": "mosquitto_pub -h broker.connectmq.com -p 1883 -i vscode-pub-7hq2 -t connectmq/demo/7hq2/device1/telemetry -q 1 -f ${input:payloadFile}",
      "problemMatcher": []
    },
    {
      "label": "MQTT: wait for one telemetry message",
      "type": "shell",
      "command": "mosquitto_sub -h broker.connectmq.com -p 1883 -i vscode-check-7hq2 -t connectmq/demo/7hq2/device1/telemetry -C 1 -W 15",
      "problemMatcher": []
    }
  ]
}

Lancez-les depuis Terminal > Run Task (Terminal > Exécuter la tâche). L'entrée pickString vous laisse choisir le fichier de payload à envoyer, et -f publie le contenu du fichier comme message. La dernière tâche se termine en erreur si rien n'arrive dans les 15 secondes, un smoke test bien pratique après avoir flashé un firmware. Pour davantage de variantes, consultez les exemples mosquitto_pub et mosquitto_sub. Ces tâches nécessitent l'installation des clients Mosquitto ; les outils CLI MQTT comparent les alternatives si vous préférez un autre client en ligne de commande.

Un workflow firmware concret

Voici comment tout s'articule lorsque vous développez un appareil ESP32 dans VS Code avec PlatformIO :

1. Lancez la tâche « watch demo topics » (ou abonnez-vous dans l'extension).
2. Compilez et téléversez le firmware ; ouvrez le moniteur série dans un autre panneau.
3. Observez l'arrivée de la première télémétrie de l'appareil et de son status retained.
4. Publiez cmd-blink.json sur le topic de commande et observez la LED et le journal série.
5. Publiez telemetry-out-of-range.json sur le topic de télémétrie pour vérifier comment votre backend gère les données invalides.

Ces cinq étapes se déroulent sans quitter l'éditeur. Côté appareil, le tutoriel MQTT ESP32 vous fournit un firmware qui correspond à cette organisation des topics.

Gérer les identifiants en toute sécurité dans un espace de travail

Ne commitez jamais de mots de passe de broker dans tasks.json ou dans les fichiers de payload. Deux approches plus sûres :

• Utilisez des variables d'environnement dans les tâches : -u $MQTT_USER -P $MQTT_PASS (sous Windows PowerShell, $env:MQTT_USER), et définissez-les dans votre profil shell ou dans un fichier .env local exclu par .gitignore.
• Conservez un fichier de configuration des clients Mosquitto hors du dépôt (~/.config/mosquitto_pub) contenant les lignes -u et -P.

Pour un broker privé sur ConnectMQ, le portail génère le nom d'utilisateur, le mot de passe et le client ID lors de la création du broker, et les client ID sont liés à ces identifiants : utilisez donc l'ID émis à la fois dans l'extension et dans les tâches. Les bonnes pratiques de sécurité MQTT traitent de la gestion des identifiants pour les appareils et les équipes.

Éditeur, desktop ou navigateur ?

Aller au-delà du broker public

Le serveur MQTT public gratuit est idéal pour essayer l'extension, mais le développement en équipe et les vrais appareils nécessitent un broker privé et authentifié. Un broker MQTT managé attribue à chaque développeur et à chaque appareil ses propres identifiants sur TLS, sans que vous ayez de serveurs à exploiter. Lorsque vous êtes prêt à écrire du code applicatif, le panorama des bibliothèques client MQTT présente les appels de publication et d'abonnement équivalents dans chaque langage majeur.

Démarrer avec ConnectMQ

Installez l'extension VS Code ConnectMQ, puis créez un broker privé sur app.connectmq.com avec le plan Serverless gratuit, sans carte bancaire. Collez les identifiants générés dans une nouvelle connexion et vous pourrez tester le trafic réel de vos appareils depuis votre éditeur en quelques minutes.

Questions fréquentes

Existe-t-il un client MQTT intégré à VS Code ?

Non. VS Code n'intègre pas de support MQTT : vous l'ajoutez avec une extension comme celle décrite ici, ou avec des tâches qui exécutent des clients en ligne de commande dans le terminal intégré.

L'extension VS Code ConnectMQ fonctionne-t-elle avec d'autres brokers ?

Oui. Elle se connecte aux brokers MQTT standard, et s'intègre naturellement avec les brokers créés dans le portail.

Peut-on exécuter automatiquement des tests MQTT depuis VS Code ?

Oui. Les tâches d'espace de travail peuvent publier des fichiers de payload et attendre les messages attendus avec mosquitto_sub -C 1 -W 15, ce qui fait échouer la tâche si rien n'arrive à temps.

Faut-il commiter tasks.json avec les paramètres du broker ?

Commitez les tâches qui utilisent le broker public ou des variables d'environnement, mais ne commitez jamais de mots de passe. Conservez les identifiants privés dans des variables d'environnement ou des fichiers de configuration locaux exclus de git.