# teaching_screen

**Repository Path**: s_deer/teaching_screen

## Basic Information

- **Project Name**: teaching_screen
- **Description**: 一个使用mqtt远程控制的网页
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-02
- **Last Updated**: 2025-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 远程控制显示系统

一个基于MQTT的远程控制显示系统，可以通过MQTT消息远程控制显示内容，支持网页、图片、视频、文本等多种内容类型。

## 功能特性

- ✅ **MQTT远程控制**: 通过MQTT消息远程控制显示内容
- ✅ **多种内容类型**: 支持网页、图片、视频、文本显示
- ✅ **iframe架构**: 使用iframe隔离内容，确保安全性
- ✅ **postMessage通信**: 内嵌页面与主页面通过postMessage通信
- ✅ **自动重连**: MQTT连接断开时自动重连
- ✅ **显示时长控制**: 可设置内容显示时长
- ✅ **全屏支持**: 支持F11全屏显示
- ✅ **错误处理**: 完善的错误处理和状态显示
- ✅ **测试工具**: 提供测试客户端页面

## 文件结构

```
teaching_screen/
├── index.html              # 主显示页面
├── test-client.html        # MQTT测试客户端
├── test-webpage.html       # 网页加载测试页面
├── examples.html           # 设备ID使用示例
├── js/
│   ├── config.js           # 配置文件
│   ├── mqtt-controller.js  # MQTT控制器
│   ├── content-manager.js  # 内容管理器
│   └── main.js            # 主程序
└── README.md              # 说明文档
```

## 快速开始

### 1. 启动显示页面

#### 默认使用（无设备ID）
直接在浏览器中打开 `index.html`，系统会自动连接MQTT服务器并订阅 `display/control` 主题。

#### 指定设备ID
通过URL参数指定设备ID：`index.html?deviceid=设备ID`
- 例如：`index.html?deviceid=room101` - 订阅主题 `display/control/room101`
- 例如：`index.html?deviceid=lobby` - 订阅主题 `display/control/lobby`

### 2. 使用测试客户端

#### 默认使用
打开 `test-client.html`，点击"连接"按钮连接到MQTT服务器，然后可以发送各种测试消息。

#### 指定设备ID
打开 `test-client.html?deviceid=设备ID`，确保与显示页面使用相同的设备ID。

### 3. 发送控制消息

#### 默认主题
通过MQTT向主题 `display/control` 发送JSON格式的消息：

#### 设备特定主题
如果指定了设备ID，则向主题 `display/control/设备ID` 发送消息：
- 例如：`display/control/room101`
- 例如：`display/control/lobby`

```json
{
    "type": "text|image|video|webpage|clear",
    "url": "https://example.com",     // 网页、图片、视频的URL
    "content": "显示文本",            // 文本内容
    "title": "标题",                  // 可选，显示标题
    "duration": 10000,               // 显示时长（毫秒），0表示永久显示
    "autoplay": true,                // 视频自动播放（可选）
    "loop": false,                   // 视频循环播放（可选）
    "muted": true                    // 视频静音（可选）
}
```

## 消息类型说明

### 文本消息
```json
{
    "type": "text",
    "content": "欢迎使用远程控制显示系统！",
    "title": "欢迎信息",
    "duration": 5000
}
```

### 图片消息
```json
{
    "type": "image",
    "url": "https://picsum.photos/1920/1080",
    "title": "随机图片",
    "duration": 8000
}
```

### 视频消息
```json
{
    "type": "video",
    "url": "https://example.com/video.mp4",
    "title": "测试视频",
    "autoplay": true,
    "muted": true,
    "loop": false,
    "duration": 15000
}
```

### 网页消息
```json
{
    "type": "webpage",
    "url": "https://www.baidu.com",
    "title": "百度首页",
    "duration": 10000
}
```

### 清除内容
```json
{
    "type": "clear"
}
```

## 配置说明

在 `js/config.js` 中可以修改以下配置：

- **MQTT服务器**: 默认使用公共测试服务器 `broker.emqx.io`
- **基础主题**: 默认基础主题 `display/control`
- **设备ID**: 通过URL参数 `deviceid` 指定，会自动追加到基础主题后
- **连接参数**: 可配置用户名、密码、重连间隔等

### 设备ID功能

系统支持通过URL参数指定设备ID，实现多设备独立控制：

- **URL格式**: `index.html?deviceid=设备ID`
- **主题格式**: `display/control/设备ID`
- **使用场景**: 会议室、大厅、入口等不同位置的显示屏

详细使用示例请参考 `examples.html`。

## 快捷键

- **Ctrl+T**: 开始测试内容循环
- **Ctrl+C**: 清除当前显示内容
- **F11**: 切换全屏显示
- **右键**: 显示快捷菜单

## 安全注意事项

1. **生产环境**: 请使用自己的MQTT服务器，不要使用公共测试服务器
2. **认证**: 建议配置MQTT用户名和密码
3. **内容安全**: 系统使用iframe隔离内容，但仍需注意内容来源的安全性
4. **网络**: 确保网络环境稳定，支持WebSocket连接

## 故障排除

### 连接问题
- 检查网络连接是否正常
- 确认MQTT服务器地址和端口是否正确
- 检查防火墙是否阻止WebSocket连接

### 内容显示问题
- 确认URL是否可访问
- 检查内容格式是否支持
- 查看浏览器控制台错误信息

### 性能问题
- 大文件加载可能需要较长时间
- 建议使用压缩的图片和视频文件
- 考虑使用CDN加速内容加载

## 扩展功能

系统设计为模块化架构，可以轻松扩展：

1. **新增内容类型**: 在 `content-manager.js` 中添加新的处理方法
2. **自定义样式**: 修改CSS样式文件
3. **添加功能**: 在 `main.js` 中添加新的功能模块
4. **集成其他协议**: 可以添加WebSocket、HTTP等其他通信方式

## 技术栈

- **前端**: HTML5, CSS3, JavaScript (ES6+)
- **MQTT**: MQTT.js 客户端库
- **通信**: WebSocket, postMessage
- **内容**: iframe, Blob URL

## 许可证

## features
1. 安全性问题,如何保障客户端的用户名称和密码安全
2. 状态保持问题,当浏览器被关闭重启时,如何保持最后一次页面的状态

MIT License