Using MQTT from JavaScript

To facilitate your start with FROST and MQTT, we provide a short abstract about how to subscribe to FROST via MQTT.

In the following, we use Eclipse Paho as an MQTT client and a FROST server as MQTT broker.

Steps:

1. Require Paho from your trusted cdn, such as:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js" type="text/javascript"></script>

2. In your JS, create a new Paho Client (find the blue print for the instanciation of a Paho Client here) and give it appropriate callback handlers

    let pahoConfig = {
            hostname: "localhost",  //The hostname is the url, under which your FROST-Server resides.
            port: "9876",           //The port number is the WebSocket-Port,
                                    // not (!) the MQTT-Port. This is a Paho characteristic.
            clientId: "ClientId"    //Should be unique for every of your client connections.
    }
   
    client = new Paho.Client(pahoConfig.hostname, Number(pahoConfig.port), pahoConfig.clientId);
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;
   
    client.connect({
        onSuccess: onConnect
    });
   
    function onConnect() {
    // Once a connection has been made, make a subscription and send a message.
    console.log("Connected with Server");
    client.subscribe("v1.1/Observations");
    }
   
    function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0) {
            console.log("onConnectionLost:" + responseObject.errorMessage);
        }
    }
    function onMessageArrived(message) {
        console.log("onMessageArrived:" + message.payloadString);
        let j = JSON.parse(message.payloadString);
        handleMessage(j);
    }
   

3. Do something with your received message

    function handleMessage(message) {
        if (message != null && message != undefined) {
               console.log(message)
        }
    }