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