# MqttDisplay

**Repository Path**: sun09xiang24_admin/mqtt-display

## Basic Information

- **Project Name**: MqttDisplay
- **Description**: mqtt可视化界面，支持消息过滤
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-29
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MQTT 可视化监控系统

一个基于HTML+JavaScript的MQTT消息可视化监控应用程序，用于实时监控和显示MQTT消息。

## 功能特性

- 🔌 **实时MQTT连接** - 连接到指定的MQTT服务器
- 📊 **消息统计** - 实时显示消息计数和连接时间
- 📱 **响应式设计** - 支持桌面和移动设备
- 🎨 **现代化UI** - 美观的渐变背景和卡片式布局
- 📝 **消息历史** - 保存最近50条消息记录
- 🔄 **自动重连** - 网络断开时自动重新连接
- 📋 **JSON格式化** - 自动格式化JSON消息内容

## 支持的Topic

- `cctv/13` - CCTV监控数据
- `adapter/13/+` - Adapter适配器数据（支持通配符）

## 快速开始

### 1. 启动应用

直接在浏览器中打开 `index.html` 文件：

```bash
# 使用Python启动本地服务器（推荐）
python -m http.server 8000

# 或使用Node.js
npx http-server

# 然后在浏览器中访问
http://localhost:8000
```

### 2. 连接MQTT服务器

1. 点击页面上的"连接"按钮
2. 应用将自动连接到 `mqtt://10.100.0.230:1883`
3. 连接成功后，状态指示器将变为绿色

### 3. 监控消息

- 连接成功后，应用会自动订阅指定的topic
- 收到的消息将实时显示在对应的卡片中
- 统计数据会实时更新

## 界面说明

### 连接状态
- 🔴 **红色** - 未连接
- 🟡 **黄色** - 连接中
- 🟢 **绿色** - 已连接

### 统计卡片
- **CCTV 消息数** - 显示来自 `cctv/13` 的消息数量
- **Adapter 消息数** - 显示来自 `adapter/13/` 的消息数量
- **总消息数** - 显示所有消息的总数
- **连接时间** - 显示当前连接持续时间

### 消息显示
- 每个topic的消息显示在独立的卡片中
- 消息按时间倒序排列（最新的在最上面）
- JSON消息会自动格式化显示
- 每个消息显示topic、时间戳和内容

## 技术栈

- **HTML5** - 页面结构
- **CSS3** - 样式和动画
- **JavaScript ES6+** - 业务逻辑
- **MQTT.js** - MQTT客户端库
- **Font Awesome** - 图标库

## 配置说明

### MQTT服务器配置

在 `app.js` 文件中可以修改MQTT连接配置：

```javascript
const options = {
    host: '10.100.0.230',        // MQTT服务器地址
    port: 1883,                   // MQTT服务器端口
    protocol: 'mqtt',             // 协议类型
    clientId: 'mqtt_visualizer_', // 客户端ID
    clean: true,                  // 清理会话
    reconnectPeriod: 5000,        // 重连间隔（毫秒）
    connectTimeout: 30000,        // 连接超时（毫秒）
    username: '',                 // 用户名（如果需要）
    password: '',                 // 密码（如果需要）
    rejectUnauthorized: false     // 是否拒绝未授权连接
};
```

### Topic配置

在 `subscribeToTopics()` 方法中可以修改订阅的topic：

```javascript
const topics = ['cctv/13', 'adapter/13/+'];
```

## 故障排除

### 连接失败
1. 检查MQTT服务器地址和端口是否正确
2. 确认网络连接正常
3. 检查防火墙设置
4. 查看浏览器控制台的错误信息

### 消息不显示
1. 确认topic名称正确
2. 检查MQTT服务器是否有消息发布
3. 查看浏览器控制台的日志信息

### 页面无法加载
1. 确保所有文件都在同一目录下
2. 使用本地服务器而不是直接打开HTML文件
3. 检查浏览器是否支持ES6语法

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发说明

### 项目结构
```
MqttDisplay/
├── index.html          # 主页面
├── app.js             # 应用程序逻辑
└── README.md          # 说明文档
```

### 扩展功能

可以轻松添加以下功能：
- 消息过滤和搜索
- 数据导出功能
- 图表可视化
- 多服务器支持
- 消息持久化存储

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个项目。