MQTT Web Interface 使用教程

1. 项目的目录结构及介绍

MQTT Web Interface 的目录结构如下：

mqttui/
├── .github/               # GitHub 工作流文件
├── static/                # 静态文件，如 CSS 和 JavaScript
├── templates/             # HTML 模板文件
├── .env_example           # 环境变量示例文件
├── .gitignore             # Git 忽略文件
├── CHANGELOG.md           # 更新日志
├── Dockerfile             # Docker 容器构建文件
├── LICENSE.md             # 许可证文件
├── README.md              # 项目说明文件
├── app.py                 # 应用启动文件
├── debug_bar.py           # 调试工具文件
├── docker-compose.yml     # Docker 编排文件
├── entrypoint.sh          # 容器启动入口脚本
├── requirements.txt       # 项目依赖文件

• .github/: 包含 GitHub Actions 工作流，用于自动化测试和部署等。
• static/: 包含项目的静态文件，如 CSS 和 JavaScript 文件。
• templates/: 包含项目的 HTML 模板文件。
• .env_example: 包含项目环境变量的示例配置。
• .gitignore: 指定 Git 应该忽略的文件和目录。
• CHANGELOG.md: 记录了项目的更新历史和版本变更。
• Dockerfile: 用于构建项目的 Docker 容器镜像。
• LICENSE.md: 项目的 MIT 许可证文本。
• README.md: 项目的介绍和说明。
• app.py: 项目的主要应用启动脚本。
• debug_bar.py: 用于开发过程中的调试工具。
• docker-compose.yml: 用于定义和运行多容器 Docker 应用。
• entrypoint.sh: 容器启动时运行的脚本。
• requirements.txt: 列出了项目运行所需的 Python 依赖库。

2. 项目的启动文件介绍

项目的启动文件是 app.py。这个文件负责初始化 Flask 应用，并设置路由和视图函数。以下是一个简化的 app.py 文件内容：

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

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

if __name__ == '__main__':
    socketio.run(app, debug=True)

在这段代码中，我们首先从 flask 和 flask_socketio 模块导入了所需的类。然后创建了 Flask 应用实例，并为其配置了 SECRET_KEY。接着创建了 SocketIO 实例，用于处理 WebSockets 连接。之后定义了一个路由 /，当用户访问这个路由时，会返回 index.html 模板。最后，如果这个脚本作为主程序运行，我们使用 socketio.run(app, debug=True) 来启动应用。

3. 项目的配置文件介绍

项目的配置主要通过环境变量进行。在项目根目录下有一个 .env_example 文件，这个文件提供了环境变量的示例配置。你可以根据需要创建一个 .env 文件，并填入相应的配置信息。

以下是 .env_example 文件的内容：

# MQTT Web Interface 环境变量配置

# 运行模式
DEBUG=True

# 应用运行端口
PORT=5000

# MQTT 代理配置
MQTT_BROKER=localhost
MQTT_PORT=1883
MQTT_USERNAME=your_username
MQTT_PASSWORD=your_password
MQTT_KEEPALIVE=60
MQTT_VERSION=3.1.1

这些环境变量可以在运行应用之前通过设置环境变量的方式传递给应用，也可以直接在 app.py 文件中读取这些值来配置应用。在开发模式下，你可以将配置直接写入 .env 文件，然后在 app.py 中使用 python-dotenv 库来加载这些环境变量。在产品环境中，你应该使用更安全的配置方法，比如 Docker 环境变量或配置管理系统。