<html lang="de">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.10.1/mqtt.min.js"></script>
<script>
<!--
const topic = "<DeinTopic>"; // hier Topic angeben
const host = "ws://<BrokerURL>:<Port>/mqtt"; // hier MQTT Server und Port angeben - bei "https://" muss "wss://" verwender werden !!!!
function connectToBroker() {
   const clientId = "client" + Math.random().toString(36).substring(7);
   const options = {keepalive: 60, clientId: clientId, protocolId: "MQTT",
   protocolVersion: 4, clean: true, reconnectPeriod: 1000, connectTimeout: 30 * 1000,};
   mqttClient = mqtt.connect(host, options);
   // Eingehende Nachricht
   mqttClient.on("message", (topic, MessageA, packet) => {document.querySelector("#Message").value = MessageA;});
}

function subscribeToTopic() {
   connectToBroker();
   mqttClient.subscribe(topic, { qos: 0 });
}

function publishMessage() {
   const s = document.querySelector("#Message");
   const message = s.value.trim();
   mqttClient.publish(topic, message, { qos: 0, retain: false,});
   s.value = "";
}
-->
</script>
</head>
<body onLoad='subscribeToTopic()'>
<p><input type="text" id="Message" size="40">&nbsp;<input type="button" value="Publish" onClick="publishMessage();"></p>
</body>
</html>