Adventures with MQTT and Tulip Custom Widgets

I was experimenting trying to create a MQTT custom widget.

The first thing I wanted to establish was a browser talking to a MQTT broker. After a little bit of research

Using The JavaScript MQTT Client With Websockets

To publish and subscribe to an MQTT broker with a browser you will need to use a JavaScript MQTT over websockets client.

So, download yourself a copy of mosquitto https://mosquitto.org/download/

Configure it for websockets (edit mosquitto.conf)

listener 9001
protocol websockets

For testing

allow_anonymous true

So assuming you have mosquitto up and running now

Next, create a .html file to create a javascript websocket connection

https://datacoveeu.github.io/API4INSPIRE/sensorthingsapi/requestingData/STA-mqtt-javascript.html

<html>
<script>
async function loadScripts(...urls) {
  for (const thisUrl of urls) {
    console.log(`Loading script "${thisUrl}"...`);

    const response = await fetch(thisUrl);
    const responseBody = await response.text();

    const scriptElm = document.createElement("script");
    const inlineCode = document.createTextNode(responseBody);
    scriptElm.appendChild(inlineCode);
    document.body.appendChild(scriptElm);

    console.log(`Script "${thisUrl}" successfully loaded`);
    main();
  }
}

loadScripts('https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js');

function main() {
console.log('started main');
var hostname = 'localhost';
var port = '9001'
// Create a client instance
client = new Paho.MQTT.Client(hostname, Number(port), "clientId123");

// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

// connect the client
client.connect({onSuccess:onConnect});


// called when the client connects
function onConnect() {
  // Once a connection has been made, make a subscription and send a message.
  console.log("onConnect");
  client.subscribe("World");
  message = new Paho.MQTT.Message("Hello");
  message.destinationName = "World";
  client.send(message);
}

// called when the client loses its connection
function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {
    console.log("onConnectionLost:"+responseObject.errorMessage);
  }
}

// called when a message arrives
function onMessageArrived(message) {
  console.log("onMessageArrived:"+message.payloadString);
}

}
</script>
</html>

So, if you run the webpage

You should see a connection

Now, I try to replicate this in a custom widget

When I add it to an app

VM1644:750 Uncaught (in promise) DOMException: Failed to read the ‘localStorage’ property from ‘Window’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at new ClientImpl (:750:43)
at new Client (:1614:16)
at main (eval at (about:srcdoc:108:14), :25:10)
at loadScripts (eval at (about:srcdoc:108:14), :14:5)

Hmm, wonder if the paho is trying to write to the local cache.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s