MQTT Web Client online: Broker im Browser testen

Q: Kann ich MQTT-5-Funktionen aus dem Browser nutzen?

Ja. MQTT.js unterstützt MQTT 5 mit protocolVersion: 5, sodass Sie im Browser Reason Codes auslesen und Funktionen wie Message Expiry und User Properties nutzen können.

Mit einem MQTT Web Client online verbinden Sie sich mit einem Broker, abonnieren Topics und publizieren Testnachrichten direkt aus einem Browser-Tab, ohne etwas zu installieren. In diesem Leitfaden erfahren Sie, wie Browser-Clients einen Broker tatsächlich erreichen, führen eine vollständige Testsitzung mit dem im ConnectMQ-Portal integrierten Client durch und bauen einen winzigen eigenen Browser-Client für die Fälle, die ein gehostetes Tool nicht abdeckt.

Warum einen MQTT Web Client online nutzen?

Kommandozeilen-Tools wie mosquitto_sub sind hervorragend, aber nicht immer verfügbar. Vielleicht sitzen Sie an einem abgeriegelten Firmen-Laptop, helfen einem Kollegen in einem Videocall oder prüfen bei der Inbetriebnahme einer Maschine in der Werkshalle vom Tablet aus, ob die Daten der SPS ankommen. Ein browserbasierter Client erspart die Einrichtung: Seite öffnen, Host und Zugangsdaten eingeben, und schon sehen Sie Live-Verkehr.

Typische Aufgaben für einen Web-Client:

Bestätigen, dass ein neues Gerät tatsächlich publiziert, und zwar auf dem erwarteten Topic.
Einen einmaligen Befehl wie ein Konfigurationsupdate oder das Schalten eines Relais an ein Testgerät senden.
Retained Messages nach einem Deployment prüfen.
Einer nicht technischen Ansprechperson zeigen, dass Daten fließen, ohne ein Terminal erklären zu müssen.
Einen Fehlerbericht mit genau dem Payload reproduzieren, den ein Kunde gesendet hat.

Ein Web-Client ist ein Werkzeug zum Testen und Debuggen, kein Produktionskonsument. Halten Sie dauerhaft laufende Integrationen in einem richtigen Service und nutzen Sie den Browser für interaktive Arbeit.

Wie sich Browser-MQTT-Clients verbinden

Browser können keine rohen TCP-Sockets öffnen, daher kann ein Browser-Client die klassischen MQTT-Ports 1883 oder 8883 nicht nutzen. Stattdessen tunnelt er MQTT in einer WebSocket-Verbindung. Der Broker muss einen WebSocket-Listener bereitstellen, und der Client muss sowohl den Port als auch den Pfad kennen. Den vollständigen Hintergrund liefert unser Leitfaden zu MQTT über WebSocket.

ConnectMQ stellt auf jedem Broker diese Listener bereit:

Transport	Port	URL-Form	Aus dem Browser nutzbar?
MQTT über TCP	1883	`mqtt://host:1883`	Nein
MQTT über TLS	8883	`mqtts://host:8883`	Nein
WebSocket	8083	`ws://host:8083/mqtt`	Nur von unverschlüsselten HTTP-Seiten
Secure WebSocket	8084	`wss://host:8084/mqtt`	Ja, empfohlen

Zwei Browser-Regeln erklären die meisten fehlgeschlagenen Verbindungen. Erstens darf eine über HTTPS geladene Seite keinen unverschlüsselten ws://-Socket öffnen; der Browser blockiert das als Mixed Content. Zweitens kommt es auf den Pfad an: Eine Verbindung zu wss://broker.connectmq.com:8084 ohne /mqtt erreicht zwar den Server, schließt den MQTT-Handshake aber nie ab. Nutzen Sie Secure WebSocket mit dem vollständigen Pfad, und beide Probleme verschwinden. Der Broker liefert ein Let's-Encrypt-Zertifikat aus, dem Browser ohne zusätzliche Konfiguration vertrauen.

Schritt für Schritt: einen Broker mit dem ConnectMQ-Web-Client testen

Der schnellste Weg ist der im Portal integrierte MQTT-Client, weil er die Endpunkte und Zugangsdaten Ihres Brokers bereits kennt.

Registrieren Sie sich unter app.connectmq.com, wählen Sie den kostenlosen Serverless-Plan und legen Sie einen Broker an. Das Portal generiert Benutzername, Passwort und Client ID für Sie.
Öffnen Sie im Portal den MQTT-Client im Browser. Die Verbindungsdaten Ihres Brokers stehen direkt daneben zur Verfügung.
Verbinden Sie sich. Ein erfolgreiches CONNACK bedeutet, dass Zugangsdaten und Client ID akzeptiert wurden. Denken Sie daran, dass Client IDs an die ausgegebenen Zugangsdaten gebunden sind; verwenden Sie also die Client ID aus dem Portal, statt eine eigene zu erfinden.
Abonnieren Sie einen Wildcard-Filter für Ihr Projekt, zum Beispiel factory1/#, um alles unterhalb dieser Wurzel zu sehen.
Publizieren Sie einen Test-Payload wie {"temperature": 21.7} auf factory1/line1/sensor1/telemetry mit QoS 1. Er sollte sofort im Subscription-Bereich erscheinen.
Publizieren Sie noch einmal mit gesetztem Retain-Flag, trennen Sie die Verbindung, verbinden Sie sich neu und abonnieren Sie erneut. Der Retained-Wert sollte sofort ankommen, was beweist, dass der Broker den letzten Wert für dieses Topic speichert.
Öffnen Sie den Live-Topic-Explorer in einem weiteren Tab. Dasselbe Topic erscheint nun im Baum, eine bequeme Gegenprobe, dass die Nachricht wirklich durch den Broker gelaufen ist.

Wenn Sie nur experimentieren möchten, können Sie jeden Web-Client auch auf den öffentlichen MQTT-Broker unter wss://broker.connectmq.com:8084/mqtt richten; er ist für Tests und Prototypen gedacht, nicht für Produktionsdaten. Er akzeptiert anonyme Verbindungen mit jeder nicht leeren, eindeutigen Client ID. Verwenden Sie ein eindeutiges Topic-Präfix wie connectmq/demo/k3x9/..., denn alles im öffentlichen Bereich ist für jeden lesbar.

Einen minimalen Browser-Client mit MQTT.js bauen

Manchmal brauchen Sie Verhalten, das ein generisches Tool nicht bietet: einen eigenen Payload-Generator, einen Button für einen bestimmten Befehl oder eine Seite, die Sie einem Servicetechniker geben können. MQTT.js läuft im Browser und spricht WebSockets nativ. Installieren Sie es in einem beliebigen Bundler-Projekt (Vite, webpack o. Ä.) mit npm install mqtt und verwenden Sie dann folgendes Modul:

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,
  // Für Ihren privaten Broker die Zugangsdaten aus dem Portal ergänzen:
  // username: "YOUR_USERNAME",
  // password: "YOUR_PASSWORD",
  // und clientId: "YOUR_CLIENT_ID" verwenden
});

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"));

Öffnen Sie die Browser-Konsole: Sie sollten die Verbindungsmeldung, die gewährte QoS und Ihren eigenen Payload als Echo sehen. Da der Code MQTT 5 verwendet, steht der Wert connack.reasonCode zur Verfügung, und eine abgelehnte Verbindung meldet einen aussagekräftigen Grund statt eines generischen Fehlers.

Niemals Produktions-Secrets an den Browser ausliefern

Alles, was Sie in Frontend-JavaScript ablegen, ist für den Nutzer sichtbar. Für eine interne Debugging-Seite ist das akzeptabel, für ein öffentliches Dashboard nicht. Wenn viele Personen Lesezugriff benötigen, stellen Sie für das Dashboard eigene Zugangsdaten aus und halten Sie Geräte-Zugangsdaten getrennt, oder schalten Sie ein kleines Backend zwischen Browser und Broker. Unsere MQTT-Sicherheit: Best Practices behandeln die Trennung von Zugangsdaten ausführlicher.

Fehlerbehebung bei Verbindungen von Online-MQTT-Clients

Die meisten Probleme liegen in Transportdetails. Gehen Sie diese Checkliste der Reihe nach durch:

Falscher Port. 1883 und 8883 funktionieren im Browser nicht. Nutzen Sie 8084 für wss://.
Fehlender Pfad. Die URL muss auf /mqtt enden.
Mixed Content. Eine HTTPS-Seite kann kein ws:// öffnen. Wechseln Sie zu wss://.
Leere Client ID. Der öffentliche Broker verlangt eine nicht leere Client ID, Ihr privater Broker die ausgegebene.
Doppelte Client ID. Wenn zwei Tabs dieselbe Client ID verwenden, trennt der Broker die ältere Sitzung jedes Mal, wenn sich der andere verbindet, und beide Tabs flattern. Geben Sie auf dem öffentlichen Broker jedem Tab eine eindeutige ID.
Falsche Zugangsdaten. Kopieren Sie Benutzername und Passwort direkt aus dem Portal. Wiederholt fehlgeschlagene Logins können im Rahmen des Brute-Force-Schutzes des Brokers eine IP-Sperre auslösen; korrigieren Sie die Zugangsdaten also, bevor Sie es in einer Schleife erneut versuchen.
Firmen-Proxy. Manche Proxys entfernen WebSocket-Upgrade-Header. Testen Sie zur Bestätigung aus einem anderen Netz.
Quote erreicht. Der kostenlose Serverless-Plan erlaubt bis zu 25 Verbindungen. Mit MQTT 5 kann der Broker den Reason Code 0x97 (Quota exceeded) zurückgeben, den der MQTT.js-Client in seinem Fehler ausgibt.

Die Symptome deuten

Symptom	Wahrscheinliche Ursache	Lösung
Socket öffnet sich und schließt ohne CONNACK	Fehlender Pfad `/mqtt`	Pfad ergänzen
„Mixed content" in der Konsole	`ws://` von einer HTTPS-Seite	`wss://` auf 8084 verwenden
Verbindet sich und verbindet sich alle paar Sekunden neu	Doppelte Client ID	Eindeutige ID pro Tab verwenden
Publizierte Nachrichten verschwinden	Topic stimmt nicht oder Subscription nicht aktiv	Zuerst `prefix/#` abonnieren
Nicht autorisiert	Falsche Zugangsdaten oder Client ID	Erneut aus dem Portal kopieren

Wann Sie über den Browser hinausgehen sollten

Ein Web-Client ist ideal für interaktive Prüfungen, endet aber am Tab. Wenn Sie Verkehr stundenlang protokollieren, Nachrichten erneut abspielen oder Tests skripten müssen, wechseln Sie zu Tools, die außerhalb des Browsers laufen. Die Beispiele für mosquitto_pub und mosquitto_sub decken skriptbasiertes Testen ab, die ConnectMQ-Erweiterung für VS Code zeigt Reason Codes von CONNACK, SUBACK und PUBACK direkt in Ihrem Editor, und der ConnectMQ-Desktop-MQTT-Explorer eignet sich besser für lange Sitzungen. Um eine große Topic-Hierarchie visuell zu untersuchen, lesen Sie unsere Anleitung zum MQTT Topic Browser.

Für den Produktionsverkehr selbst ist die wichtige Entscheidung der Broker, nicht der Client. Ein verwalteter MQTT-Broker bietet Ihnen von Haus aus Secure-WebSocket-Endpunkte, ausgegebene Zugangsdaten und ein Portal mit Web-Client und Topic-Explorer, sodass die eben gelernten Browser-Prüfungen vom ersten Tag an funktionieren.

Starten Sie mit ConnectMQ

Legen Sie unter app.connectmq.com einen kostenlosen Broker im Serverless-Plan an; eine Kreditkarte ist nicht nötig. Sie erhalten Zugangsdaten, alle vier Transporte einschließlich Secure WebSockets und den Browser-Client aus diesem Leitfaden. Wie sich ConnectMQ im Vergleich zum Betrieb eines eigenen Servers schlägt, lesen Sie in unserem Leitfaden zur Wahl eines Cloud-MQTT-Brokers.

Häufig gestellte Fragen

Kann sich ein Browser mit MQTT-Port 1883 oder 8883 verbinden?

Nein. Browser können keine rohen TCP-Sockets öffnen und müssen daher MQTT über WebSocket nutzen. Bei ConnectMQ bedeutet das wss://<host>:8084/mqtt für verschlüsselte Verbindungen.

Ist es sicher, einen Online-MQTT-Web-Client mit echten Zugangsdaten zu verwenden?

Ja, wenn der Client in einer vertrauenswürdigen Seite läuft, etwa im Portal Ihres eigenen Brokers, und über wss:// verbindet. Geben Sie Produktions-Zugangsdaten nicht in unbekannte Websites Dritter ein und betten Sie niemals Geräte-Zugangsdaten in öffentlichen Frontend-Code ein.

Warum trennt sich mein Web-Client ständig?

Die häufigste Ursache sind zwei Sitzungen mit derselben Client ID, wodurch der Broker jedes Mal die ältere trennt. Geben Sie jedem Tab und jedem Tool eine eindeutige Client ID.

Enthält der kostenlose Plan den Web-Client?

Ja. Der kostenlose Serverless-Plan umfasst das Portal mit dem MQTT-Client im Browser und dem Live-Topic-Explorer.

Kann ich MQTT-5-Funktionen aus dem Browser nutzen?

Ja. MQTT.js unterstützt MQTT 5 mit protocolVersion: 5, sodass Sie im Browser Reason Codes auslesen und Funktionen wie Message Expiry und User Properties nutzen können.

Online-MQTT-Web-Client: jeden Broker direkt im Browser testen