Paho MQTT Example<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/paho-mqtt\/1.0.1\/mqttws31.min.js\"><\/script>\n<\/head>\n<body>\n <h2>MQTT Client<\/h2>\n <button onclick=\"startConnection()\">Connect<\/button>\n <div id=\"status\">Disconnected<\/div>\n <div id=\"output\"><\/div>\n\n <script>\n let mqttClient;\n \n \/\/ Define MQTT broker details here\n const BROKER_ADDRESS = \"wss:\/\/g3e93327.ala.eu-central-1.emqxsl.com\";\n const PORT = 8084; \/\/ Ensure this is the correct WebSocket SSL port\n const TOPIC = \"kkrusetimertest\";\n const USERNAME = \"tester\";\n const PASSWORD = \"123456\";\n\n function startConnection() {\n mqttClient = new Paho.MQTT.Client(BROKER_ADDRESS + \":\" + PORT + \"\/mqtt\", \"client-\" + Math.random());\n \n mqttClient.onConnectionLost = () => {\n document.getElementById(\"status\").innerText = \"Disconnected\";\n };\n\n mqttClient.onMessageArrived = (msg) => {\n document.getElementById(\"output\").innerHTML += `<p>${msg.payloadString}<\/p>`;\n };\n\n mqttClient.connect({\n onSuccess: () => {\n document.getElementById(\"status\").innerText = \"Connected\";\n mqttClient.subscribe(TOPIC);\n },\n userName: USERNAME,\n password: PASSWORD,\n useSSL: true\n });\n }\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Paho MQTT Example<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/paho-mqtt\/1.0.1\/mqttws31.min.js\"><\/script>\n<\/head>\n<body>\n <h2>MQTT Client<\/h2>\n <div id=\"status\">Connecting…<\/div>\n <div id=\"output\"><\/div>\n\n <script>\n var mqttClient;\n \n \/\/ Define MQTT broker details here\n const BROKER_ADDRESS = \"wss:\/\/g3e93327.ala.eu-central-1.emqxsl.com:8084\/mqtt\";\n const TOPIC = \"kkrusetimertest\";\n const USERNAME = \"tester\";\n const PASSWORD = \"123456\";\n\n function startConnection() {\n console.log(\"Attempting to connect to MQTT broker...\");\n mqttClient = new Paho.MQTT.Client(BROKER_ADDRESS, \"client-\" + Math.random());\n \n mqttClient.onConnectionLost = (responseObject) => {\n document.getElementById(\"status\").innerText = \"Disconnected\";\n console.error(\"Connection lost: \", responseObject.errorMessage);\n setTimeout(startConnection, 5000); \/\/ Retry connection after 5 seconds\n };\n\n mqttClient.onMessageArrived = (msg) => {\n document.getElementById(\"output\").innerHTML += `<p>${msg.payloadString}<\/p>`;\n };\n\n mqttClient.connect({\n onSuccess: () => {\n document.getElementById(\"status\").innerText = \"Connected\";\n console.log(\"Connected to MQTT broker\");\n mqttClient.subscribe(TOPIC);\n },\n onFailure: (error) => {\n console.error(\"Connection failed:\", error.errorMessage);\n document.getElementById(\"status\").innerText = \"Connection Failed\";\n setTimeout(startConnection, 5000); \/\/ Retry connection after 5 seconds\n },\n userName: USERNAME,\n password: PASSWORD,\n useSSL: true\n });\n }\n \n \/\/ Automatically connect on page load\n window.addEventListener(\"load\", startConnection);\n <\/script>\n<\/body>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Paho MQTT Example MQTT Client Connect Disconnected Paho MQTT Example MQTT Client Connecting…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width","meta":{"saved_in_kubio":true,"footnotes":""},"class_list":["post-42","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":13,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":42,"date":"2025-02-28T16:54:47","date_gmt":"2025-02-28T16:54:47","guid":{"rendered":"https:\/\/kasper.hhmedia.dk\/index.php\/timer\/"},"modified":"2025-02-28T19:17:56","modified_gmt":"2025-02-28T19:17:56","slug":"timer","status":"publish","type":"page","link":"https:\/\/kasper.hhmedia.dk\/index.php\/timer\/","title":{"rendered":"TIMER"},"content":{"rendered":"\n\n\n\n \n \n Paho MQTT Example<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/paho-mqtt\/1.0.1\/mqttws31.min.js\"><\/script>\n<\/head>\n<body>\n <h2>MQTT Client<\/h2>\n <button onclick=\"startConnection()\">Connect<\/button>\n <div id=\"status\">Disconnected<\/div>\n <div id=\"output\"><\/div>\n\n <script>\n let mqttClient;\n \n \/\/ Define MQTT broker details here\n const BROKER_ADDRESS = \"wss:\/\/g3e93327.ala.eu-central-1.emqxsl.com\";\n const PORT = 8084; \/\/ Ensure this is the correct WebSocket SSL port\n const TOPIC = \"kkrusetimertest\";\n const USERNAME = \"tester\";\n const PASSWORD = \"123456\";\n\n function startConnection() {\n mqttClient = new Paho.MQTT.Client(BROKER_ADDRESS + \":\" + PORT + \"\/mqtt\", \"client-\" + Math.random());\n \n mqttClient.onConnectionLost = () => {\n document.getElementById(\"status\").innerText = \"Disconnected\";\n };\n\n mqttClient.onMessageArrived = (msg) => {\n document.getElementById(\"output\").innerHTML += `<p>${msg.payloadString}<\/p>`;\n };\n\n mqttClient.connect({\n onSuccess: () => {\n document.getElementById(\"status\").innerText = \"Connected\";\n mqttClient.subscribe(TOPIC);\n },\n userName: USERNAME,\n password: PASSWORD,\n useSSL: true\n });\n }\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Paho MQTT Example<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/paho-mqtt\/1.0.1\/mqttws31.min.js\"><\/script>\n<\/head>\n<body>\n <h2>MQTT Client<\/h2>\n <div id=\"status\">Connecting…<\/div>\n <div id=\"output\"><\/div>\n\n <script>\n var mqttClient;\n \n \/\/ Define MQTT broker details here\n const BROKER_ADDRESS = \"wss:\/\/g3e93327.ala.eu-central-1.emqxsl.com:8084\/mqtt\";\n const TOPIC = \"kkrusetimertest\";\n const USERNAME = \"tester\";\n const PASSWORD = \"123456\";\n\n function startConnection() {\n console.log(\"Attempting to connect to MQTT broker...\");\n mqttClient = new Paho.MQTT.Client(BROKER_ADDRESS, \"client-\" + Math.random());\n \n mqttClient.onConnectionLost = (responseObject) => {\n document.getElementById(\"status\").innerText = \"Disconnected\";\n console.error(\"Connection lost: \", responseObject.errorMessage);\n setTimeout(startConnection, 5000); \/\/ Retry connection after 5 seconds\n };\n\n mqttClient.onMessageArrived = (msg) => {\n document.getElementById(\"output\").innerHTML += `<p>${msg.payloadString}<\/p>`;\n };\n\n mqttClient.connect({\n onSuccess: () => {\n document.getElementById(\"status\").innerText = \"Connected\";\n console.log(\"Connected to MQTT broker\");\n mqttClient.subscribe(TOPIC);\n },\n onFailure: (error) => {\n console.error(\"Connection failed:\", error.errorMessage);\n document.getElementById(\"status\").innerText = \"Connection Failed\";\n setTimeout(startConnection, 5000); \/\/ Retry connection after 5 seconds\n },\n userName: USERNAME,\n password: PASSWORD,\n useSSL: true\n });\n }\n \n \/\/ Automatically connect on page load\n window.addEventListener(\"load\", startConnection);\n <\/script>\n<\/body>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Paho MQTT Example MQTT Client Connect Disconnected Paho MQTT Example MQTT Client Connecting…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width","meta":{"saved_in_kubio":true,"footnotes":""},"class_list":["post-42","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":13,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/kasper.hhmedia.dk\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}