在浏览器中从AJAX轮询并获取MQTT消息

问题描述

初学者在这里.

好的，我正在尝试完成一个简单的数据流:

MQTT-数据源---> MQTT代理---> NodeJS-MQTT-客户端---> AJAX-on-Web浏览器(每3秒钟轮询一次)

• 我希望能够获得MQTT消息并将其显示在浏览器端的AJAX组件中.
• 第二，在 console.log(mqttMessage); 上，我如何清除以前的消息?因为在控制台上，我可以看到所有以前的数据以及新的数据.

我正在使用mqtt.js来支持Express上的nodejs mqtt.

 //Server.jsvar mqtt = require('mqtt');......var getData = function(){mqttClient.subscribe(mqttTopic);mqttClient.on('message'，function(topic，message){mqttMessage = message.toString();console.log(mqttMessage);})返回mqttMessage;}app.get('/pollData'，function(req，res){res.send(getData());}); 

在一个简单的html页面上，我得到了:

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

解决方案

这是一个非常糟糕的模式，您应该只使用Paho MQTT Javascript客户端并直接从网页上订阅该主题.

但是，如果您真的想这样做，那么以下是正确的方法.

 //Server.jsvar 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){如果(mqttMessage){res.send(mqttMessage);} 别的 {res.status(404).send();}}); 

这是因为您没有从MQTT主题中读取值，您必须等到在该主题上发布某些内容之后，代理程序才能将其转发给所有订阅者.因此，在上面的代码中，您设置了连接，进行订阅，然后在发布消息时将其存储在 mqttMessage 变量中，然后，如果未定义它，则可以由REST端点返回./p>

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 want to be able to get the MQTT message and show it in the AJAX component in browser side.
• Secondly, on console.log(mqttMessage);, how do i clear previous messages? Because on console I can see all previous data as well as the new data adding up.

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>

解决方案

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.

这篇关于在浏览器中从AJAX轮询并获取MQTT消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！