在Flask模板中显示MQTT数据

问题描述 投票:1回答:1

我正在使用Flask-MQTT,我能够收到消息。我一直在关注以下guide。当我收到消息时,我想在模板中显示数据,但我无法这样做。以下是我的代码。

from flask import Flask, render_template
from flask_mqtt import Mqtt

app = Flask(__name__, template_folder='./views')
app.config['MQTT_BROKER_URL'] = 'URL'
app.config['MQTT_BROKER_PORT'] = 0000
app.config['MQTT_REFRESH_TIME'] = 1.0

mqtt = Mqtt(app)


@mqtt.on_connect()
def handle_connect(client, userdata, flags, rc):
    mqtt.subscribe('#')


@mqtt.on_message()
def handle_mqtt_message(client, userdata, message):
    data = dict(
        topic=message.topic,
        payload=message.payload.decode()
    )


@app.route('/')
def index():
    return render_template('graph.html')

如何在我创建的graph.html模板中显示来自MQTT的新数据?

python flask mqtt
1个回答
1
投票

使用套接字允许服务器和Web客户端/模板之间的实时通信。 Flask-MQTT documentation已经提供了一个关于如何使用Flask-SocketIO实现此服务器端的简洁示例。客户端,使用Javascript library of SocketIO

服务器端,每次收到MQTT消息时,它都应该使用mqtt_messagesocketio.emit()事件(包含消息数据)推送到套接字。

客户端,socket.on()用于监听mqtt_message事件并处理新事件。

以下是基于您的代码的简单工作实现。在这里,我将连接到test.mosquitto.org进行测试。每次收到新的MQTT消息时,其数据都会附加到新行上的模板中(并且还会记录到JavaScript控制台中)。

服务器端:

import eventlet
from flask import Flask, render_template
from flask_mqtt import Mqtt
from flask_socketio import SocketIO

eventlet.monkey_patch()

app = Flask(__name__, template_folder='./views')
app.config['MQTT_BROKER_URL'] = 'test.mosquitto.org'
app.config['MQTT_BROKER_PORT'] = 1883
app.config['MQTT_REFRESH_TIME'] = 1.0

mqtt = Mqtt(app)
socketio = SocketIO(app)

@mqtt.on_connect()
def handle_connect(client, userdata, flags, rc):
    mqtt.subscribe('#')

@mqtt.on_message()
def handle_mqtt_message(client, userdata, message):
    data = dict(
        topic=message.topic,
        payload=message.payload.decode()
    )
    # emit a mqtt_message event to the socket containing the message data
    socketio.emit('mqtt_message', data=data)

@app.route('/')
def index():
    return render_template('graph.html')

@mqtt.on_log()
def handle_logging(client, userdata, level, buf):
    print(level, buf)

socketio.run(app, host='localhost', port=5000, use_reloader=True, debug=True)

客户端(模板views/graph.html):

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    var socket = io.connect('http://' + document.domain + ':' + location.port);

    // listen for mqtt_message events
    // when a new message is received, log and append the data to the page
    socket.on('mqtt_message', function(data) {
      console.log(data);
      var text = '(' + data['topic'] + ' qos: ' + data['qos'] + ') ' + data['payload'];
      $('#subscribe_messages').append(text + '<br><br>');
    })
  });
</script>

<div id="subscribe_messages"></div>

这是它的样子:

client-side output

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.