BROWSER MQTT-ANLEITUNG
MQTT, WebSocket oder MQTT über WSS? Wählen Sie nach Verantwortung
Wählen Sie MQTT, wenn Clients Broker-vermittelte Topics, QoS und Session-Verhalten benötigen. Nutzen Sie natives WebSocket für einen anwendungsspezifischen Browser-zu-Server-Kanal. Verwenden Sie MQTT über WSS, wenn Browser am selben MQTT-Topic- und Richtlinienmodell wie Ihre Geräte teilnehmen sollen.
Wählen Sie das kleinste Komplettmodell
Entscheiden Sie sich für die Messaging-Verantwortung, die das Produkt benötigt, und nicht für die Tatsache, dass jede Option eine Verbindung offen halten kann.
Wählen Sie natives WebSocket
MQTT über WSS verwenden
Protokollebenen und Zuständigkeiten klar trennen
MQTT über WSS kombiniert Protokolle; Es ersetzt MQTT nicht durch WebSocket und überträgt die Anwendungsverantwortung nicht auf den Transport.
MQTT über TLS/TCP
Für native Geräte und Dienste, die TCP-Sockets öffnen können.
- Anwendungs-Payload
- MQTT-Topics, QoS, Sitzung
- TLS → TCP
Nativer WebSocket
Für einen benutzerdefinierten Browser-zu-Anwendungsserver-Kanal.
- Anwendungsdefinierte Nachrichten und Wiederherstellung
- WebSocket-Rahmen
- TLS → TCP
MQTT über WSS
Für Browser-MQTT-Clients, die eine Verbindung zu einem Broker-Listener herstellen.
- Anwendungs-Payload
- MQTT-Topics, QoS, Sitzung
- WebSocket-Rahmen
- TLS → TCP
| Verantwortung | MQTT | WebSocket | MQTT over WSS |
|---|---|---|---|
| Nachrichtensemantik | Broker-Topics, QoS, aufbewahrte Nachrichten und Sitzungen | Die Anwendung definiert Routing, Bestätigungen, Wiedergabe und Nachrichtenbedeutung | Die Semantik von MQTT bleibt innerhalb von WebSocket-Frames unverändert |
| Identität und Autorisierung | Broker Clientidentität und Publish/Subscribe-Richtlinie | Anwendungssitzung plus Autorisierung für jede benutzerdefinierte Nachrichtenaktion | TLS schützt den Transport; Es gelten weiterhin die Brokeridentitäts- und Topic-Richtlinien |
| Wiederherstellung trennen | Client-Wiederverbindung plus explizites sauberes oder dauerhaftes MQTT-Sitzungsverhalten | Die Anwendung stellt den Status, die Abonnements und die Behandlung verpasster Nachrichten neu her | Stellen Sie zuerst WSS wieder her, verbinden Sie dann MQTT erneut und setzen Sie die Abonnements fort oder erstellen Sie sie neu |
Führen Sie einen MQTT.js-Loopback mit fester Sandbox aus
Dieses Beispiel ist bewusst an die öffentliche RunMQTT-Sandbox gebunden. Ersetzen Sie nur die beiden Sandbox-Platzhalter durch die aktuellen Zugangsdaten auf der Seite „Public Broker“.
import mqtt from "mqtt";
const endpoint = "wss://public.runmqtt.com/mqtt";
const suffix = crypto.randomUUID().replaceAll("-", "");
const topic = `runmqtt/sandbox/${suffix}/loopback`;
const payload = JSON.stringify({
source: "runmqtt-wss-guide",
value: 42,
});
const client = mqtt.connect(endpoint, {
clientId: `runmqtt-guide-${suffix}`,
username: "<PUBLIC_SANDBOX_USERNAME>",
password: "<PUBLIC_SANDBOX_PASSWORD>",
clean: true,
connectTimeout: 10_000,
reconnectPeriod: 3_000,
protocolVersion: 4,
});
client.on("connect", async () => {
await client.subscribeAsync(topic, { qos: 1 });
await client.publishAsync(topic, payload, { qos: 1 });
});
client.on("message", (_topic, _payload) => {
console.info("Synthetic QoS 1 loopback received");
});
client.on("reconnect", () => console.info("Reconnecting"));
client.on("close", () => console.info("Disconnected"));
client.on("error", () => console.error("MQTT connection failed"));
export async function disconnect() {
await client.endAsync();
}
window.addEventListener("pagehide", () => client.end(true));Behandeln Sie die Verbindung, die erneute Verbindung und den MQTT-Status separat
Ein erfolgreiches WebSocket-Upgrade ist lediglich die Transportvoraussetzung. Der Client führt weiterhin MQTT CONNECT aus und stellt den beabsichtigten Abonnementstatus wieder her.
- 01
Verbinden Sie WSS und dann MQTT
Validieren Sie das öffentliche Zertifikat TLS, aktualisieren Sie /mqtt auf WebSocket, authentifizieren Sie MQTT und warten Sie auf das Verbindungsereignis MQTT, bevor Sie ein Abonnement oder eine Veröffentlichung durchführen.
- 02
Verbindung und gewünschten Zustand wiederherstellen
Nach einem unerwarteten Abschluss öffnet MQTT.js einen neuen WSS-Kanal und sendet erneut MQTT CONNECT. Mit „clean: true“ erneut vom Connect-Handler abonnieren.
- 03
Trennen Sie die Verbindung absichtlich
Beenden Sie den MQTT-Client, wenn die Seite verlassen wird oder der Benutzer die Sitzung beendet. Lassen Sie keine Reconnect-Timer oder versteckten Abonnements laufen.
Reproduzierbare RunMQTT-Sandbox-Beweise
Verifiziert am 10.08.2026 mit MQTT.js 5.15.2 unter Verwendung von MQTT 3.1.1 und aktivierter Zertifikatsvalidierung. Diese Prüfungen stellen die Kompatibilität für die dokumentierte Sandbox her; Sie stellen kein Leistungsergebnis oder SLA dar.
| Verifizierungsprüfung | Ergebnis | Umfang |
|---|---|---|
| Browser WSS geöffnet | Chromium 142, Firefox 150 und WebKit 26.4 öffneten den festen WSS-Endpunkt, ohne die TLS-Validierung zu umgehen. | wss://public.runmqtt.com/mqtt |
| MQTT-QoS-1-Roundtrip | Veröffentlichen und abonnieren Sie Loopbacks, die über einfache MQTT 1883, MQTT TLS 8883 und WSS 443 abgeschlossen wurden. | Aktuelle Zugangsdaten des öffentlichen Brokers und zufällige synthetische Topics |
| Integritätsprüfung | Für die fünfminütige Integritätsprüfung müssen Cloudflare und Google DoH den öffentlichen Hostnamen in die Relay-IP auflösen. Anschließend werden Zertifikatsnamen, Relay-Listener, Hostnamensübereinstimmung und ein echtes /mqtt WebSocket-Upgrade validiert. | Bereitstellungsprüfung alle fünf Minuten |
Wählen Sie Transport nach Laufzeit und Nachrichtenvertrag
Das gleiche Produkt kann MQTT über TLS für Geräte, MQTT über WSS für eine Browserkonsole und natives WebSocket für eine separate anwendungsspezifische Live-Benutzeroberfläche verwenden.
| Szenario | Bevorzugen | Grund | Produktionsgrenze |
|---|---|---|---|
| Browser MQTT-Konsole | MQTT über WSS | Der Browser verknüpft dieselben Topics, QoS, und dasselbe Broker-Richtlinienmodell wie MQTT-Clients. | Verwenden Sie benutzerbezogene oder kurzlebige Anmeldeinformationen. Versenden Sie niemals ein gemeinsames Produktionsgeheimnis im Frontend-Code. |
| Mobilfunk-Client | MQTT über TLS für native Apps; MQTT über WSS für Browser-Laufzeiten | Wählen Sie den Transport aus, den die Laufzeit unterstützt, und behalten Sie dabei das MQTT-Wiederverbindungs- und Topic-Verhalten bei. | Testen Sie echte Netzwerkübergänge und definieren Sie explizit Backoff-, Sitzungs- und Duplikatbehandlung. |
| Gerätetelemetrie | MQTT über TLS/TCP | Native Geräte benötigen normalerweise nicht die WebSocket-Framing-Schicht, um vom Broker weitergeleitete Telemetriedaten zu veröffentlichen. | Geben Sie jedem Gerät eine eindeutige Identität und eine Veröffentlichungsrichtlinie mit der geringsten Berechtigung. |
| Command-Downlink | MQTT | Broker-Abonnements, QoS und Sitzungsoptionen drücken die Bereitstellung von Gerätebefehlen direkter aus als ein benutzerdefinierter Socket-Kanal. | Autorisieren Sie Befehls-Topics separat und entwerfen Sie eine idempotente Befehlsverarbeitung. |
MQTT vs. WebSocket FAQ
Handelt es sich bei MQTT und WebSocket um denselben Protokolltyp?
Nein. MQTT definiert die Messaging-Semantik auf Anwendungsebene. WebSocket stellt einen dauerhaften bidirektionalen Kanal bereit. MQTT kann WebSocket als einen seiner Transporte verwenden.
Kann ein Browser eine direkte Verbindung zu MQTT herstellen?
Ein Browser kann keinen beliebigen rohen TCP-Socket öffnen. Ein Browser-MQTT-Client stellt eine Verbindung zu einem Broker-WebSocket-Listener her, normalerweise über WSS, und tauscht MQTT-Pakete innerhalb von WebSocket-Frames aus.
Stellt die erneute Verbindung von WSS MQTT-Abonnements automatisch wieder her?
Nicht von alleine. WebSocket stellt nur den Kanal wieder her. Der MQTT-Client muss die Verbindung wiederherstellen und sich dann auf eine wiederaufgenommene MQTT-Sitzung verlassen oder sich erneut anmelden. Das Sandbox-Beispiel verwendet eine saubere Sitzung und abonniert bei jeder Verbindung.
Ist WebSocket schneller als MQTT?
Es gibt keine verantwortungsvolle, universelle Antwort. Vergleichen Sie den gesamten Anwendungspfad, einschließlich Routing, Autorisierung, Zustellung, Wiederherstellung und das Netzwerk, in dem die Anwendung ausgeführt wird. Dieser Leitfaden erhebt keinen Anspruch auf Leistung oder SLA.
Implementieren Sie die nächste Grenze
Probieren Sie die feste Sandbox aus und vertiefen Sie dann die MQTT-Grundlagen, die Produktionssicherheit und die Back-End-Event-Streaming-Grenze.
Öffentlicher Broker WSS-Tester
Führen Sie einen synthetischen Loopback ohne Eingabe für den verifizierten festen Endpunkt aus.
MQTT-Tutorial
Erstellen Sie einen vollständigen Publish-Subscribe-Ablauf mit QoS und Topics.
MQTT Sicherheit
Schützen Sie TCP- und WSS-Clients mit TLS, eindeutiger Identität und Topic-Richtlinie.
MQTT gegen Kafka
Trennen Sie Gerätenachrichten vom dauerhaften Backend-Ereignis-Streaming.