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

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

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

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


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

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

// called when the client loses its connection
function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {

// called when a message arrives
function onMessageArrived(message) {


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: Logo

You are commenting using your 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