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
Fügen Sie das folgende Plugin zu Ihrer Client-Datei hinzu
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js">/script>
MQT Verbindung
Basis TCP Verbindung
Kundenbetreuung Id = 'testclient3';
Kontinuität V4Optionen =
In den Warenkorb Id: Kunden Id.
Hostname: 'broker-url',
Hafen: 10443,
Protokoll:
};
const mqtV4Client = mqt.connect(`ws://${mqtV4Optionen.hostname}:${mqtV4Options.port}`, mqtV4Optionen);Verbindung mit Authentication:
Kontinuität V4Optionen =
In den Warenkorb Id: Kunden Id.
Hostname: 'broker-url',
Hafen: 10443,
Protokoll: 'ws', // MQTT Protokoll
Benutzername: 'nameBenutzer', // Benutzername hinzufügen, fällt erforderlich
Passwort: 'password', // Passwort angeben, wenn vorhanden
};Über TLS/SSL verbinden
Sichere Verbindung mitTLS/SSL:
Kontinuität V4Optionen =
In den Warenkorb Id: Kunden Id.
Hostname: 'broker-url',
Hafen: 11443,
Protokoll.
Ablehnung Unautorisiert: true, // Optional, nicht autorisierte Zertifikate beansprucht
// TLS-Optionen nach Bedarf
cert: 'yourClientCert', // Kundenzertifikat
Schlüssel: 'yourClientKey', // Clientschlüssel
ca. 'yourCaCert' // CA-Zertifikat
};
const mqtV4Client = mqt.connect(`wss://${mqtV4Optionen.hostname}:${mqtV4Options.port}`, mqtV4Optionen);MQTT Publizieren
Daten an ein Thema senden:
windows.publishMessageV4 = Funktion (topisch, Nachricht) {
mqtV4Client.publish(topic, message, { qos: 1 }, (err) => {\cHFF}
(!err)
Konsole.log(`Veröffentlichte Nachricht auf MQTT v4: ${topic} - ${message}`);
auch
Konsole.error(`Failed to publiziert Nachricht auf MQTT v4: ${err}`);
}
})
};MQT Anmeldung
Um Nachrichten zu erhalten, abonnieren Sie einen Themenfilter. DieMQTT Brokerwird weiter passende Nachrichten an Ihren Kunden.
windows.subscribeToTopicV4 = Funktion (topisch) {
mqtV4Client.subscribe(topic, (err) => {
(!err)
Konsole.log(`Beschrieben von MQTT v4 Thema: ${topic}`);
auch
Konsole.error(`Failed to abonnieren MQTT v4 Thema: ${err}`);
}
})
};Ruf zurück, der die Nachricht erhält
mqtV4Client.on('message', (topic, message) =>\cHFF}
Konsole.log(`Received message on MQTT v4: ${topic} - ${message.toString()}');
})MQTT Disconnect
Trennen Sie immer sauber, um Ressourcenlecks zu vermeiden und sicherzustellen, richtig Session Handling auf dem Broker:
windows.disconnectClientV4 = Funktion () {\cHFF}
mqtV4Client.end(true, () => {\cHFFFF}
Konsole.log('Disconnected MQTT v4 client.');
})
};Wiederherstellen des Anrufs
mqtV4Client.on('close', () =>
Konsole.log('Disconnected from MQTT v4 Broker.');
})Beispiel MQTTv311 Client
Beispiel HTML-Code
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 MQTT v4</button>
<= <= <==================================================================================================================================================
<h3>
<input type="text" id="mqtV4SubscribeTopic" placeholder="Topic to abonnieren">
<button 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 Publishing">
<input type="text" id="mqtV4PublishMessage" placeholder="Message to Publishing">
<
onclick="publishMessageV4(document.getElementById('mqtV4PublishTopic').value, 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>
Beispiel JavaScript-Code
document.addEventListener('DOMContentLoaded', (event) => {\cHFFFF}
Funktion main() {\cHFF}
Kundenbetreuung Id = 'testclient1';
document.getElementById('mqtV4ClientId').textContent = Client Id.
Kontinuität V4 Optionen = {
In den Warenkorb Id: Kunden Id.
Hostname: 'broker-url',
Hafen: 10443,
Protokoll:
// Benutzername: 'username', // Benutzername
// Passwort: 'password', // Passwort vergessen?
};
const mqtV4Client = mqt.connect(`ws://${mqtV4Optionen.hostname}:${mqtV4Options.port}`, mqtV4Optionen);
mqtV4Client.on('connect', () =>
Konsole.log('Connected with MQTT v4 Broker.');
document.getElementById('mqtV4Status').textContent = 'Connected';
})
mqtV4Client.on('message', (topic, message) =>\cHFF}
Konsole.log(`Received message on MQTT v4: ${topic} - ${message.toString()}');
document.getElementById('mqtV4Received').innerHTML += `Thema: ${topic}, Nachricht: ${message.toString()} `,
})
mqtV4Client.on('close', () =>
Konsole.log('Disconnected from MQTT v4 Broker.');
document.getElementById('mqtV4Status').textContent = 'Disconnected';
})
windows.publishMessageV4 = Funktion (topisch, Nachricht) {
mqtV4Client.publish(topic, message, { qos: 1 }, (err) => {\cHFF}
(!err)
Konsole.log(`Veröffentlichte Nachricht auf MQTT v4: ${topic} - ${message}`);
document.getElementById('mqtV4Published').innerHTML += `Veröffentlicht zu ${topic}: ${message} `,
auch
Konsole.error(`Failed to publiziert Nachricht auf MQTT v4: ${err}`);
}
})
};
windows.subscribeToTopicV4 = Funktion (topisch) {
mqtV4Client.subscribe(topic, (err) => {
(!err)
Konsole.log(`Beschrieben von MQTT v4 Thema: ${topic}`);
document.getElementById('mqtV4Subscribed').textContent = Thema;
auch
Konsole.error(`Failed to abonnieren MQTT v4 Thema: ${err}`);
}
})
};
windows.disconnectClientV4 = Funktion () {\cHFF}
mqtV4Client.end(true, () => {\cHFFFF}
Konsole.log('Disconnected MQTT v4 client.');
document.getElementById('mqtV4Status').textContent = 'Disconnected';
})
};
}
Haupt()
})MQTT v5 Client
Beispiel HTML-Code
<MQTT 5 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-v5.js" type="text/javascript">/script>
</Kopf >
< < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < <
<h1>MQTT Beispiel</h1>
<!- 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 MQTT v5</button>
<= <= <==================================================================================================================================================
<h3>
<input type="text" id="mqtV5SubscribeTopic" placeholder="Topic to abonnieren">
<button 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 Publishing">
<input type="text" id="mqtV5PublishMessage" placeholder="Message to Publishing">
<
onclick="publishMessageV5(document.getElementById('mqtV5PublishTopic').value, 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>
Beispiel JavaScript-Code
document.addEventListener('DOMContentLoaded', (event) => {\cHFFFF}
Funktion main() {\cHFF}
Kundenbetreuung Id = 'testclient4';
document.getElementById('mqtV5ClientId').textContent = Client Id.
Kontinuität V5 Optionen = {
In den Warenkorb Id: Kunden Id.
Hostname: 'broker-url',
Hafen: 10443,
Protokoll:
ProtokollVersion: 5, // MQTT v5
Rein: wahr, // Saubere Sitzung starten
// Benutzername: 'name',
// Passwort: 'password',
};
const mqtV5Client = mqt.connect(`ws://${mqtV5Optionen.hostname}:${mqtV5Options.port}`, mqtV5Optionen);
Die Welt der Welt
mqtV5Client.on('connect', () =>
Konsole.log('Connected with MQTT v5 Broker.');
document.getElementById('mqtV5Status').textContent = 'Connected';
})
mqtV5Client.on('message', (topisch, Nachricht, Paket) => {\cHFFFF}
Konsole.log(`Received message on MQTT v5: ${topic} - ${message.toString()}');
document.getElementById('mqtV5Received').innerHTML += `Thema: ${topic}, Nachricht: ${message.toString()} `,
})
mqtV5Client.on('close', () =>
Konsole.log('Disconnected from MQTT v5 Broker.');
document.getElementById('mqtV5Status').textContent = 'Disconnected';
})
Englische Sprache
windows.publishMessageV5 = Funktion (topisch, Nachricht) {
mqtV5Client.publish(topic, message, {
Qos: 1,
Ich bin hier:
Eigenschaften: {\cHFF}
Nachricht ExpiryInterval: 60 // Optional: abgelaufen nach 60 Sekunden
}
}, (err) =>
(!err)
Bewaffnung/Veröffentlichung Nachricht auf MQTT v5: ${topic} - ${message}`);
document.getElementById('mqtV5Published').innerHTML += `Veröffentlicht zu ${topic}: ${message} `,
auch
Konsole.error(`Failed to release message on MQTT v5: ${err}`);
}
})
};
Ich bin ein Freund
windows.subscribeToTopicV5 = Funktion (topisch) {
mqtV5Client.subscribe(topic, {
Qos:
Eigenschaften: {\cHFF}
// No Local, Retain As Veröffentlicht, etc. kann hier gehen
}
}, (err, erteilt) =>
(!err)
`Beschrieben von MQTT v5 Thema: ${topic}`;
document.getElementById('mqtV5Subscribe').textContent = Thema;
auch
Konsole.error(`Failed to abonnieren MQTT v5 Thema: ${err}`);
}
})
};
Englische Sprache
windows.disconnectClientV5 = Funktion () {\cHFF}
mqtV5Client.end(true, () => {\cHFFFF}
Konsole.log('Disconnected MQTT v5 client.');
document.getElementById('mqtV5Status').textContent = 'Disconnected';
})
};
}
Haupt()
})