一个基于 MQTT 协议的实时聊天应用，采用微信风格的界面设计，支持实时消息推送。
- ✨ 微信风格界面设计
- 🚀 实时消息推送
- 👤 用户系统
- 永久用户ID
- 可修改显示名称
- 首字母头像
- 在线状态显示
- ⌚ 消息时间戳
- ⌨️ 回车快捷发送
- 📱 移动端适配
- 📝 消息长度限制
- 🔄 自动重连机制
- 🖼️ 图片发送功能
- 支持点击上传
- 支持拖拽上传
- 自动压缩优化
- 图片预览
- 😊 表情选择器
- 40个常用表情
- 点击快速插入
- ✂️ 文本复制
- 点击消息复制内容
- 自动复制提示
- 💾 消息持久化
- 本地存储历史消息
- 自动加载历史记录
- 支持清除历史
- 👥 在线用户列表
- 实时显示在线用户
- 用户上线/下线提醒
- 用户改名提醒
chat/
├── app/ # 应用核心代码
│ ├── __init__.py
│ ├── config.py # 配置管理
│ ├── logger.py # 日志配置
│ ├── mqtt_client.py # MQTT客户端
│ ├── socket_events.py # WebSocket事件
│ └── utils.py # 工具函数
├── static/ # 静态资源
│ └── js/
│ └── chat.js # 前端脚本
├── templates/ # 模板文件
│ └── index.html # 聊天界面
├── logs/ # 日志目录
├── app.py # 应用入口
├── gunicorn_config.py # Gunicorn配置
├── requirements.txt # 项目依赖
└── README.md # 项目文档
- Flask + Flask-SocketIO：Web框架和WebSocket支持
- Paho-MQTT：MQTT客户端
- Gevent：异步处理
- Python-dotenv：环境变量管理
- Logging：日志管理
- Tailwind CSS：样式框架
- Socket.IO Client：WebSocket客户端
- IndexedDB：本地存储
- 原生 JavaScript：
- WebSocket通信
- 用户管理
- 消息处理
- 图片压缩
- UI交互
- 克隆项目并安装依赖
git clone [repository-url]
cd mqtt-chat
pip install -r requirements.txt- 创建
.env文件并配置
SECRET_KEY=your_secret_key
MQTT_USER=
MQTT_PASS=
MQTT_HOST=xxx.xxx.xxx.xxx
MQTT_PORT=1883- 运行应用
开发环境：
python app.py生产环境：
gunicorn -c gunicorn_config.py app:app- SECRET_KEY：应用密钥
- MQTT相关配置：用户名、密码、服务器地址等
- 日志配置：级别、格式、文件路径等
- 日志级别：INFO
- 日志格式：时间戳 - 日志级别 - 消息内容
- 日志存储：
- 同时输出到控制台和文件
- 文件位置：logs/chat.log
- 按大小切分：10MB
- 保留最近10个备份文件
- 监听端口：8000
- Worker类型：gevent
- Worker数量：4
- Keep-alive：65秒
- 超时时间：120秒
- 处理MQTT连接和消息收发
- 支持自动重连
- 消息转发到WebSocket
- 处理客户端连接/断开
- 处理消息发送
- 错误处理和日志记录
- 消息清理和格式化
- 用户名长度限制：20字符
- 消息长度限制：500字符
- 打开聊天室页面
- 设置您的昵称
- 首次使用需要设置昵称
- 可随时修改显示名称
- 用户ID保持不变
- 在输入框中输入消息（最多500字符）
- 点击发送或按回车键发送消息
- 发送图片：
- 点击图片按钮选择文件
- 或直接拖拽图片到聊天区域
- 使用表情：
- 点击表情按钮打开选择器
- 点击表情插入到消息中
- 复制消息：
- 点击文本消息可复制内容
- 点击图片可查看大图
- 历史记录：
- 自动加载最近200条消息
- 点击"清除历史"可删除记录
- 确保MQTT服务器可用
- 建议使用现代浏览器访问
- 日志文件会自动按大小切分
- 建议定期清理旧的日志文件
- 图片大小限制为5MB
- 大尺寸图片会自动压缩
- 历史消息存储在浏览器中
- 清除浏览器数据会丢失历史记录
- 不同设备的历史记录相互独立