VS Code MQTT Erweiterung: Veröffentlichen und abonnieren, ohne den Editor zu verlassen

Eine VS Code MQTT Erweiterung beendet das ständige Fensterwechseln in der IoT-Entwicklung: Firmware in einem Fenster, ein Desktop-Client im nächsten, irgendwo dahinter ein Terminal. In diesem Leitfaden richten Sie MQTT in Visual Studio Code mit der ConnectMQ-Erweiterung ein, organisieren Test-Payloads als Dateien in Ihrem Repository und ergänzen Workspace-Tasks für wiederholbare CLI-Checks. Alles wird am kostenlosen öffentlichen MQTT-Broker broker.connectmq.com demonstriert.

Warum MQTT in den Editor holen?

Wenn Sie im Code einen Topic-Namen ändern, wollen Sie die Auswirkung sofort sehen. Wenn Sie ein JSON-Feld korrigieren, wollen Sie einen Test-Payload veröffentlichen, der die Korrektur prüft. Das direkt im Editor zu tun, hat konkrete Vorteile:

• Kürzere Feedbackschleife. Bearbeiten, flashen oder neu starten und das Topic in einem Panel neben dem Code beobachten.
• Payloads leben beim Code. Testnachrichten werden zu versionierten Dateien, die Teamkollegen wiederverwenden und reviewen können.
• Weniger Tools zu installieren. Neue Teammitglieder erhalten die Erweiterung und die Workspace-Tasks und sind startklar.
• Einheitliche Verbindungseinstellungen. Alle testen gegen dieselben Broker-Einstellungen, was „bei mir funktioniert es“-Fehler bei Topics vermeidet.

Die ConnectMQ-Erweiterung für VS Code installieren

1. Öffnen Sie die Ansicht „Extensions“ (Ctrl+Shift+X, unter macOS Cmd+Shift+X).
2. Suchen Sie nach ConnectMQ und installieren Sie die offizielle Erweiterung.
3. Öffnen Sie die Erweiterung über ihr Symbol oder über die Befehlspalette (Ctrl+Shift+P), indem Sie den Namen der Erweiterung eingeben.

Mit der Erweiterung verbinden Sie sich mit MQTT-Brokern, abonnieren Topics und veröffentlichen Test-Payloads, ohne VS Code zu verlassen. Sie funktioniert mit jedem Standard-MQTT-Broker. Die genauen Bezeichnungen können sich zwischen Versionen ändern; maßgeblich für die aktuelle Oberfläche ist die Seite der Erweiterung im Marketplace.

Mit einem Broker verbinden

Legen Sie für den öffentlichen MQTT-Broker eine Verbindung mit diesen Werten an:

Wählen Sie für Ihre Tests ein eindeutiges Topic-Präfix wie connectmq/demo/7hq2/. Der öffentliche MQTT-Broker ist für alle lesbar und nur für Tests und Prototypen gedacht; veröffentlichen Sie dort also niemals Geheimnisse, echte Kunden- oder Maschinendaten. Die öffentlichen Limits liegen bei 64 KB pro Nachricht, 10 Nachrichten pro Sekunde und Client, 10 Subscriptions pro Client und bis zu 8 Topic-Ebenen.

Mit der VS Code MQTT Erweiterung abonnieren und veröffentlichen

Bei geöffneter Verbindung:

1. Abonnieren Sie connectmq/demo/7hq2/#, um alles unter Ihrem Präfix zu sehen.
2. Veröffentlichen Sie eine Testnachricht an connectmq/demo/7hq2/device1/cmd mit dem Payload {"action": "blink", "times": 3}.
3. Prüfen Sie, ob sie in Ihrer Subscription-Ansicht ankommt, und richten Sie dann Ihr Gerät oder Ihren Service auf dieselben Topics aus.

Typische Debugging-Handgriffe, die im Editor schnell gehen:

• Jagd auf Tippfehler in Topics. Abonnieren Sie den übergeordneten Knoten mit # und vergleichen Sie die tatsächlich eintreffenden Topics mit den Strings in Ihrem Code. In einem Unified Namespace (UNS) nach ISA-95 abonnieren Sie dafür den Zweig Ihrer Linie, etwa acme/werk-muenchen/montage/linie-1/#.
• Retained-Zustand prüfen. Verbinden Sie sich neu und sehen Sie, welche Topics sofort einen Wert zeigen; diese sind retained.
• Befehle testen. Veröffentlichen Sie genau den Befehl, den Ihre App senden würde, und beobachten Sie das Antwort-Topic des Geräts.

Test-Payloads als Dateien im Repository halten

Egal, von welchem Client aus Sie veröffentlichen: Speichern Sie kanonische Testnachrichten im Repository. Eine einfache Struktur:

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

Beispiel mqtt/payloads/telemetry-out-of-range.json:

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

Payloads für Grenzfälle wie dieser (unmögliche Werte, fehlende Felder, falsche Typen) brauchen Sie, wenn Sie die Validierung in Ihrem Backend testen. Als Dateien sind sie reviewbar, und VS Code prüft die JSON-Syntax schon beim Tippen.

Workspace-Tasks für wiederholbare CLI-Checks ergänzen

Eine Erweiterung ist ideal für interaktive Arbeit. Für wiederholbare Checks ergänzen VS-Code-Tasks, die mosquitto_pub und mosquitto_sub kapseln und im integrierten Terminal laufen, sie hervorragend. Legen Sie .vscode/tasks.json an:

{
  "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": []
    }
  ]
}

Starten Sie sie über Terminal > Run Task. Mit dem Input pickString wählen Sie, welche Payload-Datei gesendet wird, und -f veröffentlicht den Dateiinhalt als Nachricht. Der letzte Task endet mit einem Fehler, wenn binnen 15 Sekunden nichts eintrifft – ein praktischer Smoke-Test nach dem Flashen der Firmware. Weitere Varianten finden Sie in den Beispielen für mosquitto_pub und mosquitto_sub. Diese Tasks setzen installierte Mosquitto-Clients voraus; MQTT-CLI-Tools vergleicht Alternativen, falls Sie einen anderen Kommandozeilen-Client bevorzugen.

Ein praxisnaher Firmware-Workflow

So greift alles ineinander, wenn Sie ein ESP32-Gerät in VS Code mit PlatformIO entwickeln:

1. Starten Sie den Task „watch demo topics“ (oder abonnieren Sie in der Erweiterung).
2. Bauen und laden Sie die Firmware hoch; öffnen Sie den seriellen Monitor in einem anderen Panel.
3. Beobachten Sie, wie die erste Telemetrie des Geräts und sein retained status erscheinen.
4. Veröffentlichen Sie cmd-blink.json an das Befehls-Topic und beobachten Sie LED und seriellen Log.
5. Veröffentlichen Sie telemetry-out-of-range.json an das Telemetrie-Topic, um zu prüfen, wie Ihr Backend mit fehlerhaften Daten umgeht.

Alle fünf Schritte erledigen Sie, ohne den Editor zu verlassen. Für die Geräteseite liefert das ESP32-MQTT-Tutorial eine Firmware, die zu dieser Topic-Struktur passt.

Zugangsdaten im Workspace sicher handhaben

Committen Sie niemals Broker-Passwörter in tasks.json oder Payload-Dateien. Zwei sicherere Muster:

• Nutzen Sie Umgebungsvariablen in Tasks: -u $MQTT_USER -P $MQTT_PASS (in Windows PowerShell $env:MQTT_USER) und setzen Sie diese in Ihrem Shell-Profil oder in einer lokalen .env-Datei, die per .gitignore ausgeschlossen ist.
• Halten Sie eine Mosquitto-Client-Konfigurationsdatei außerhalb des Repos (~/.config/mosquitto_pub), die die Zeilen für -u und -P enthält.

Für einen privaten Broker bei ConnectMQ erzeugt das Portal beim Anlegen des Brokers Benutzername, Passwort und Client ID, und Client IDs sind an diese Zugangsdaten gebunden – verwenden Sie die ausgestellte ID also sowohl in der Erweiterung als auch in den Tasks. MQTT-Sicherheit: Best Practices behandelt den Umgang mit Zugangsdaten für Geräte und Teams.

Editor, Desktop oder Browser?

Über den öffentlichen MQTT-Broker hinaus

Der kostenlose öffentliche MQTT-Broker ist ideal, um die Erweiterung auszuprobieren, aber Teamentwicklung und echte Geräte brauchen einen privaten, authentifizierten Broker. Ein verwalteter MQTT-Broker gibt jedem Entwickler und jedem Gerät eigene Zugangsdaten über TLS, ohne dass Sie Server betreiben. Wenn Sie bereit sind, Anwendungscode zu schreiben, zeigt die Übersicht der MQTT-Client-Bibliotheken die entsprechenden Publish- und Subscribe-Aufrufe in jeder wichtigen Sprache.

Starten Sie mit ConnectMQ

Installieren Sie die ConnectMQ-Erweiterung für VS Code und erstellen Sie dann unter app.connectmq.com einen privaten Broker im kostenlosen Serverless-Plan, ganz ohne Kreditkarte. Fügen Sie die generierten Zugangsdaten in eine neue Verbindung ein, und Sie testen echten Geräteverkehr in wenigen Minuten direkt aus Ihrem Editor.

Häufig gestellte Fragen

Gibt es in VS Code einen integrierten MQTT-Client?

Nein. VS Code bietet keine integrierte MQTT-Unterstützung; Sie ergänzen sie mit einer Erweiterung wie der hier beschriebenen oder mit Tasks, die Kommandozeilen-Clients im integrierten Terminal ausführen.

Funktioniert die ConnectMQ-Erweiterung für VS Code auch mit anderen Brokern?

Ja. Sie verbindet sich mit Standard-MQTT-Brokern und passt besonders gut zu Brokern, die im Portal angelegt wurden.

Kann ich MQTT-Tests automatisch aus VS Code ausführen?

Ja. Workspace-Tasks können Payload-Dateien veröffentlichen und mit mosquitto_sub -C 1 -W 15 auf erwartete Nachrichten warten; trifft nichts rechtzeitig ein, schlägt der Task fehl.

Sollte ich tasks.json mit Broker-Einstellungen committen?

Committen Sie Tasks, die den öffentlichen MQTT-Broker oder Umgebungsvariablen nutzen, aber niemals Passwörter. Halten Sie private Zugangsdaten in Umgebungsvariablen oder lokalen Konfigurationsdateien, die von Git ausgeschlossen sind.