Implementing MQTT in flask

Question

I want to ask a question regarding on how to implementing mqtt in flask. I wrote some code where when I go to the specific page, it will receive message, storing it inside the database and then output the message in a table in that specific page.

Below is the snippet of my code.

'views.py'

from flask import render_template, request, url_for, redirect, flash
from flask_wtf import Form
from flask_login import login_user, logout_user, login_required
import paho.mqtt.client as mqtt
from app import app, db
from models import User, Data

...other @app.route...

@app.route('/table')
@login_required
def table_data():
    def on_connect(client, userdata, flags, rc):
        flash("connected")

        client.subscribe("abc123")

    def on_message(client, userdata, msg, message):
        message = Data(temperature=msg.temperature, ph=msg.pH, time=msg.time)

        db.session.add(message)
        db.session.commit()

client = mqtt.Client(client_id = "my_visualise", clean_session = True)
client.username_pw_set("mosquitto", "mosquitto")
client.on_connect = on_connect
client.on_message = on_message

return render_template('table_data.html')

'models.py'

from app import app, db

...User table...

# Data table
class Data(db.Model):
    __tablename__= 'data_reading'
    id = db.Column(db.Integer, primary_key=True)
    temperature = db.Column(db.Integer, index=True)
    pH = db.Column(db.Integer, index=True)
    time = db.Column(db.DateTime, index=True)

    def __init__(self, temperature, pH, time):
        self.temperature = temperature
        self.pH = pH
        self.time = time


db.create_all()

'table_data.html'

...
<div class="jumbotron">
    <div class="container-fluid">
        <h2>Data</h2>
        <p>This table includes the data for temperature, pH value and time</p>
        <div class="table-responsive">
            <table class="table", border=2>
                        {% for value in message.iteritems() %}
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>Temperature</th>
                            <th>pH Value</th>
                            <th>Timestamp</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> {{value}} </td>
                        </tr>
                    </tbody>
                    {% endfor %}
                </table>
            </div>
        </div>

I run the code locally on my computer. No error at first but once I go to the page '/table', I see the following error.

'error'

UndefinedError: 'message' is undefined

I believe this must be the problem with the way I wrote the script in 'views.py' since I did not find any example or tutorial that I can understand good enough to implement mqtt in flask. So I decided to try implement it on my own.

I would like to ask your opinion about this.

Thanks in advance.

Answer 1

I don't know enough about flask to give a working example, but you need to move all the mqtt code to a separate thread where it can run continuously. Then the onMessage function can still store arriving messages in the database.

Then you can just render results directly from the database.