Advertisement
Tempist

MQTT WebSocket Monitor

Jun 14th, 2019
360
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Java 2.14 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>MQTT Websocket Monitor</title>
  5.  <h1 style="text-align:center;">MQTT Message Monitor</h1>
  6.  <h3 style="text-align:center;">Status Messages:</h3>
  7.  <p style="text-align:center;"div id="status_messages"></div></p>
  8.  <h3 style="text-align:center;">Received Messages:</h3>
  9.  <p style="text-align:center;"div id="out_messages"></div></p>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
  11. </head>
  12. <script type = "text/javascript">
  13.   var BrokerURI="ns01-wss.brainium.com";
  14.   var MQTTUserName="oauth2-user";
  15.   var ExternalAccessToken=""; //put your access key here
  16.   var PlatformUserId = ""; //put your User ID here
  17.   var mqtt;
  18.   var port = 443;
  19.   var DeviceID = ""; //put your Device ID here;
  20.   var topic = "VISIBLE_SPECTRUM_LIGHTNESS";
  21.   var MotionTopic = "/v1/users/" + PlatformUserId + "/in/devices/" + DeviceID + "/datasources/" + topic;
  22.   function onConnectionLost(){
  23.    status_messages.innerHTML ="Connection Lost";
  24.   };
  25.   function onConnect() {
  26.    mqtt.subscribe(MotionTopic);
  27.    status_messages.innerHTML = "Subscribed to topic "+topic;
  28.   };
  29.   function onMessageArrived(r_message){
  30.    var payload = r_message.payloadString;
  31.    var messageString = payload.replace('[','').replace(']','');
  32.    var splitMessage = messageString.split("},{")
  33.    var arraylength = splitMessage.length;
  34.    for (var i = 0; i < arraylength; i++){
  35.        if (i==0){
  36.          out_messages.innerHTML=splitMessage[i].replace('{','')+"<br/>";
  37.        } else {
  38.          out_messages.innerHTML+=splitMessage[i].replace('}','')+"<br/>";
  39.        }
  40.     }
  41.    };
  42.   function MQTTconnect() {
  43.    status_messages.innerHTML = "connecting to "+ BrokerURI;
  44.    mqtt = new Paho.MQTT.Client(BrokerURI,port,"clientjs");
  45.     var options = {userName: MQTTUserName,
  46.              password: ExternalAccessToken,
  47.              timeout: 3,  
  48.              onSuccess: onConnect, };
  49.    mqtt.connect(options);
  50.    mqtt.onConnectionLost = onConnectionLost;
  51.    mqtt.onMessageArrived = onMessageArrived;
  52.   };
  53. </script>
  54. <body>
  55.   <script type="text/javascript">
  56.   MQTTconnect();
  57.   </script>
  58. </body>
  59. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement