CODEWITHSUNDEEP
node.jsajaxexpressmqtt
bipster
bipster

Reputation: 474

Poll and get MQTT messages from AJAX in browser

Beginner here.

Ok, I'm trying to accomplish a simple data flow:

MQTT-Data-source ---> MQTT Broker ---> NodeJS-MQTT-Client ---> AJAX-on-web-browser (polling-every-3-seconds)

I'm using mqtt.js for my nodejs mqtt support on Express.

//Server.js
var mqtt            = require('mqtt');
...
...

var getData = function() {
    mqttClient.subscribe(mqttTopic);

    mqttClient.on('message', function(topic, message) {
        mqttMessage = message.toString();
        console.log(mqttMessage);
    })

    return mqttMessage;
}

app.get('/pollData', function(req, res) {
    res.send(getData());
});

And on a simple html page, I've got:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(document).ready(
        function() {
            setInterval(function() {
                    $.get('/pollData', function(res) {
                        $('#data').text(res);
                });
            }, 3000);
        }
    );
</script>

Upvotes: 1

Views: 2799

Answers (1)

hardillb
hardillb

Reputation: 59638

This is a REALLY bad pattern, you should just use the Paho MQTT Javascript client and subscribe to the topic directly from the web page.

But if you really want to do it this way then the following is the right way to do it.

//Server.js
var mqtt            = require('mqtt');
...
...

var mqttMessage;

mqttClient.subscribe(mqttTopic);

mqttClient.on('message', function(topic, message) {
    mqttMessage = message.toString();
    console.log(mqttMessage);
})


app.get('/pollData', function(req, res) {
    if (mqttMessage) {
        res.send(mqttMessage);
    } else {
        res.status(404).send();
    }
});

This is because you don't read a value from a MQTT topic, you have to wait until somethings is published on that topic, then the broker will forward it to all subscribers. So in the code above you set up the connection, subscribe, then when a message is published it is stored in the mqttMessage variable, then if it's not undefined it can be returned by the REST end point.

Upvotes: 2

Related Questions