Last Updated or created 2023-05-08
Using a mqtt server with websockets and a website with the Eclipse Paho JavaScript Client
Above video: Joystick sends movement through the internet to my mqtt server, laptop is fetching a webpage from one of my webservers.
A piece of javascript connects via websockets to the mqtt server and realtime changes the displayed image.
I intend to display maps and views into a maze you can walk through. like: (shamelessly stolen image from the internet)
I already have written another piece of code which generates a maze, and tells you using samples which way to go.
CODE
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
var connected_flag=0
var mqtt;
var reconnectTimeout = 2000;
var host="MQTTSERVER";
var port=8084;
var sub_topic="web/#";
function onConnectionLost(){
connected_flag=0;
document.getElementById("status").innerHTML = "Connection to HQ Lost";
}
function onFailure(message) {
console.log("Failed");
setTimeout(MQTTconnect, reconnectTimeout);
}
function onMessageArrived(r_message){
var topic=r_message.destinationName;
document.getElementById("status").innerHTML = "";
if(topic=="web/mapviewer")
{
$(".deze").attr("src","tiles/" + r_message.payloadString + ".png");
}
}
function onConnected(recon,url){
console.log(" in onConnected " +reconn);
}
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
connected_flag=1
document.getElementById("status").innerHTML = "Connection made to HQ";
mqtt.subscribe(sub_topic);
}
function MQTTconnect() {
console.log("connecting to "+ host +" "+ port);
var x=Math.floor(Math.random() * 10000);
var cname="controlform-"+x;
//var cname="escape1";
mqtt = new Paho.MQTT.Client(host,port,cname);
var options = {
useSSL:true,
timeout: 3,
onSuccess: onConnect,
onFailure: onFailure,
};
mqtt.onConnectionLost = onConnectionLost;
mqtt.onMessageArrived = onMessageArrived;
mqtt.connect(options);
return false;
}
function sub_topics(){
document.getElementById("messages").innerHTML ="";
if (connected_flag==0){
out_msg="<b>Not Connected so can't subscribe</b>"
console.log(out_msg);
document.getElementById("messages").innerHTML = out_msg;
return false;
}
var stopic= document.forms["subs"]["Stopic"].value;
console.log("Subscribing to topic ="+stopic);
mqtt.subscribe(stopic);
return false;
}
function send_message(msg,topic){
if (connected_flag==0){
out_msg="<b>Not Connected so can't send</b>"
console.log(out_msg);
document.getElementById("messages").innerHTML = out_msg;
return false;
}
var value=msg.value;
console.log("value= "+value);
console.log("topic= "+topic);
message = new Paho.MQTT.Message(value);
message.destinationName = "web/"+topic;
mqtt.send(message);
return false;
}
</script>
<style>
@media only screen and (max-width: 600px) {
div {
max-width: 320px;
}
img {
max-width: 320px;
}
}
div.imageview {
color: white;
background: gray;
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
</head>
<body onload="MQTTconnect()">
<div class=imageview>
<img class="deze" src="tiles/00.png">
<div id="status">Connection Status: Not Connected</div>
</div>
</body>
</html>