fix: unify frontend and backend Socket.io protocol for WebSocket connection

README.md

@@ -64,73 +64,87 @@ pm2 startup
 
 ### 4.2 使用 Nginx 反代 (推荐)
 
-#### A. 传统 Nginx 配置 (命令行)
-如果你使用原生 Nginx，请参考以下配置：
+#### 步骤 1: 安装 Nginx 和 Certbot
+```bash
+apt update && apt install -y nginx certbot python3-certbot-nginx
+```
 
-```nginx
+#### 步骤 2: 创建 Nginx 配置文件
+```bash
+cat > /etc/nginx/sites-available/mixly << 'EOF'
 server {
     listen 80;
     server_name 你的域名;
-    return 301 https://$host$request_uri;
-}
 
-server {
-    listen 443 ssl;
-    server_name 你的域名;
-
-    ssl_certificate /path/to/your/cert.pem;
-    ssl_certificate_key /path/to/your/key.pem;
-
-    # 核心配置：处理 WebSocket 和大文件上传
+    # 主站点反代
     location / {
         proxy_pass https://127.0.0.1:7100;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
+        proxy_ssl_verify off;
         proxy_set_header Host $host;
-
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
         client_max_body_size 100M;
-        proxy_read_timeout 3600s;
     }
 
-    # 处理 Socket.io 特殊路径
+    # WebSocket 反代 (关键配置)
     location /mixly-socket/ {
-        proxy_pass https://127.0.0.1:7100;
+        proxy_pass https://127.0.0.1:7100/socket.io/;
+        proxy_ssl_verify off;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_read_timeout 86400s;
     }
 }
+EOF
+```
+> **注意**：将 `你的域名` 替换为实际域名，如 `mixly.example.com`
+
+#### 步骤 3: 启用配置并测试
+```bash
+# 创建软链接启用配置
+ln -sf /etc/nginx/sites-available/mixly /etc/nginx/sites-enabled/
+
+# 删除默认站点 (可选)
+rm -f /etc/nginx/sites-enabled/default
+
+# 测试配置语法
+nginx -t
+
+# 重启 Nginx
+systemctl restart nginx
 ```
 
-#### B. Nginx Proxy Manager (NPM) 配置 (可视化)
-如果你使用的是 NPM，请按以下步骤配置：
+#### 步骤 4: 自动申请 SSL 证书 (Let's Encrypt)
+```bash
+# 将 your-email@example.com 替换为你的邮箱
+certbot --nginx -d 你的域名 --non-interactive --agree-tos -m your-email@example.com
+```
 
-1.  **Details 选项卡**：
-    *   **Domain Names**: `你的域名`
-    *   **Scheme**: `https`
-    *   **Forward Hostname/IP**: `127.0.0.1`
-    *   **Forward Port**: `7100`
-    *   **Websockets Support**: **必须勾选 (ON)**
-2.  **Custom Locations 选项卡**：
-    *   点击 **Add Location**:
-        *   **Define Location**: `/mixly-socket/`
-        *   **Forward Scheme**: `https`
-        *   **Forward Hostname/IP**: `127.0.0.1`
-        *   **Forward Port**: `7100`
-        *   点击内置的齿轮图标或进入 **Advanced**，确保有以下配置（通常勾选 Websockets Support 后 NPM 会自动处理，但建议检查）：
-            ```nginx
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-            ```
-3.  **Advanced 选项卡** (可选)：
-    *   建议添加以下配置以支持大文件上传并忽略自签名证书错误（重要！）：
-        ```nginx
-        client_max_body_size 100M;
-        # 忽略后端自签名证书错误 (必填，否则无法连接 wss)
-        proxy_ssl_verify off;
-        ```
+Certbot 会自动修改 Nginx 配置并启用 HTTPS (443 端口)。
+
+#### 步骤 5: 设置证书自动续期
+```bash
+# 测试自动续期
+certbot renew --dry-run
+
+# 证书默认每 90 天过期，certbot 会自动配置定时任务续期
+```
+
+#### Nginx 常用管理命令
+```bash
+# 查看状态
+systemctl status nginx
+
+# 重载配置 (不中断服务)
+systemctl reload nginx
+
+# 查看错误日志
+tail -f /var/log/nginx/error.log
+```
 
 ## 5. 跨平台特性说明
 
@@ -163,3 +177,7 @@ pm2 reload mixly3
 -   **反向代理配置**：如果使用 Nginx 反代，请务必处理好的 WebSocket (Upgrade) 头，否则页面无法连接。
 -   **上传报错**：如果提示权限不足，请确认当前用户是否在 `dialout` 组，或尝试 `root` 运行（不推荐）。
 -   **Python 命令**：系统必须能识别 `python3` 命令。
+-   **没有“添加设备”按钮**：这是因为 WebSocket 连接失败。
+    1. 检查 NPM 中是否勾选了 **Websockets Support**。
+    2. 检查 NPM Advanced 配置中是否添加了 `proxy_ssl_verify off;` (关键)。
+    3. 尝试重启服务端：`pm2 reload mixly3`。