Показать данные MQTT в шаблоне колбы

Question

Я использую Flask-MQTT и могу получать сообщения.Я следовал за следующим гидом .Когда я получаю сообщение, я хочу отобразить данные в шаблоне, но не могу этого сделать.Ниже приведен код, который у меня есть.

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')

Как я могу показать новые данные из MQTT в шаблоне graph.html, который я создал?

Answer 1

Используйте сокет для обеспечения связи в реальном времени между сервером и веб-клиентом / шаблоном.Документация Flask-MQTT уже содержит наглядный пример того, как реализовать эту сторону сервера с использованием Flask-SocketIO .На стороне клиента используйте библиотеку Javascript SocketIO .

На стороне сервера, каждый раз, когда принимается сообщение MQTT, оно должно выдавать событие mqtt_message (содержащее данные сообщения) длясокет, использующий socketio.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>

Вот как это выглядит: