mqtt02

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Fri Jan 31 2025 19:09:35 GMT-0500 (Eastern Standard Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: mqtt02
Description: more recent test of MQTT with Xholon
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 82891ff9cd24e80a55a324a0d02e42c7  based on f5e96cc46c8df10c0d7ffaaccbd17746
Keywords: MQTT

My Notes
--------
31 Jan 2025
- use http rather than https
http://primordion.com/Xholon/gwt/Xholon.html?app=82891ff9cd24e80a55a324a0d02e42c7&src=gist&gui=clsc&jslib=mqttws31

28 Jan 2025
- I updated it to connect to Pi Zero 192.168.2.30 

Pi Zero command:
mosquitto_pub -t test/message -m '{"t":24.3,"h":37.0,"l":40265,"m":0,"r":[2023, 1, 9, 1, 11, 49, 3]}'
- the command has to be a JSON string, and for now must have a value for "r"

- contents of out tab:
Connecting to: 192.168.2.30 on port: 8080
Subscribing to topic: test/message
Temperature,Humidity,Light,Sound,Motion,Where,Datetime
24.3,37,40265,undefined,0,undefined,01/09/2023T11:49:04
24.3,37,40265,undefined,0,undefined,01/09/2023T11:49:05

- it now works all the way from pressing a button attached to Pi Zero + Grove HAT:
message from pizero2w button pressed ...
message from pizero2w button pressed ...
message from pizero2w button pressed ...

6 Jan 2023

This workbook is an initial test of MQTT with Xholon.
The overall system consists of:
- a Raspberry Pi Pico W (a tiny microcontroller board with built-in WiFi)
  - connected to a Grove Shield connected to several Grove sensors
    - a DHT11 sensor that reads the temperature and humidity in a room
    - a Light sensor that reads the light intensity in the room
  - running a microPython program that bundles the temperature, humidty, and light, into a JSON object,
    and publishes this to the MQTT Broker, every 60 seconds, using the topic KenzEnviro/thl
- a Mosquitto Broker running as a service on a Linux (Ubuntu) laptop
- this Xholon Workbook app
  - that subscribes to the KenzEnviro/thl topic from the Mosquitto Broker
- many other client apps, including:
  - a Node-Red nodejs app that subscribes to the same Mosquitto Broker, and
    - displays the raw JSON data in a debug tab, and
    - updates a Node-Red-Dashboard web page that presents the data in a nice dashboard
  - a simple browser-based app that displays the raw data on a web page (see ref[1])
    - using Firefox, and
    - using Chrome
  - a nodejs-based app that displays the raw data to a terminal window
  - mosquitto_sub -d -t KenzEnviro/thl
    - running in a terminal window

http://127.0.0.1:8080/war/Xholon.html?app=mqtt01&src=lstr&gui=clsc&jslib=mqttws31
http://127.0.0.1:8081/war/Xholon.html?app=mqtt01&src=lstr&gui=clsc&jslib=mqttws31
http://127.0.0.1:8081/war/Xholon.html?app=mqtt01&src=lstr&gui=clsc&jslib=mqttws31.min

the following code works from Firefox Dev Tools
-----------------------------------------------
function startConnect() {
    clientID = "clientID-" + parseInt(Math.random() * 100);
    host = "192.168.1.15";
    port = 8080;
    console.log("Connecting to: " + host + " on port: " + port + "\n");
    topic = "KenzEnviro/thl";
    client = new Paho.MQTT.Client(host, Number(port), clientID);
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    // Connect the client, if successful, call onConnect function
    client.connect({ 
        onSuccess: onConnect,
        //userName:"USERNAME", 
	//password:"PASSWORD"
    });
}

// Called when the client connects
function onConnect() {
    // Fetch the MQTT topic from the form
    topic = "KenzEnviro/thl"

    // Print output for the user in the messages div
    console.log("Subscribing to: " + topic + "\n");

    // Subscribe to the requested topic
    client.subscribe(topic);
}

// Called when the client loses its connection
function onConnectionLost(responseObject) {
    console.log("onConnectionLost: Connection Lost");
    if (responseObject.errorCode !== 0) {
        console.log("onConnectionLost: " + responseObject.errorMessage);
    }
}

// Called when a message arrives
function onMessageArrived(message) {
    console.log("onMessageArrived: " + message.payloadString);
    console.log("Topic: " + message.destinationName + " | "  + message.payloadString + "");
    updateScroll(); // Scroll to bottom of window
}

// Called when the disconnection button is pressed
function startDisconnect() {
    client.disconnect();
    console.log("Disconnected");
    updateScroll(); // Scroll to bottom of window
}

// Updates #messages div to auto-scroll
function updateScroll() {
    //var element = document.getElementById("messages");
    //element.scrollTop = element.scrollHeight;
}

startConnect();

To Build and Run Xholon
-----------------------
It's been over a year since I last built and ran a Xholon Workbook on my local Linux laptop.
I'm writing down all the steps here.
cd ~/gwtspace/Xholon/Xholon
ant clean
- delete files in /tmp
ant -Dgwt.args="-strict" gwtc
npx http-server
- in browser
  http://127.0.0.1:8081  OR
  http://192.168.1.15:8081

9 Jan 2023
----------
I've added a Motion Sensor and Real-Time Clock to the Pico-Grove system.
This Xholon app displays that data as well.

References
----------
(1) https://github.com/thomaslaurenson/MQTT-Subscription-Examples
  ) https://github.com/thomaslaurenson/MQTT-Subscription-Examples/tree/master/js-mtt-websockets-demo
MQTT Subscription Application Examples for IoT Projects
A collection of simple applications that can subscribe to topics from an MQTT broker.
The applications are written in a variety of programming languages to provide examples for different platforms.
js-mqtt-websockets-demo
A simple web application that can subscribe to MQTT topics from an MQTT broker using websockets.
Provides a simple user interface to enter in hostname/IP address, port number and MQTT topic.
demo.js
index.html

(2) https://github.com/eclipse/paho.mqtt.javascript
Eclipse Paho JavaScript client
The Paho JavaScript Client is an MQTT browser-based client library written in Javascript
that uses WebSockets to connect to an MQTT Broker.
Project description:
The Paho project has been created to provide reliable open-source implementations of open
and standard messaging protocols aimed at new, existing, and emerging applications
for Machine-to-Machine (M2M) and Internet of Things (IoT).
Paho reflects the inherent physical and cost constraints of device connectivity.
Its objectives include effective levels of decoupling between devices and applications,
designed to keep markets open and encourage the rapid growth of scalable Web
and Enterprise middleware and applications.
- includes simple example code that is very similar to ref[1] demo.js

(3) https://www.npmjs.com/package/mqtt
- another JavaScript MQTT client
MQTT.js is a client library for the MQTT protocol, written in JavaScript for node.js and the browser.

(4) http://www.steves-internet-guide.com/using-javascript-mqtt-client-websockets/
- steves-internet-guide has some good examples and guidance on MQTT and Paho

(5) https://www.eclipse.org/paho/index.php?page=clients/js/index.php
https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js
https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js

(6) https://www.eclipse.org/paho/

(7) https://github.com/tigoe/mqtt-examples
- has browser and arduino examples
  ) https://github.com/tigoe/mqtt-examples/tree/main/browser-clients/eclipse-pahojs/EclipsePahoClientSimple

(8) https://github.com/tigoe
- many other useful projects

(9) https://en.wikipedia.org/wiki/MQTT

(10) https://en.wikipedia.org/wiki/Comparison_of_MQTT_implementations

(11) https://github.com/mqtt/mqtt.org/wiki/libraries

(12) https://mosquitto.org/
- I am using the Mosquitto MQTT broker, running as a service on my Linux laptop

]]></Notes>  

<_-.XholonClass>

  <!-- domain objects -->
  <PhysicalSystem/>
  <ThlClient/>
  
</_-.XholonClass>

<xholonClassDetails>
</xholonClassDetails>

<PhysicalSystem>
  
  <!--<ThlClient host="192.168.1.15" port="8080" clientidPrefix="clientID-" topic="KenzEnviro/thl"/>-->
  <ThlClient host="192.168.2.30" port="8080" clientidPrefix="clientID-" topic="test/message"/> <!-- is 443 the secure ssl port? 443 doesn't work  8883? no -->
</PhysicalSystem>

<ThlClientbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var me, beh = {
    postConfigure: function() {
      me = this.cnode.parent();
      this.startConnect();
    },
    
    startConnect: function() {
      me.clientID = me.clientidPrefix + parseInt(Math.random() * 100);
      me.println("Connecting to: " + me.host + " on port: " + me.port);
      me.client = new $wnd.Paho.MQTT.Client(me.host, Number(me.port), me.clientID);
      me.client.onConnectionLost = this.onConnectionLost;
      me.client.onMessageArrived = this.onMessageArrived;
      
      me.client.connect({ 
        onSuccess: this.onConnect,
        //userName:"USERNAME", 
	//password:"PASSWORD"
        //userName: "pizerosensors",
        //password: "password",
        //useSSL: true
      });
    },
    
    onConnect: function() {
      me.println("Subscribing to topic: " + me.topic);
      me.client.subscribe(me.topic);
      me.println("Temperature,Humidity,Light,Sound,Motion,Where,Datetime");
    },
    
    onConnectionLost: function(responseObject) {
     me.println("Connection Lost");
      if (responseObject.errorCode !== 0) {
        me.println("onConnectionLost: " + responseObject.errorMessage);
      }
    },
    
    onMessageArrived: function(message) {
      me.println("Topic: " + message.destinationName + " "  + message.payloadString);
      beh.processPayload(message.payloadString);
    },
    
    startDisconnect: function() {
      me.client.disconnect();
      me.println("Disconnected");
    },
    
    processPayload: function(json) {
      // json is a JSON Oject  ex: {"t":24.2,"h":33.0,"l":1248}   {"t":24.3,"h":37.0,"l":40265,"m":0,"r":[2023, 1, 9, 1, 11, 49, 3]}
      if (json.trim().startsWith("{")) {
        var jsobj = JSON.parse(json);
        var dt = jsobj.r.map(ele => ele < 10 ? "0" + ele : "" + ele);
        me.println(`${jsobj.t},${jsobj.h},${jsobj.l},${jsobj.s},${jsobj.m},${jsobj.w},${dt[1]}/${dt[2]}/${dt[0]}T${dt[4]}:${dt[5]}:${dt[6]}`);
      }
      else {
        me.println(json);
      }
    }
  }
  //# sourceURL=ThlClientbehavior.js
]]></ThlClientbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>PhysicalSystem</title>
    <rect id="PhysicalSystem" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>ThlClient</title>
      <rect id="PhysicalSystem/ThlClient" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>