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.
Michael Ellerbeck 