Working version – MQTT and Tulip Custom Widgets

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 🙂

Mosquitto SSL Configuration -MQTT TLS Security

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 🙂

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

<!DOCTYPE html>
<html>
   <p id="p1">MQTT</p>
  <head>
    <meta charset="utf-8" />
    <title>MQTT</title>
   </head>
</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.

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