MQTT Websocket Client Connectivity

Text geknüpft
Einleitung

Diese Anleitung bietet detaillierte, Schritt für Schritt Anleitung zum Verbinden von Kunden mit unserenMQTT Broker(CrysqlMQ) oder einen Broker Ihrer Wahl mit JavaScript. Sie deckt die notwendigen Voraussetzungen und Einrichtung, führen Sie durch den Prozess der Schaffung einer zuverlässigen Verbindung. Du wirst lernen, wie zur Implementierung von Authentifizierung, Verwaltung von Abonnements und zur Bearbeitung von Nachrichtenaustauschen. mit die Hilfe dieser Dokumentation, Sie werden in der Lage sein, nahtlos JavaScript Web zu integrieren Kunden mit dem MQTT Broker für eine effiziente Datenkommunikation.

Voraussetzungen

Dependance Installation

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js">/script>

Anschluss an MQTT Broker

Verwenden Sie den folgenden Code, um den Client über Websocket zu verbinden.

Definieren Sie den Macro ADDRESS mit der Verbindung von MQTT Broker Parameter.

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);

// MQTT Client Optionen konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws' // WebSocket Protokoll
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Ein Thema eintragen
client.subscribe('cmq/topic', (err) => {
wenn (!err)
consult.log('Bezeichnet zum Thema');

// Mitteilung veröffentlichen
client.publish('cmq/topic', 'Hello CMQ', { qos: 2, behalten: true }, (err) =
wenn (!err)
consol.log('Message veröffentlicht.');
}
})
}
})
})

MQTT 5

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client Optionen für MQTT v5 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws', // WebSocket Protokoll
ProtokollVersion: 5, // MQTT Version 5
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
Eigenschaften: {\cHFFFF}
Sitzung ExpiryInterval: 60, // Sitzungsablaufintervall in Sekunden einstellen
},
};

// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

// Client-Events ausschalten
client.on('connect', (connack) =>
Konsole.log('Connected erfolgreich mit MQTT Broker', connack);

// Beschreiben Sie ein Thema mit MQTT v5 Eigenschaften
const topic = 'cmq/topic';
document.getElementById('topic').textContent = Thema;
client.subscribe(topic, { qos: 2, nl: true, rap: true, rh: 0 }, (err, erteilt) => {\cHFFFF}
wenn (!err)
consol.log('Bezeichnet zum Thema ', erteilt);
document.getElementById('subscriptionStatus').textContent = 'Subscribed zum Thema.

// Eine Nachricht mit MQTT v5 Eigenschaften veröffentlichen
const message = 'Hello CMQ';
client.publish(topic, message, { qos: 2, behalten: true, eigenschaften: {\cHFFFF} messageExpiryInterval: 60 }, (err) => {\cHFFFF}
wenn (!err)
consol.log('Message veröffentlicht.');
document.getElementById('publishedMessage').textContent = message;
}
})
}
})
})

MQTT über Secure WebSocket

Verwenden Sie den folgenden Code, um sicher mit MQTT Broker zu verbinden über TLS.

Definieren Sie den Macro ADDRESS mit der Verbindung von MQTT Broker Parameter.

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client-Optionen mit TLS-Einstellungen konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Port: 11443,
Protokoll: 'wss', // Secure WebSocket Protokoll
Ablehnung Unautorisiert: true, // Optional, ablehnen nicht autorisiert Zertifikate
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
// Fügen Sie zusätzliche TLS-Optionen bei Bedarf hinzu
cert: IhrClient Cert, // Kundenzertifikat
Schlüssel: Ihr ClientKey, // Clientschlüssel
ca.: IhrCaCert // CA Zertifikat
};

// MQTT-Client erstellen
const client = mqt.connect(`wss://${options.hostname}:${options.port}/mqt`, Optionen;

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Ein Thema eintragen
const topic = 'cmq/topic';
document.getElementById('topic').textContent = Thema;
client.subscribe(topic, (err) => {
wenn (!err)
consult.log('Bezeichnet zum Thema');
document.getElementById('subscriptionStatus').textContent = 'Subscribed zum Thema.

// Mitteilung veröffentlichen
const message = 'Hello CMQ';
client.publish(topic, message, { qos: 2, behalten: true }, (err) => {\cHFFFF}
wenn (!err)
consol.log('Message veröffentlicht.');
document.getElementById('publishedMessage').textContent = message;
}
})
}
})
})

Setzen Sie TLS-Parameter vor dem Aufruf der MQTTClient_connect an den Client mit dem mQTT Broker sicher über TLS verbinden.

Wenn der MQTT Broker in einem vertrauenswürdigen Server und dem Serververifikation ist nicht erforderlich, der folgende Code kann verwendet werden, um TLS einzustellen Optionen:

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client-Optionen mit TLS-Einstellungen konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Port: 11443,
Protokoll: 'wss', // Secure WebSocket Protokoll
Ablehnung Unautorisiert: falsch, // Serverzertifikat deaktivieren Überprüfung
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
// Fügen Sie zusätzliche TLS-Optionen bei Bedarf hinzu
// cert: IhrClient Cert, // Kundenzertifikat
// Schlüssel: Ihr ClientKey, // Client Schlüssel
// ca.: IhrCaCert // CA-Zertifikat
};

// MQTT-Client erstellen
const client = mqt.connect(`wss://${options.hostname}:${options.port}/mqt`, Optionen;

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Ein Thema eintragen
const topic = 'cmq/topic';
document.getElementById('topic').textContent = Thema;
client.subscribe(topic, (err) => {
wenn (!err)
consult.log('Bezeichnet zum Thema');
document.getElementById('subscriptionStatus').textContent = 'Subscribed zum Thema.

// Mitteilung veröffentlichen
const message = 'Hello CMQ';
client.publish(topic, message, { qos: 2, behalten: true }, (err) => {\cHFFFF}
wenn (!err)
consol.log('Message veröffentlicht.');
document.getElementById('publishedMessage').textContent = message;
}
})
}
})
})

Wenn der MQTT Broker Serverzertifikat aus einer Trusted CA, dann kann das Server-Zertifikat mit:

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// Laden Sie das CA-Zertifikat (die CA-Zertifizierung ist verfügbar als einen String oder eine URL)
c) Cert = `-----BEGIN-ZERTIFIZATE-----
MIIDdzCCAl+gAwIBAgIEUzJ7kDANBgkqhkiG9w0BAQsFADBoMQSwCQYDVQGEwJV
UzERMA8GA1UECAwIU29tZS1TdGF0ZTEUMBIGA1UEBWLU29tZS1DaXR5MRMwEQYD
VQQKDApJbnRlcm5ldCBQTETMBEGA1UEAwKQ2VydGlmaWNhdGUwHhcNMTkxMjMx
MDAwMDAwWhcNMjAxMjMwMDAwMDAwWjBoMQSwCQYDQGEwJVUzERMA8GA1UECAwI
U29tZS1TdGF0ZTEUMBIGAA1
dCBDQTETMBEGABE
DwAwggEKAoIBAQC2Xk1eRm94bw3hm8+K0H5/4eU9G8hb8CQXj0FGONMSY0zg/P4n
M6t2+/GQbj3FfAg/SwQ5lH9qO7CxTn/ANX4gO3KO9m0pjHfDkSx7hPlZoLR3oQz
73VcxltoHtUKg4+QAcI5nwb+byA3f1EOn+0V5d41rmlVxRk1dKl7FA8wN2zO7aLO
+F1QnIvDC/d9EjGqcmY8c9y4+fqzgH+iQFPq5APEL5Ead/nk5a8dRfd6Wb8GV6lg
o8pI0sMlS8HdLMjpCewMI7Nhu0a5ZOnC+S7a3YB2UO4jXg3ADm5nLqG6rbEpD1DE
A4NBoXBx+RhfdMfyPTNVhd8XtavXUkmyEBKbAgMBAAGjITAfMB0GA1UdDgQWBBQI
1hNfdp9a6f5Jm9peGr+m4iJ+IzANBgkqhkiG9w0BAQAOCAQEADJc2ddg4TGcB
Z7ViZ5 UlfI02KFA+E4xmdvZOE+aNkqZHYt21ou9lnzZoLbdK+9woO4F/8i0HBZ0h
MDhjeHGkZT+yxT1uWh6ldZggVDF6X/8zWy8RmG/k+bQTeTiU/wLfGPN0bsfvmFXV
SqE/O0rbc1LCaRIyRoEUfW/hmkf9UjYdW+FOcY5VfJm+GpLPOZLrAL3QAWYnsO8j
F1h7W2pE3TOS/W+vXFrY7T1hdIzQpAhvhflS/jmEAB+8PvX6QPV7DfbRoIsFBOxk
VtRuycCimUnhCnQqv+kdazUZzVz48huRl1A/5T/mcf2hrE9q2tmX8qXT8Vs2O5Ky
Pbq9jsS/xA==
-----END KERTIFIKATE-------

// MQTT Client-Optionen mit TLS-Einstellungen konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Port: 11443,
Protokoll: 'wss', // Secure WebSocket Protokoll
ca: caCert, // CA-Zertifikat
Ablehnung Unautorisiert: true, // Stellen Sie sicher, dass das Serverzertifikat geprüft
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT-Client erstellen
const client = mqt.connect(`wss://${options.hostname}:${options.port}/mqt`, Optionen;

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Ein Thema eintragen
const topic = 'cmq/topic';
document.getElementById('topic').textContent = Thema;
client.subscribe(topic, (err) => {
wenn (!err)
consult.log('Bezeichnet zum Thema');
document.getElementById('subscriptionStatus').textContent = 'Subscribed zum Thema.

// Mitteilung veröffentlichen
const message = 'Hello CMQ';
client.publish(topic, message, { qos: 2, behalten: true }, (err) => {\cHFFFF}
wenn (!err)
consol.log('Message veröffentlicht.');
document.getElementById('publishedMessage').textContent = message;
}
})
}
})
})

WennMQTT Brokerhat ein selbstsigniertes Serverzertifikat dann kann das Server-Zertifikat mit dem Root-Zertifikat aus MQTT Broker:

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// Geben Sie das Root CA-Zertifikat (Annahme des Root CA-Zertifikats ist als String verfügbar)
c) Cert = `-----BEGIN-ZERTIFIZATE-----
MIIDdzCCAl+gAwIBAgIEUzJ7kDANBgkqhkiG9w0BAQsFADBoMQSwCQYDVQGEwJV
UzERMA8GA1UECAwIU29tZS1TdGF0ZTEUMBIGA1UEBWLU29tZS1DaXR5MRMwEQYD
VQQKDApJbnRlcm5ldCBQTETMBEGA1UEAwKQ2VydGlmaWNhdGUwHhcNMTkxMjMx
MDAwMDAwWhcNMjAxMjMwMDAwMDAwWjBoMQSwCQYDQGEwJVUzERMA8GA1UECAwI
U29tZS1TdGF0ZTEUMBIGAA1
dCBDQTETMBEGABE
DwAwggEKAoIBAQC2Xk1eRm94bw3hm8+K0H5/4eU9G8hb8CQXj0FGONMSY0zg/P4n
M6t2+/GQbj3FfAg/SwQ5lH9qO7CxTn/ANX4gO3KO9m0pjHfDkSx7hPlZoLR3oQz
73VcxltoHtUKg4+QAcI5nwb+byA3f1EOn+0V5d41rmlVxRk1dKl7FA8wN2zO7aLO
+F1QnIvDC/d9EjGqcmY8c9y4+fqzgH+iQFPq5APEL5Ead/nk5a8dRfd6Wb8GV6lg
o8pI0sMlS8HdLMjpCewMI7Nhu0a5ZOnC+S7a3YB2UO4jXg3ADm5nLqG6rbEpD1DE
A4NBoXBx+RhfdMfyPTNVhd8XtavXUkmyEBKbAgMBAAGjITAfMB0GA1UdDgQWBBQI
1hNfdp9a6f5Jm9peGr+m4iJ+IzANBgkqhkiG9w0BAQAOCAQEADJc2ddg4TGcB
Z7ViZ5 UlfI02KFA+E4xmdvZOE+aNkqZHYt21ou9lnzZoLbdK+9woO4F/8i0HBZ0h
MDhjeHGkZT+yxT1uWh6ldZggVDF6X/8zWy8RmG/k+bQTeTiU/wLfGPN0bsfvmFXV
SqE/O0rbc1LCaRIyRoEUfW/hmkf9UjYdW+FOcY5VfJm+GpLPOZLrAL3QAWYnsO8j
F1h7W2pE3TOS/W+vXFrY7T1hdIzQpAhvhflS/jmEAB+8PvX6QPV7DfbRoIsFBOxk
VtRuycCimUnhCnQqv+kdazUZzVz48huRl1A/5T/mcf2hrE9q2tmX8qXT8Vs2O5Ky
Pbq9jsS/xA==
-----END KERTIFIKATE-------

// MQTT Client-Optionen mit TLS-Einstellungen konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Port: 11443,
Protokoll: 'wss', // Secure WebSocket Protokoll
ca.: caCert, // Root CA Zertifikat
Ablehnung Unautorisiert: true, // Stellen Sie sicher, dass das Serverzertifikat überprüft wird // Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT-Client erstellen
const client = mqt.connect(`wss://${options.hostname}:${options.port}/mqt`, Optionen);

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Ein Thema eintragen
const topic = 'cmq/topic';
document.getElementById('topic').textContent = Thema;
client.subscribe(topic, (err) => {
wenn (!err)
consult.log('Bezeichnet zum Thema');
document.getElementById('subscriptionStatus').textContent = 'Subscribed zum Thema.

// Mitteilung veröffentlichen
const message = 'Hello CMQ';
client.publish(topic, message, { qos: 2, behalten: true }, (err) => {\cHFFFF}
wenn (!err)
consol.log('Message veröffentlicht.');
document.getElementById('publishedMessage').textContent = message;
}
})
}
})
})

MQTT konfigurieren Authentifizierung

Verbindung mit MQTT Broker, die MQTT Username und MQTT benötigt Passwort für Authentifizierung, Benutzername und Passwort zu den Verbindungsoptionen hinzufügen wie folgt:

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);

// MQTT Client Optionen konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws' // WebSocket Protokoll
Benutzername: 'Benutzername', // Benutzername hinzufügen, falls erforderlich
Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Ein Thema eintragen
client.subscribe('cmq/topic', (err) => {
wenn (!err)
consult.log('Bezeichnet zum Thema');

// Mitteilung veröffentlichen
client.publish('cmq/topic', 'Hello CMQ', { qos: 2, behalten: true }, (err) =
wenn (!err)
consol.log('Message veröffentlicht.');
}
})
}
})
})

Erweiterte Funktionen

Das letzte Testament einrichten

Konfigurieren derLetzter Beitragund die Funktion des Testaments, eine Meldung, dass der Broker veröffentlichen wird, wenn der Client unerwartet trennt. Dies hilft anderen Abonnenten den Status des abgeschalteten Clients zu informieren.

Verwenden Sie den folgenden Code, um Last Will in der Verbindung zu setzen Optionen:

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client Optionen für MQTT v5 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws', // WebSocket Protokoll
ProtokollVersion: 5, // MQTT Version 5
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
Eigenschaften: {\cHFFFF}
Sitzung ExpiryInterval: 60, // Sitzungsablaufintervall einstellen Sekunden
},
wird:
Thema: 'cmq/lastwill', // Das Thema zum Veröffentlichen der LWT-Nachricht
Nutzlast: 'Client abgeschaltet unerwartet', // Die LWT-Nachricht
qos: 1, // Die QoS-Ebene
behalten: wahr // Ob Sie die Nachricht behalten
}
};

// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

Adjusting Keep Alive

MQTdie Client-Broker-Verbindungen mit einem sparsamer Mechanismus. Anpassung dieIch bin nicht da.Intervall zu steuern, wie häufig der Client sendet PINGREQ-Nachrichten an den Broker.

Ändern Sie den untenstehenden Code entsprechend Ihren Anforderungen:

/ Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client Optionen für MQTT v5 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws', // WebSocket Protokoll
ProtokollVersion: 5, // MQTT Version 5
haltenalive: 60, // Halteintervall in Sekunden einstellen
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
Eigenschaften: {\cHFFFF}
Sitzung ExpiryInterval: 60, // Sitzungsablaufintervall einstellen Sekunden
},
wird:
Thema: 'cmq/lastwill', // Das Thema zum Veröffentlichen der LWT-Nachricht
Nutzlast: 'Client abgeschaltet unerwartet', // Die LWT-Nachricht
qos: 1, // Die QoS-Ebene
behalten: wahr // Ob Sie die Nachricht behalten
}
};

// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

// Client-Events ausschalten
client.on('connect', (connack) =>
cons.log('Connected erfolgreich mit MQTT Broker.', Connack;

// Beschreiben Sie ein Thema mit MQTT v5 Eigenschaften
const topic = 'cmq/topic';
document.getElementById('topic').textContent = Thema;
client.subscribe(topic, { qos: 2, nl: true, rap: true, rh: 0 }, (err, erteilt) => {\cHFFFF}
wenn (!err)
consol.log('Bezeichnet zum Thema ', erteilt);
document.getElementById('subscriptionStatus').textContent = "Beschrieben zum Thema".

// Eine Nachricht mit MQTT v5 Eigenschaften veröffentlichen
const message = 'Hello CMQ';
client.publish(topic, message, { qos: 2, behalten: true, eigenschaften: {\cHFFFF} messageExpiryInterval: 60 }, (err) => {\cHFFFF}
wenn (!err)
consol.log('Message veröffentlicht.');
document.getElementById('publishedMessage').textContent = Mitteilung;
}
})
}
})
})

Sitzungspersistenz konfigurieren

Sitzungsdaten eines MQTT-Clients umfassen die Abschriften des Kunden und alle Daten, die der Kunde mit QoS>0. Der Client kann den MQTT Broker dazu bringen, seine Sitzungsdaten über Verbindungen zu speichern.

MQTT 3.1.1 Clients können Clean Session = 0 einstellen, um die M

MQ3.1.1

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client Optionen für MQTT v3.1.1 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws', // WebSocket Protokoll
ProtokollVersion: 4, // MQTT Version 3.1.1
sauber: falsch, // Clean Session auf 0 einstellen
haltenalive: 60, // Halteintervall in Sekunden einstellen
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
wird:
Thema: 'cmq/lastwill', // Das Thema zum Veröffentlichen der LWT-Nachricht
Nutzlast: 'Client abgeschaltet unerwartet', // Die LWT-Nachricht
qos: 1, // Die QoS-Ebene
behalten: wahr // Ob Sie die Nachricht behalten
}
};
// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

MQT 5 Clients können Clean Start = 0 und Session Expiry festlegen Interval = 'N', um den MQTT Broker zu bitten, seine Sitzungsinformationen gespeichert zu halten über Verbindungen für 'N' Sekunden.

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// Session Expiry Interval in Sekunden einstellen (N)
Sitzungsperiode ExpiryInterval = 3600; // 1 Stunde

// MQTT Client Optionen für MQTT v5 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws', // WebSocket Protokoll
ProtokollVersion: 5, // MQTT Version 5
cleanStart: falsch, // Clean Start auf 0 setzen
Sitzung ExpiryInterval: sessionExpiryInterval, // Session Expiry einstellen Interoperabilität
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
wird:
Thema: 'cmq/lastwill', // Das Thema zum Veröffentlichen der LWT-Nachricht
Nutzlast: 'Client abgeschaltet unerwartet', // Die LWT-Nachricht
qos: 1, // Die QoS-Ebene
behalten: wahr // Ob Sie die Nachricht behalten
}
};

// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

Maximal Packungsgröße

MQTT5 Client kann den MQTT Broker anfordern, nur Daten zu senden Pakete weniger als eine bestimmte Größe, indem sie so eingestellt werden:

// Client-ID generieren
Kundendienst Id = erzeugenClientId('kristallmq_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client Optionen für MQTT v5 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 10443,
Protokoll: 'ws', // WebSocket Protokoll
ProtokollVersion: 5, // MQTT Version 5
maxPacketGröße: 1024, // Maximale Paketgröße in Bytes
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
wird:
Thema: 'cmq/lastwill', // Das Thema zum Veröffentlichen der LWT-Nachricht
Nutzlast: 'Client abgeschaltet unerwartet', // Die LWT-Nachricht
qos: 1, // Die QoS-Ebene
behalten: wahr // Ob Sie die Nachricht behalten
}
};

// MQTT-Client erstellen
const client = mqt.connect(`ws://${options.hostname}:${options.port}/mqtt`, Optionen;

Publizieren

Daten senden

Daten effizient an mehrere Teilnehmer verteilen Veröffentlichung zu bestimmten Themen mit dem folgenden Code snippet:

MQ3.1.1

// Client-ID generieren
Kundendienst Id = erzeugenClientId('mqtt_publisher_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client Optionen für MQTT v3.1.1 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 1883,
Protokoll: 'mqtt', // MQTT Protokoll
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT-Client erstellen
const client = mqtt.connect(`ws://${options.hostname}:${options.port}`, Optionen;

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Eine Nachricht an mehrere Themen veröffentlichen
Konstthemen = ['topic1', 'topic2', 'topic3'];
const message = 'Hello MQTT';

Themen.forEach(topisch => {\cHFFFF}
client.publish(topic, message, { qos: 2 }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log(`Message veröffentlicht auf ${topic}`);
document.getElementById('publishedMessages').innerHTML = `<li>Veröffentlicht auf ${topic}: ${message}</li>
}
})
})
})

MQTT 5

// Client-ID generieren
Kundendienst Id = erzeugenClientId('mqtt5_publisher_', 10);
document.getElementById('clientId').textContent = Kunde Id.

// MQTT Client Optionen für MQTT v5 konfigurieren
Konst-Optionen =
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 1883,
Protokoll: 'mqtt', // MQTT Protokoll
ProtokollVersion: 5, // MQTT Version 5
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT-Client erstellen
const client = mqtt.connect(`ws://${options.hostname}:${options.port}`, Optionen;

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Eine Nachricht an mehrere Themen veröffentlichen
Konstthemen = ['topic1', 'topic2', 'topic3'];
const message = 'Hello MQTT v5';

Themen.forEach(topisch => {\cHFFFF}
client.publish(topic, message, { qos: 2 }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log(`Message veröffentlicht auf ${topic}`);
document.getElementById('publishedMessages').innerHTML = `<li>Veröffentlicht auf ${topic}: ${message}</li>
}
})
})
})

Festhaltene Nachrichten einstellen

Aktivieren Sie bei der Veröffentlichung einer Nachricht die Rückbeschriftung, um sicherzustellen, dass Broker speichert die letzte Nachricht für jedes Thema. Dies garantiert neue Abonnenten die jüngste Nachricht beim Verbinden erhalten.

Um dies zu implementieren, verwenden Sie den folgenden Code snippet:

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Veröffentlichen Sie eine Nachricht mit der Fahne zu mehreren Themen
Konstthemen = ['topic1', 'topic2', 'topic3'];
const message = 'Hello MQTT v5 with Retain';

Themen.forEach(topisch => {\cHFFFF}
client.publish(topic, message, { qos: 2, behalten: true }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log(`Message veröffentlicht auf ${topic} mit behalten.`);
document.getElementById('publishedMessages').innerHTML = `<li>Veröffentlicht auf ${topic}: ${message}</li>
}
})
})
})

QoS Levels angeben

MQTT bietet drei Ebenen der Qualität des Dienstes (QoS) für Nachrichtenaussendung:

  • QoS 0 (am meisten einmal)
  • QoS 1 (zumindest einmal)
  • QoS 2 (genau einmal)

Geben Sie beim Veröffentlichen von MQTT-Nachrichten den erforderlichen QoS-Level an dieser Code:

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Eine Nachricht mit QoS 0 veröffentlichen (Am meisten einmal)
client.publish('topic/qos0', 'Message with QoS 0', { qos: 0 }, (err) => {\cHFFFF}
wenn (!err)
consult.log('Message veröffentlicht mit QoS 0');
document.getElementById('publishedMessages').innerHTML = `<li>veröffentlicht mit QoS 0: Nachricht mit QoS 0</li> `;
}
})

// Eine Nachricht mit QoS 1 veröffentlichen (zumindest einmal)
client.publish('topic/qos1', 'Message with QoS 1', { qos: 1 }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log('Message veröffentlicht mit QoS 1.');
document.getElementById('publishedMessages').innerHTML = `<li>veröffentlicht mit QoS 1: Nachricht mit QoS 1</li> `;
}
})

// Eine Nachricht mit QoS 2 veröffentlichen (genau einmal)
client.publish('topic/qos2', 'Message with QoS 2', { qos: 2 }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log('Message veröffentlicht mit QoS 2');
document.getElementById('publishedMessages').innerHTML = `<li>veröffentlicht mit QoS 2: Nachricht mit QoS 2</li> `;
}
})
})

Nachricht abbrechen Intervall

Die Eigenschaft "Message Ablaufintervall" setzt die Lebensdauer einer Nachricht in Sekunden; wenn innerhalb dieser Zeit nicht ausgesendet, verworfen der Broker es. MQTT5 unterstützt diese Funktion. MQTT5 Clients können dies während der Veröffentlichung von Daten festlegen.

Thema Alias

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Eine Nachricht mit Message Expiry Interval (30 Sekunden) an eine Thema
const topic = 'topic/message_expiry';
const message = 'Message with Message Expiry Interval';
Pressemitteilung ExpiryInterval = 30; // Nachrichtenübermittlung in Sekunden

client.publish(topic, message, { qos: 1, behalten: false, eigenschaften: {\cHFFFF} Nachricht ExpiryInterval: messageExpiryInterval * 1000 }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log(`Message veröffentlicht auf ${topic} mit Message Expiry Interval.
document.getElementById('publishedMessages').innerHTML = `<li>Veröffentlicht auf ${topic}: ${message} (Expiry Interval: ${messageExpiryInterval} Sekunden) </li>
}
})
})

Thema Alias

Die Eigenschaft 'Topic Alias' ermöglicht es Kunden, ein kurzes Alias zu verwenden anstatt eines vollständigen Themennamens, die Reduzierung der Nachrichtenpaketgröße und die Verbesserung des Netzwerks Effizienz.

MQTT 5

// Client-Events ausschalten
client.on('connect', () => {
Konsole.log('Connected erfolgreich mit MQTT Broker.');

// Veröffentlichen Sie eine Nachricht mit Thema Alias zu einem Thema
const topicAlias = 1; // Thema Alias-Nummer (numerische Kennung für die Thema
const topic = 'topic/alias';
const message = 'Message with Topic Alias';

// Veröffentlichen mit Thema Alias
client.publish(topic, message, { qos: 1, behalten: false, eigenschaften: {\cHFFFF} ThemaAlias: ThemaAlias }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log(`Message veröffentlicht auf ${topic} mit Thema Alias ${topicAlias}.`);
document.getElementById('publishedMessages').innerHTML = `<li>Veröffentlicht auf ${topic}: ${message} (Topic Alias: ${topicAlias})</li>;
}
})
})

Eigenschaften, die mit MQTT PUBLISH verbunden sind, verbessern die Nachrichtenbehandlung, Bereitstellung von Kontext oder Anweisungen für Broker und Kunden. Diese Eigenschaften, einschließlich Nachrichten Ablaufintervalle und Thema Alias, optimieren Nachrichtenversand und Netzwerk Bandbreite.

Anmeldung

Anmeldung zum Thema Filter

Um von anderen Clients veröffentlichte Daten zu erhalten, muss dieser Client abonnieren Sie ein passendes Thema Filter wie folgt:

// Multi-Level-Wildcard-Abo
client.subscribe('sensors/#', (err) => {
wenn (!err)
consult.log('Bezeichnet alle Sensorenthemen');
}
})
// Einstufige Wildcard-Abonnement
client.subscribe('sensors/+/temperatur', (err) => {
wenn (!err)
console.log('Bezeichnet Sensoren/+/Temperatur');
}
})

Dieses Thema Filter kann mit einem genauen Thema übereinstimmen oder es kann Wildcards wie # und +

Datenerfassung

Um Daten für die Abonnements zu erhalten, eine Callback-Funktion muss so definiert werden:

// Callback-Funktion definieren, um eingehende Nachrichten zu behandeln
client.on('message', (topisch, Nachricht, Paket) => {\cHFFFF}
Konsole.log(`Erhaltene Nachricht zum Thema: ${topic}`);
Konsole.log(`Nachrichteninhalt: ${message.toString()}`);
// Zusätzliche Verarbeitung basierend auf empfangener Nachricht

// Beispiel: Anzeige in HTML
Empfänger Meldungen = document.getElementById('receivedMessages');
empfangenMessages.innerHTML += `<li>Topic: ${topic}, Nachricht: ${message.toString()}</li> })

Anmeldung von Themen

Um den Empfang von Updates von einem Thema zu stoppen, verwenden Sie den Code, der bereitgestellt wird, um abbestellen.

// Thema abbestellen
const topicToAbonnieren = 'Sensoren/Temperatur';
// Abonnieren des Themas
client.unsubscribe(topicToUnsubscribe, (err) => {\cHFFFF}
wenn (!err)
console.log(`Beschrieben von dem Thema: ${topicToUnsubscribe}`);
} auch
Konsole.error(`Failed to Abmelden vom Thema: ${topicToAbmelden}`, Err,
}
})

Den Client deaktivieren

Stellen Sie sicher, dass die Verbindung Ihres Kunden mit dem Broker, um Probleme und Ressourcenlecks auf beiden Seiten zu vermeiden, wodurch System beibehalten Stabilität.

Verwenden Sie den folgenden Code, um den Client vom Broker zu trennen:

client.end(true, () => {\cHFFFF}
console.log('Disconnected from MQTT Broker.');
})

// Schließen Sie das Ereignis, um die Trennung zu bestätigen
client.on('close', () => {\cHFFFF}
consult.log('Connection to MQTT Broker geschlossen.');
// Optional: Reconnect-Logik implementieren
setTimeout((() => {\cHFFFF}
Versuch's!
Client.reconnect(); // Versuch, nach einer Verzögerung wieder zu verbinden
} fang an
consult.log('Reconnecting versagt');
}
}, 5000); // Nach 5 Sekunden wieder anschließen (nach Bedarf anpassen)
})

Bauen Sie Ihre Business Logic

Sie haben die Möglichkeit, sich selbst zu entwickeln und anzupassen komplizierte Business-Logik in dieser Umgebung, passgenau auf Ihre spezifischen Bedürfnisse und Ziele.

Implementierung von Best Practices

Kunden-ID Anpassung

Bieten Sie jedes Gerät mit einer einzigartigen Client-ID, um eine präzise Identifizierung zu erleichtern. In private Einrichtungen, zuweisen deutlich IDs an Clients, während in gemeinsamen Kontexten, ein zufälliger String in jede Client-ID, um Einzigartigkeit zu erhalten.

Effektive Datenplanung

Konstruieren Sie Ihren Datenrahmen im Voraus. Ob die Verwaltung von Klartext, JSON-Datenformate oder numerische Datensätze sorgen dafür, dass die Struktur optimal Ihre Verwendungszweck der Anwendung.

Robuste Fehlerbehandlung

Implementieren Sie eine starke Fehlerverwaltung mit MQTT-Verbindung Fehler, Abonnementprobleme und Nachrichtenveröffentlichungsfehler effektiv.

Sicherung von Anmeldeinformationen

Schutz sensibler Informationen wie Benutzernamen, Passwörter und Client-IDs, indem Sie sie nicht in Ihrem Quellcode festcodieren. Umweltvariablen verwenden oder sichere Konfigurationsdateien statt.

Regelmäßige Prüfung und Überwachung

Kontinuierlich testen Sie MQTT-Kommunikation und überwachen Sie Client Metriken wie Verbindungsstatus, Nachrichtendurchsatz und Fehlerraten, um schnell zu identifizieren und Probleme beheben.

Optimierung des Sitzungsmanagements

Wählen Sie zwischen sauberen und persistenten Sitzungen (`clean: true` oder `clean: false`) basierend auf Ihrer Notwendigkeit, Abonnements und gelöschte Nachrichten über Kundenverbindungen.

Reconnect auf Disconnect

Reconnect auf Disconnect Code hinzufügen, um zu versuchen, die Verbindung zum MQTT Broker, wenn es ein unerwartetes Ausschalten. Dies wird sicherstellen, dass Ihr Kunde verbunden bleibt und keine Daten.

Code herunterladen

Laden Sie den vollständigen Code für den Client herunter, der Java Skript MQTT Client verwendet Bibliothek, um mit unserem Broker oder einem Broker Ihrer Wahl zu verbinden.

MQTT 3.1.1 js Datei

document.addEventListener('DOMContentLoaded', (event) => {\cHFFFF}
Funktion main() {\cHFFFF}
// MQTT Client Initialisierung
Kundendienst Id = erzeugenClientId('kristallMQ_', 10);
document.getElementById('mqtV4ClientId').textContent = Client Id.

// MQTT v4 Konfiguration
Kontinuität V4Optionen = {
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 1883,
Protokoll: 'ws', // MQTT Protokoll
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT v4 Client erstellen
Kontinuität V4 Kunde = mqt.connect(`ws://${mqtV4Options.hostname}:${mqtV4Options.port}`, mqtV4Optionen;

// MQTT v4 Event Handlers
mqtV4Client.on('connect', () =>
Konsole.log('Connected with MQTT v4 Broker.');
document.getElementById('mqtV4Status').textContent = 'Connected';
})

mqtV4Client.on('message', (topic, message) => {\cHFFFF}
Konsole.log(`Received message on MQTT v4: ${topic} - ${message.toString()}');
document.getElementById('mqtV4Received').innerHTML += `<li>Topic: ${topic} Nachricht: ${message.toString()}</li>;
})

mqtV4Client.on('close', () => {
Konsole.log('Disconnected from MQTT v4 Broker.');
document.getElementById('mqtV4Status').textContent = 'Disconnected';
})

// Publish-Funktion für MQTT v4
windows.publishMessageV4 = Funktion(topisch, Nachricht) {
mqtV4Client.publish(topic, message, { qos: 1 }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log(`Veröffentlichte Nachricht auf MQTT v4: ${topic} - ${message}`);
document.getElementById('mqtV4Veröffentlicht').innerHTML += `<li>Veröffentlicht auf ${topic}: ${message}</li>
} auch
Konsole.error(`Failed to publiziert Nachricht auf MQTT v4: ${err}`);
}
})
};

// Funktion für MQTT v4 anmelden
windows.subscribeToTopicV4 = Funktion(topisch) {\cHFFFF}
mqtV4Client.subscribe(topic, (err) => {\cHFFFF}
wenn (!err)
console.log(`Beschrieben von MQTT v4 Thema: ${topic}`);
document.getElementById('mqtV4Subscribed').textContent = Thema;
} auch
Konsole.error(`Failed to abonnieren MQTT v4 Thema: ${err}`);
}
})
};

// Trennfunktion für MQTT v4
windows.disconnectClientV4 = function() {\cHFFFF}
mqtV4Client.end(true, () => {
Konsole.log('Disconnected MQTT v4 client.');
document.getElementById('mqtV4Status').textContent = 'Disconnected';
})
};
}

Funktion generierenClientId(Präfix, Länge) {
const chars = „ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789“;
Ergebnis = Präfix;
für (let i = 0; i < Länge; i++) {\cHFFFF}
Ergebnis += chars.charAt(Math.floor(Math.random() * chars.length));
}
Rückgabeergebnis;
}

Haupt();
})

MQTT 3.1.1 html Datei

<! DOCTYPE html>
<html lang="en">
< Kopf >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
Insgesamt Beispiel</Titel>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js">/script>
<script src="mqtt-v4.js" type="text/javascript">/script>
</Kopf >
<
<h1>MQTT Beispiel</h1>

<!- MQTT v4 Abschnitt -->
<h2>MQT v4</h2>
<p>strong>Client ID:</strong> <span id="mqtV4ClientId">/span>>/p>
<p>strong>Status:</strong> <span id="mqtV4Status"> Unverbindlich </span>/p>
<button onclick="disconnectClientV4()">Disconnect MQT v4</button>
<= <= <==================================================================================================================================================
<h3>
<input type="text" id="mqtV4SubscribeTopic" placeholder="Topic to abonniert
< onclick="subscribeToTopicV4(document.getElementById('mqtV4SubscribeTopic').value)">Subscribe</button>
<p>strong>Subscribed:</strong> <span id="mqtV4Subscribed">/span>/p>
<= <= <==================================================================================================================================================
<h3>Publish</h3>
<input type="text" id="mqtV4PublishTopic" placeholder="Topic to Veröffentlichungen
<input type="text" id="mqtV4PublishMessage" placeholder="Message to Veröffentlichungen
< onclick="publishMessageV4(document.getElementById('mqtV4PublishTopic'). document.getElementById('mqtV4PublishMessage').value)">Publish</button>
<h3>Veröffentlichte Nachrichten</h3>
<ul id="mqtV4Veröffentlicht">/ul>
<h3>Received Messages</h3>
<ul id="mqtV4Receiveed">/ul>

</Körper >
</html>

MQTT 5 Js-Datei

document.addEventListener('DOMContentLoaded', (event) => {\cHFFFF}
Funktion main() {\cHFFFF}
// MQTT Client Initialisierung
Kundendienst Id = erzeugenClientId('mqtt5_client_', 10);
document.getElementById('mqtV5ClientId').textContent = Client Id.

// MQTT v5 Konfiguration
Kontinuität V5Optionen = {
Kunden Id: Kunden Id.
Hostname: 'public-mqtt-broker.bevywise.com',
Hafen: 1883,
Protokoll: 'ws', // MQTT Protokoll
ProtokollVersion: 5,
// Benutzername: 'username', // Benutzername hinzufügen, falls erforderlich
// Passwort: 'password', // Passwort hinzufügen, wenn nötig
};

// MQTT v5 Client erstellen
Kontinuität V5 Kunde = mqt.connect(`ws://${mqtV5Options.hostname}:${mqtV5Options.port}, mqtV5Optionen;

// MQTT v5 Event Handlers
mqtV5Client.on('connect', () =>
Konsole.log('Connected with MQTT v5 Broker.');
document.getElementById('mqtV5Status').textContent = 'Connected';
})

mqtV5Client.on('message', (topic, message) => {\cHFFFF}
Konsole.log(`Received message on MQTT v5: ${topic} - ${message.toString()}');
document.getElementById('mqtV5Received').innerHTML += `<li>Topic: ${topic} Nachricht: ${message.toString()}< /li>;
})

mqtV5Client.on('close', () => {\cHFFFF}
Konsole.log('Disconnected from MQTT v5 Broker.');
document.getElementById('mqtV5Status').textContent = 'Disconnected';
})

// Publish-Funktion für MQTT v5
windows.publishMessageV5 = Funktion(topisch, Nachricht) {
mqtV5Client.publish(topic, message, { qos: 1 }, (err) => {\cHFFFF}
wenn (!err)
Konsole.log(`Veröffentlichte Nachricht auf MQTT v5: ${topic} - ${message}`);
document.getElementById('mqtV5Published').innerHTML += `<li>Published to ${topic}: ${message}</li>
} auch
Konsole.error(`Failed to release message on MQTT v5: ${err}`);
}
})
};

// Funktion für MQTT v5 abonnieren
windows.subscribeToTopicV5 = Funktion(topisch) {\cHFFFF}
mqtV5Client.subscribe(topic, (err) => {
wenn (!err)
console.log(`Beschrieben von MQTT v5 Thema: ${topic}`);
document.getElementById('mqtV5Subscribed').textContent = Thema;
} auch
Konsole.error(`Failed to abonnieren MQTT v5 Thema: ${err}`);
}
})
};

// Trennfunktion für MQTT v5
windows.disconnectClientV5 = function() {\cHFFFF}
mqtV5Client.end(true, () => {\cHFFFF}
Konsole.log('Disconnected MQTT v5 client.');
document.getElementById('mqtV5Status').textContent = 'Disconnected';
})
};
}

Funktion generierenClientId(Präfix, Länge) {
const chars = „ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789“;
Ergebnis = Präfix;
für (let i = 0; i < Länge; i++) {\cHFFFF}
Ergebnis += chars.charAt(Math.floor(Math.random() * chars.length));
}
Rückgabeergebnis;
}

Haupt();
})

<! DOCTYPE html>
<html lang="en">
< Kopf >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
Insgesamt Beispiel</Titel>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js">/script>
<script src="mqtt-v5.js" type="text/javascript">/script>
</Kopf >
<

<!- MQTT v5 Abschnitt -->
<h2>MQT v5</h2>
<p>strong>Client ID:</strong> <span id="mqtV5ClientId">/span>>/p>
<p>strong>Status:</strong> <span id="mqtV5Status"> Unverbindlich </span>/p>
<button onclick="disconnectClientV5()">Disconnect MQT v5</button>
<= <= <==================================================================================================================================================
<h3>
<input type="text" id="mqtV5SubscribeTopic" placeholder="Topic to abonniert
< onclick="subscribeToTopicV5(document.getElementById('mqtV5SubscribeTopic').value)">Subscribe</button>
<p>strong>Subscribed:</strong> <span id="mqtV5Subscribed">/span>/p>
<= <= <==================================================================================================================================================
<h3>Publish</h3>
<input type="text" id="mqtV5PublishTopic" placeholder="Topic to Veröffentlichungen
<input type="text" id="mqtV5PublishMessage" placeholder="Message to Veröffentlichungen
< onclick="publishMessageV5(document.getElementById('mqtV5PublishTopic'). document.getElementById('mqtV5PublishMessage').value)">Publish</button>
<h3>Veröffentlichte Nachrichten</h3>
<ul id="mqtV5Veröffentlicht">/ul>
<h3>Received Messages</h3>
<ul id="mqtV5Receiveed">/ul>

</Körper >
</html>

Ausführender Bundle erstellen

Verbinden Sie Ihren Kunden mit unserem hochmodernen MQTT-Broker oder jedem Broker Ihrer Wahl. Diese leistungsstarke Kombination sorgt für optimale Leistung und Zuverlässigkeit für alle Ihre Messaging-Anforderungen, den Weg für ein robustes und effizientes System Integration.