MQTT-Broker im Browser testen (ohne Installation)

Du kannst einen MQTT-Broker in etwa zwei Minuten im Browser testen – ohne Mosquitto-Installation, ohne Python, ohne Admin-Rechte. Öffne den Online-MQTT-Client, verbinde dich über Secure WebSockets (wss), abonniere ein Topic, publiziere eine Nachricht und sieh zu, wie sie zurückkommt. Funktioniert dieser Round Trip, ist der Broker online, aus deinem Netzwerk erreichbar und routet Nachrichten.

Dieser Guide führt Schritt für Schritt durch den kompletten Test, zeigt, wie du ihn auf deinen eigenen Broker richtest und wie du einen fertigen Test mit Kollegen oder Firmware-Entwicklern teilst.

So funktioniert MQTT im Browser

Browser können keine rohen TCP-Sockets öffnen, daher kann eine Webseite nicht direkt MQTT auf Port 1883 sprechen. Stattdessen nutzt sie MQTT over WebSockets: dieselben MQTT-Pakete, verpackt in eine WebSocket-Verbindung, die als HTTP-Upgrade-Request beginnt.

Für Tests sind zwei Folgen wichtig: Der Broker muss einen WebSocket-Listener aktiviert haben (mit dem richtigen Pfad – meist /mqtt), und von einer https-Seite aus musst du wss verwenden. Der TestMQTT-Client bietet auch TCP und TLS an; weil Browser diese Sockets nicht öffnen können, leitet er sie über den TestMQTT-Server weiter. Das ist praktisch, um einen reinen TCP-Broker zu prüfen – bedenke aber, dass die Verbindung dann aus dem Netz des Relays kommt, nicht aus deinem. Hintergründe findest du unter MQTT over WebSockets.

Schritt 1 – Verbinden

1. Öffne testmqtt.com/client. Das Protokoll steht standardmäßig auf WSS, ein empfohlener Broker ist vorausgewählt.
2. Klicke auf Connect. Der Status wechselt auf verbunden, und das Log zeigt die erfolgreiche Verbindung (das CONNACK des Brokers).
3. Für jeden Tab wird eine eindeutige Client-ID (testmqtt_xxxxxxxx) erzeugt, damit sich zwei Tabs nie gegenseitig vom Broker werfen.

Um deinen eigenen Broker zu testen, wähle in der Broker-Liste Custom broker… und fülle die Einstellungen aus:

Nutzt der Broker ein selbstsigniertes Zertifikat, entscheidet der Browser über das Vertrauen, nicht die Seite. Öffne https://host:8084/ einmal in einem Tab und akzeptiere das Zertifikat – oder besser: verwende ein Zertifikat einer öffentlichen CA.

Schritt 2 – Abonnieren und publizieren

Verwende ein Topic, das sonst niemand nutzt. Auf einem geteilten Broker ist test stark frequentiert; etwas wie testmqtt/<dein-name>-<zufall>/# hält deine Nachrichten getrennt.

1. Füge unter Subscriptions testmqtt/demo-7f3a/# mit QoS 1 hinzu.
2. Setze unter Publish das Topic testmqtt/demo-7f3a/sensor, wähle die Vorlage Sensor JSON oder tippe deinen eigenen Payload und klicke auf Publish.
3. Die Nachricht erscheint in der Liste, als empfangen markiert. Ein Doppelklick zeigt alle Details: Topic, QoS, Retained-Flag, Größe und den vollständigen Payload.

Publizierst du und es erscheint nichts, prüfe, ob der Abo-Filter wirklich zum Topic passt – testmqtt/demo-7f3a/+ passt auf eine Ebene, # auf alle Ebenen darunter. Der Topic-Matcher klärt das in Sekunden, und Topics und Wildcards erklärt die Regeln.

Für einen gleichmäßigen Strom setzt du im Publish-Panel ein Wiederholungsintervall. So kannst du die Verbindung einige Minuten beobachten und Abbrüche oder Lücken erkennen.

Schritt 3 – Retained Messages und Last Will testen

Ein ordentlicher Broker-Test geht über eine einzelne Nachricht hinaus:

• Retained: Publiziere auf testmqtt/demo-7f3a/status mit aktivem retain. Trenne die Verbindung, verbinde dich neu und abonniere erneut – der Broker muss den letzten gespeicherten Wert sofort ausliefern. Zum Löschen publizierst du einen leeren Retained-Payload – oder nutzt Clear retained message in den Nachrichtendetails.
• Last Will: Lege unter Settings ein Will-Topic wie testmqtt/demo-7f3a/lwt mit dem Payload offline fest. Öffne einen zweiten Tab, der dieses Topic abonniert, und schließe dann den ersten Tab, ohne die Verbindung zu trennen. Nach etwa dem 1,5-Fachen des Keep-Alive-Intervalls sollte der Broker den Will publizieren. Ein sauberes Disconnect löst ihn nicht aus – das ist korrektes Verhalten.
• MQTT 5: Stelle die Protokollversion auf 5 und verbinde neu. Unterstützt der Broker nur 3.1.1, bekommst du einen CONNACK-Fehler wie Unsupported Protocol Version; das Reason-Codes-Tool erklärt jeden Code.

Schritt 4 – Mit einem anderen Client gegenprüfen

Ein Browser-Test beweist, dass der WebSocket-Listener funktioniert. Geräte nutzen meist TCP oder TLS – schließe also den Kreis: Lass den Browser abonniert und publiziere aus einem 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

Taucht die Nachricht im Browser auf, teilen sich beide Listener einen Broker und das Routing funktioniert über Transporte hinweg. Funktioniert TCP, aber der Browser nicht – oder umgekehrt –, liegt das Problem am Listener oder Netzwerkpfad eines Transports, nicht am Broker insgesamt.

Einen fertigen Test teilen

Wenn du mit jemand anderem debuggst – einem Firmware-Entwickler, einem Kunden, einer Kollegin –, schick einen Link, der den Client direkt mit dem richtigen Endpoint verbunden und auf das richtige Topic abonniert öffnet:

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

url setzt Protokoll, Host, Port und Pfad und verbindet automatisch; topic setzt das Abo (# als %23 kodieren). Ihr seht beide dieselben Nachrichten live – deutlich schneller als Log-Screenshots hin- und herzuschicken. Zugangsdaten sind nie Teil des Links; jede Person gibt ihre eigenen ein.

Wenn der Browser-Test fehlschlägt

Die Entwicklertools deines Browsers zeigen die rohen WebSocket-Frames unter Network → WS – oft der schnellste Weg zu sehen, ob CONNECT rausging und was zurückkam. MQTT mit Chrome DevTools debuggen zeigt, wie es geht.

Browser-Testclient öffnen

Der Test im Browser ist der schnellste erste Check, den du machen kannst: nichts zu installieren, läuft auf jedem Rechner, und ein geteilter Link bringt alle dazu, dasselbe Topic live zu sehen. Sobald der Round Trip im Browser klappt, prüfst du per TCP oder TLS gegen – und weißt, dass Broker, Listener und Netzwerkpfad in Ordnung sind.

Häufig gestellte Fragen