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 
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!
- openssl genrsa -des3 -out ca.key 2048
- openssl req -new -x509 -days 1826 -key ca.key -out ca.crt
- openssl genrsa -out server.key 2048
- openssl req -new -out server.csr -key server.key
- 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
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
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(‘https://unpkg.com/mqtt/dist/mqtt.min.js’); 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()); }); client.stream.on(‘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
MQTT
MQTTTo 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.