Using JavaScript to process MQTT messages that have been received

121 views
Skip to first unread message

Bruce Emsworth

unread,
Dec 15, 2017, 2:41:24 PM12/15/17
to MQTT
I am using PAHO MQTT javascript client to retrieve mesaages from an MQ queue and am trying to publish them on to a web page.

I can get it working with a single queue, but I am having problems with my JavaScript getting the program to branch based on what is in the payload.
Basically it is a RPi0 acting as an alarm with inputs from magnetic switches and a PIR. This currently publishes messages to a queue called "highmount/garageb/alarm" on a RPi3 and that is all working fine. I can use an MQTT monitor and see the messages being published as expected.

What I am trying is to do is get the web page to change an element of the web page based on the message content. The content is a series of strings - "top", "front", "back", "side", "PIR" and I want to change an element in the web page depending on what is received.

My JavaScript is poor! So any help would be gratefully received, even a link to an example that uses the message data this way would be great.

An extract of the code for a single queue & message is working and it is this ...


  <body>
   <p> This is file garbalmsubXX.html</p>
   <p> It gets updates from the RPi</p>

   <table id="garageb">

   <tr>                                       <!--- Row 1 --->
   <td>MQTT Queue name is </td>
   <td colspan="2" id= "Queue_name"></td>     <!--- colspan is just for formatting --->
   </tr>
  
   <tr>                                       <!--- Row 2 --->
   <td>Status is </td>
   <td id="status"></td>                 <!---  This works if it the FIRST use --->
   <td></td>
   </tr>
   </table>


<script type="text/javascript">

    var clientID = "ID-" + Math.round(Math.random() * 1000);
    var client = new Paho.MQTT.Client("192.168.1.203", 9001, clientID);  // updated to 203 and port 9001

    client.connect({onSuccess:onConnect});                      // Confirm connection on web page console right click and select "inspect element"

    client.onMessageArrived = function (message) {              // Pre defined function to receive messages
        console.log("Message arrived    "+ message.payloadString);
        console.log("Topic              "+ message.destinationName);
        document.getElementById("Queue_name").innerHTML= message.destinationName;
        document.getElementById("status").innerHTML= message.payloadString;
        
       
                                                 }

    function onConnect() {
        console.log("connected");
        client.subscribe("highmount/garageb/alarm");             // Subscribe to queue - moved to within function
                         }
</script>
</body>


So now I am trying to branch based on the content of the message, and I can't get that working ....



    client.onMessageArrived = function (message) {              // Pre defined function to receive messages
        console.log("Message arrived    "+ message.payloadString);
        console.log("Topic              "+ message.destinationName);
        document.getElementById("Queue_name").innerHTML= message.destinationName;
        document.getElementById("status").innerHTML= message.payloadString;
        if "status" == "red" :
            var "Top" = "Alarm"
        else "status" == "green"
            var "Top" = "OK"
           
        if "status" == "front"
            var Front = "Front Door"
       
                                                 }


I have been looking for examples but most seem to just show how to get the messages to log onto the console log.

Can anyone suggest how to get this going?
Thanks
Bruce





Reply all
Reply to author
Forward
0 new messages