# PPT遥控器Web服务端部署说明

## 📋 项目简介

Web服务端是PPT遥控器系统的核心组件，部署在云服务器上，作为手机APP和电脑服务端之间的中转桥梁。

## 🛠️ 技术栈

- **编程语言**：Python 3.7+
- **Web框架**：WebSockets
- **依赖包**：websockets, json, uuid, datetime

## 🚀 部署步骤

### 1. 准备云服务器

- 选择支持Python的云服务器（如AWS EC2,阿里云,腾讯云等）
- 确保服务器开放端口：8766（电脑服务端连接）和8767（手机APP连接）

### 2. 安装依赖

```bash
# 更新系统
apt update && apt upgrade -y

# 安装Python和pip
apt install python3 python3-pip -y

# 安装依赖包
pip3 install websockets
```

### 3. 部署Web服务端

```bash
# 创建部署目录
mkdir -p /opt/pptremote

# 上传app.py文件到服务器
# 使用scp或其他方式上传文件

# 启动服务
cd /opt/pptremote
python3 app.py
```

### 4. 配置守护进程

为了确保服务持续运行，建议使用systemd或PM2管理进程。

#### 使用systemd（推荐）

创建服务配置文件：

```bash
nano /etc/systemd/system/pptremote-web.service
```

添加以下内容：

```ini
[Unit]
Description=PPT Remote Web Server
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/opt/pptremote
ExecStart=/usr/bin/python3 app.py
Restart=always
RestartSec=10

[Install]
WantedBy=multi-user.target
```

启动服务：

```bash
systemctl daemon-reload
systemctl start pptremote-web
systemctl enable pptremote-web
```

### 5. 配置安全组

确保云服务器的安全组或防火墙开放以下端口：
- 8766：电脑服务端连接
- 8767：手机APP连接

## ⚙️ 配置说明

### Web服务端配置

在`app.py`文件中，您可以修改以下配置：

- `VERIFICATION_KEY`：验证密钥，确保只有授权的电脑服务端能连接
- 端口配置：默认8766（电脑端）和8767（手机端）
- 清理时间：默认24小时清理过期连接

### 电脑服务端配置

在`computer_app/main_gui.py`文件中，修改以下配置：

```python
# Web服务端配置
WEB_SERVER_URL = "ws://your-cloud-server.com:8766"  # 替换为您的服务器地址
VERIFICATION_KEY = "ppt_remote_secret_key"  # 与Web服务端保持一致
```

## 🔄 工作流程

1. **电脑服务端启动**：
   - 启动本地WebSocket服务
   - 连接到Web服务端并进行验证
   - 获得临时地址
   - 生成临时地址的二维码

2. **手机APP连接**：
   - 扫描电脑端显示的二维码
   - 连接到Web服务端的临时地址
   - 发送控制命令

3. **Web服务端转发**：
   - 接收手机APP的控制命令
   - 转发到对应的电脑服务端

4. **电脑服务端执行**：
   - 接收Web服务端转发的命令
   - 执行PPT控制操作

## 📱 手机APP连接方式

手机APP可以通过以下两种方式连接：

1. **扫描二维码**：直接扫描电脑端显示的临时地址二维码
2. **手动输入**：输入格式为 `ws://your-cloud-server.com:8767/{临时地址}`

## 📝 日志管理

Web服务端会在控制台输出运行日志，包括：
- 连接状态
- 控制命令转发
- 错误信息

如果使用systemd管理，可以通过以下命令查看日志：

```bash
journalctl -u pptremote-web
```

## 🔒 安全说明

- **验证机制**：使用密钥验证确保只有授权的电脑服务端能连接
- **临时地址**：每次连接生成唯一的临时地址，提高安全性
- **连接清理**：自动清理过期连接，防止资源泄露

## 🚩 故障排查

### 常见问题

1. **电脑服务端连接失败**：
   - 检查网络连接
   - 确认Web服务端地址正确
   - 检查安全组配置

2. **手机APP连接失败**：
   - 确认二维码内容正确
   - 检查网络连接
   - 确认临时地址未过期

3. **控制命令无响应**：
   - 检查Web服务端是否正常运行
   - 确认电脑服务端状态
   - 查看日志了解具体错误

## 📞 技术支持

如果遇到问题，请查看日志获取详细信息，或联系技术支持。

---

**PPT遥控器Web服务端** - 让远程控制更简单！

<script>
!function(){
	var render_readme = true
	var dom = {
		element: null,
		get: function (o) {
			var obj = Object.create(this)
			obj.element = (typeof o == "object") ? o : document.createElement(o)
			return obj
		},
		add: function (o) {
			var obj = dom.get(o)
			this.element.appendChild(obj.element)
			return obj
		},
		text: function (t) {
			this.element.appendChild(document.createTextNode(t))
			return this
		},
		attr: function (k, v) {
			this.element.setAttribute(k, v)
			return this
		}
	}

	if (!document.head) return
	head = dom.get(document.head)
	head.add('meta').attr('charset', 'utf-8')
	head.add('meta').attr('name', 'viewport').attr('content', 'width=device-width,initial-scale=1')

	if (!document.body) {
		document.write(["<div class=\"container\">",
		"<h3>nginx.conf</h3>",
		"<textarea rows=6 cols=50>",
		"# download markdown.html to /wwwroot",
		"location ~ \\.md$ {",
		"    default_type text/html;",
		"    add_after_body /markdown.html;",
		"}",
		"</textarea>",
		"</div>"].join("\n"))
		return
	}

	var bodytext = document.body.innerHTML
	document.body.innerHTML = ''

	div = dom.get('div').attr('class', 'container')

	div.add('script').attr('src', 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.5.2/marked.min.js')
	div.add('link').attr('rel', 'stylesheet').attr('href', 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css')

	title = decodeURIComponent(document.location.pathname.replace(/.*\//, '').replace(/\.html$/, ''))
	document.title = '《' + title.replace(/\.md$/, '') + '》'
	tbody = div.add('table').add('tbody')
	tbody.add('tr').add('th').text(title).attr('class', 'octicon-book')
	tbody.add('tr').add('td').add('div').attr('id', 'readme').attr('class', 'markdown-body')

	wait = function (name, callback) {
		var interval = 10; // ms
		window.setTimeout(function() {
			if (window[name]) {
				callback(window[name])
			} else {
				window.setTimeout(arguments.callee, interval)
			}
		}, interval)
	}
	wait('marked', function() {
		document.getElementById("readme").innerHTML = marked(bodytext)
	})

	document.body.appendChild(div.element)
}()
</script>

<style>
body {
	margin: 0;
	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
}
.markdown-body {
	float: left;
	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
}
.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 768px) {
	.container {
		max-width: 80%;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 70%;
	}
}
@media (min-width: 1200px) {
	.container {
		max-width: 60%;
	}
}
table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	padding: 0;
	border-collapse: collapse;
}
table th {
	font-size: 14px;
}
table tr {
	border: 1px solid #ddd;
	padding: 5px;
}
table th, table td {
	border: 1px solid #ddd;
	font-size: 14px;
	line-height: 20px;
	padding: 3px;
	text-align: left;
}
.octicon-book {
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 20px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,5 L7,5 L7,6 L3,6 L3,5 L3,5 Z M3,8 L7,8 L7,7 L3,7 L3,8 L3,8 Z M3,10 L7,10 L7,9 L3,9 L3,10 L3,10 Z M14,5 L10,5 L10,6 L14,6 L14,5 L14,5 Z M14,7 L10,7 L10,8 L14,8 L14,7 L14,7 Z M14,9 L10,9 L10,10 L14,10 L14,9 L14,9 Z M16,3 L16,12 C16,12.55 15.55,13 15,13 L9.5,13 L8.5,14 L7.5,13 L2,13 C1.45,13 1,12.55 1,12 L1,3 C1,2.45 1.45,2 2,2 L7.5,2 L8.5,3 L9.5,2 L15,2 C15.55,2 16,2.45 16,3 L16,3 Z M8,3.5 L7.5,3 L2,3 L2,12 L8,12 L8,3.5 L8,3.5 Z M15,3 L9.5,3 L9,3.5 L9,12 L15,12 L15,3 L15,3 Z' /%3E%3C/svg%3E");
}
</style>