WSS Websocket to MQTT updating website

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.


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
    <script src="" type="text/javascript"></script>
     <script type = "text/javascript" 
         src = ""></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(){
			    document.getElementById("status").innerHTML = "Connection to HQ Lost";

    function onFailure(message) {
        setTimeout(MQTTconnect, reconnectTimeout);
    function onMessageArrived(r_message){
        var topic=r_message.destinationName;
			    document.getElementById("status").innerHTML = "";

			    $(".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.
			    document.getElementById("status").innerHTML = "Connection made to HQ";


    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 = {
        timeout: 3,
        onSuccess: onConnect,
        onFailure: onFailure,
        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;

    return false;
    function sub_topics(){
        document.getElementById("messages").innerHTML ="";
        if (connected_flag==0){
        out_msg="<b>Not Connected so can't subscribe</b>"
        document.getElementById("messages").innerHTML = out_msg;
        return false;
    var stopic= document.forms["subs"]["Stopic"].value;
    console.log("Subscribing to topic ="+stopic);
    return false;
    function send_message(msg,topic){
        if (connected_flag==0){
        out_msg="<b>Not Connected so can't send</b>"
        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;

        return false;

@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%);

  <body onload="MQTTconnect()">

	  <div class=imageview>
<img class="deze" src="tiles/00.png"> 
<div id="status">Connection Status: Not Connected</div>

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *