Working version – MQTT and Tulip Custom Widget

From Working version – MQTT and Tulip Custom Widgets – Michael Ellerbeck

So this is a bit of a gnarly setup, because wss needs to use certificates. First off we need to make some certificates for mosquitto.

Steve here pretty much wins the internet for this :slight_smile:

Easy way to get openssl is to install git for windows and then ssl will be in

C:\Program Files\Git\usr\bin

You NEED to use the FQDN of the computer!

  1. openssl genrsa -des3 -out ca.key 2048
  2. openssl req -new -x509 -days 1826 -key ca.key -out ca.crt
  3. openssl genrsa -out server.key 2048
  4. openssl req -new -out server.csr -key server.key
  5. openssl x509 -req -in server.csr -CA ca.crt -CAkey ca.key -CAcreateserial -out server.crt -days 360

Copy the files ca.crt, serever.crt and server.key to a folder under the mosquitto folder. I have used a folder called certs.

Edit your mosquitto.conf (I think I found a bug that you need to include socket_domain ipv4)

listener 9001 protocol websockets socket_domain ipv4 cafile c:\mosquitto\certs\ca.crt keyfile c:\mosquitto\certs\server.key certfile c:\mosquitto\certs\server.crt

If it throws an error check that you didn’t switch the keyfile with the certfile or typo :slight_smile:

Run mosquitto

c:\mosquitto>mosquitto -c mosquitto.conf -v

Check that you can connect to mosquitto using MQTT Explorer (from another computer on the same network if you have one :slight_smile:

Use the fqdn as the computer name (You did use it in the cert right!)

You need to check encryption (this puts it into wss mode) and change the Protocol to ws://

Copy the ca.crt over to the other computer. Finally, click advanced → certificates.

Choose the ca.crt.

Then click connect. If you are lucky you should see

Since its a self signed certificate we need to tell the browser to trust it.

So navigate chrome to https://yourcomputer:9001

You will see

Click advanced, and proceed. You have now trusted the certificate.

Then with a couple of tweaks to the javascript

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(‘’); function main () { const connectUrl = ‘wss://computername:9001’ const client = mqtt.connect(connectUrl) // const client = mqtt.connect(options); client.on(‘connect’, function() { console.log(‘connected!’); document.getElementById(“p1”).innerHTML = “MQTT - Connected”; client.subscribe(‘hello123’); setInterval(function() { client.publish(‘hello123’, ‘world123’); }, 30000); }); client.on(‘message’, function(topic, message) { console.log(topic + ': ’ + message.toString()); fireEvent(“MESSAGE”,message.toString()); });‘error’, (err) => { console.log(‘error’, err); client.end() }); // client.on(‘error’, (err) => { // console.log(‘error’, err); // client.end() // }); getValue(‘topic’,(tempVar) => { console.log('subscribed to ’ + tempVar); tempVar && client.subscribe(tempVar); }); }

You need props and an event of course

Bit of html



To test, whip up a quick nodered flow say with a inject timestamp that repeats every second and then writes to your mqqt broker on the topic of test.

Create a quick app, drop the MQTT widget on it. Set the topic to test

Create a trigger that stores the MESSAGE into a variable

And there you have it, a custom MQTT widget that can display things that are posted to a channel.


I hope it will be a standard connector/functions in Tulip soon! Subscribe to a topic through input function, publish a topic payload from an app will be great.

1 Like

@mellerbeck - This is really really cool. Can’t believe you made this work!

@youri.regnaud - Native MQTT is coming very soon. There is work going on to unify datasources into Tulip to make the process for piping all sorts of data into Tulip easier. MQTT is one of the first protocols to be integrated with this new approach.

I am very excited for native support too!

1 Like