Help with import paho-mqtt module

Hi, everyone,

I’m new to JavaScript and also new to scriptable.app.

Can any one show me an example of how to import paho-mqtt module and get it running in scriptable?

The module is
https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js

I have it working with tags in browser, but when I try to import it in scriptable.app, It’s just too complicated for me now.

Firstly, I try another approach which “document element” doesn’t work.

Then, I downloaded the file put it in iCloud folder it shows “window” not defined.

Lastly, I deleted the variable window, then it does not call anything inside at all. Poping up “Paho” not defined, but same way to call the function works in browser with no issue.

If anyone has any experience in this module can I please have some help.

Many Thanks.

 // var script = document.createElement('script');
        // script.onload = function () {
        console.log("Loaded........ ")     
        // do stuff with the script
        var mqtt_server = "dc87a3d9523a42798c3d086fd8acbdb5.s1.eu.hivemq.cloud";
        var mqtt_port = 8884; // hivemqs websocket port is 8884 different than python ........
        var client_id = "PicoW";
        var mqtt_username = "username";
        var mqtt_psd = "password";
        var topic_pub = "test";
        var topic_msg = "Start";
        var mqtt;
        var reconnectTimeout = 2000;
        var host = mqtt_server;
        var port = mqtt_port;

        function onConnect() {
            // Once a connection has been made, make a subscription and send a message.
            console.log("Connected")
            // matt. subscribe("sensor1");
            mqtt.subscribe("test")
            message = new Paho.MQTT.Message("Hello World");
            message.destinationName = "test";
            mqtt.send(message);
            console.log("sent")
        }

        function MQTTConnect(){
            console.log("connecting to " + host + " " + port);
            mqtt = new Paho.MQTT.Client(host, port, "picoW");
            //document.write("connecting to " + host);
            var options = {
                userName: mqtt_username,
                password: mqtt_psd,
                useSSL: true,
                // ssl_params: {"server_hostname": mqtt_server},
                timeout: 3,
                onSuccess: onConnect,
            };
            mqtt.connect(options);
            // connect
        }

             
        MQTTConnect();


        // };
        // script.src = 'https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js';
        // document.head.appendChild(script);   

For info, document and window are objects found in browsers, but are not part of core JavaScript. They are not currently present in Scriptable because Scriptable has no browser windows or document object model.

You may need to closely review how the library is architected to establish if it is possible to rework it’s integration to be compatible with Scriptable. i.e. If there are key browser-based dependencies you may have to establish workarounds.

You could use a WebView to evaluate your current script. That way the library will have access to the window and document objects. It’s not the most ideal, but would be the easiest solution to implement in my opinion.

Might be worth taking a look at https://www.npmjs.com/package/mqtt instead. It says it works in NodeJS, so it doesn’t require running in a browser.