Created
May 27, 2025 09:08
-
-
Save id/f942d2744aa435b0a985352c9ecb8c94 to your computer and use it in GitHub Desktop.
simple mqtt client with web ui
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import eventlet | |
| from flask import Flask, send_from_directory | |
| from flask_socketio import SocketIO, emit | |
| from paho.mqtt.client import CallbackAPIVersion | |
| import paho.mqtt.client as mqtt | |
| eventlet.monkey_patch() | |
| app = Flask(__name__) | |
| socketio = SocketIO(app) | |
| MQTT_BROKER = "localhost" | |
| MQTT_PORT = 1883 | |
| mqtt_client = mqtt.Client(CallbackAPIVersion.VERSION2) | |
| # MQTT event callbacks | |
| def on_connect(client, userdata, flags, rc, properties=None): | |
| print("Connected to MQTT broker") | |
| def on_message(client, userdata, msg): | |
| socketio.emit("mqtt_message", {"topic": msg.topic, "message": msg.payload.decode()}) | |
| mqtt_client.on_connect = on_connect | |
| mqtt_client.on_message = on_message | |
| mqtt_client.connect(MQTT_BROKER, MQTT_PORT) | |
| mqtt_client.loop_start() | |
| # WebSocket events | |
| @socketio.on("subscribe") | |
| def handle_subscribe(topic): | |
| mqtt_client.subscribe(topic) | |
| emit("subscribed", {"topic": topic}) | |
| @socketio.on("publish") | |
| def handle_publish(data): | |
| topic = data["topic"] | |
| message = data["message"] | |
| mqtt_client.publish(topic, message) | |
| @app.route("/") | |
| def index(): | |
| return send_from_directory(".", "index.html") | |
| if __name__ == "__main__": | |
| socketio.run(app, host="0.0.0.0", port=4000) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>MQTT Web UI (Python backend)</title> | |
| <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script> | |
| </head> | |
| <body> | |
| <h2>MQTT Web UI (via TCP backend)</h2> | |
| <input id="topic" placeholder="Topic"> | |
| <input id="message" placeholder="Message"> | |
| <button onclick="publish()">Publish</button> | |
| <button onclick="subscribe()">Subscribe</button> | |
| <div id="messages"></div> | |
| <script> | |
| const socket = io(); | |
| function publish() { | |
| const topic = document.getElementById('topic').value; | |
| const message = document.getElementById('message').value; | |
| socket.emit('publish', { topic, message }); | |
| } | |
| function subscribe() { | |
| const topic = document.getElementById('topic').value; | |
| socket.emit('subscribe', topic); | |
| document.getElementById('messages').innerHTML += `<p>Subscribed to ${topic}</p>`; | |
| } | |
| socket.on('mqtt_message', data => { | |
| document.getElementById('messages').innerHTML += `<p><b>${data.topic}:</b> ${data.message}</p>`; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| eventlet>=0.40.0 | |
| flask>=3.1.1 | |
| flask-socketio>=5.5.1 | |
| paho-mqtt>=2.1.0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment