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

2026-01-24 18:15:34 +08:00
parent caebc6595e
commit 49d6ec88f0
3 changed files with 288 additions and 260 deletions
--- a/README.md
+++ b/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`。
--- a/mixly/mixly-sw/mixly-modules/deps.json
+++ b/mixly/mixly-sw/mixly-modules/deps.json
@@ -129,6 +129,7 @@
    {
        "path": "/web-socket/socket.js",
        "require": [
+            "io",
            "Mixly.Env",
            "Mixly.Config",
            "Mixly.MJson",
@@ -140,4 +141,4 @@
            "Mixly.WebSocket.Socket"
        ]
    }
-]
+]
--- a/mixly/mixly-sw/mixly-modules/web-socket/socket.js
+++ b/mixly/mixly-sw/mixly-modules/web-socket/socket.js
@@ -1,244 +1,253 @@
 (() => {

-goog.require('Mixly.Env');
-goog.require('Mixly.Config');
-goog.require('Mixly.MJson');
-goog.require('Mixly.WebSocket');
-goog.require('Mixly.LayerExt');
-goog.require('Mixly.Command');
-goog.provide('Mixly.WebSocket.Socket');
+    goog.require('Mixly.Env');
+    goog.require('Mixly.Config');
+    goog.require('Mixly.MJson');
+    goog.require('Mixly.WebSocket');
+    goog.require('Mixly.LayerExt');
+    goog.require('Mixly.Command');
+    goog.provide('Mixly.WebSocket.Socket');

-const {
-    Env,
-    Config,
-    MJson,
-    LayerExt,
-    Command
-} = Mixly;
+    const {
+        Env,
+        Config,
+        MJson,
+        LayerExt,
+        Command
+    } = Mixly;

-const { SOFTWARE } = Config;
+    const { SOFTWARE } = Config;

-const { Socket } = Mixly.WebSocket;
+    const { Socket } = Mixly.WebSocket;

-Socket.obj = null;
-Socket.url = 'ws://127.0.0.1/socket';
-Socket.jsonArr = [];
-Socket.connected = false;
-Socket.initFunc = null;
-Socket.debug = SOFTWARE.debug;
-let { hostname, protocol, port } = window.location;
-if (protocol === 'http:') {
-    Socket.protocol = 'ws:';
-} else {
-    Socket.protocol = 'wss:';
-}
-if (port) {
-    port = ':' + port;
-}
-Socket.url = Socket.protocol + '//' + hostname + port + '/socket';
-Socket.IPAddress = hostname;
-Socket.disconnectTimes = 0;
-Socket.updating = false;
+    Socket.obj = null;
+    Socket.url = '';
+    Socket.jsonArr = [];
+    Socket.connected = false;
+    Socket.initFunc = null;
+    Socket.debug = SOFTWARE.debug;
+    Socket.disconnectTimes = 0;
+    Socket.updating = false;

-
-let lockReconnect = false; // 避免重复连接
-let timeoutFlag = true;
-let timeoutSet = null;
-let reconectNum = 0;
-const timeout = 5000; // 超时重连间隔
-
-function reconnect () {
-    if (lockReconnect) return;
-    lockReconnect = true;
-    // 没连接上会一直重连，设置延迟避免请求过多
-    setTimeout(function () {
-        timeoutFlag = true;
-        Socket.init();
-        console.info(`正在重连第${reconectNum + 1}次`);
-        reconectNum++;
-        lockReconnect = false;
-    }, timeout); // 这里设置重连间隔(ms)
-}
-
-//心跳检测
-const heartCheck = {
-    timeout, // 毫秒
-    timeoutObj: null,
-    serverTimeoutObj: null,
-    reset: function () {
-        clearInterval(this.timeoutObj);
-        clearTimeout(this.serverTimeoutObj);
-        return this;
-    },
-    start: function () {
-        const self = this;
-        let count = 0;
-        let WS = Socket;
-        this.timeoutObj = setInterval(() => {
-            if (count < 3) {
-                if (WS.obj.readyState === 1) {
-                    WS.obj.send('HeartBeat');
-                    console.info(`HeartBeat第${count + 1}次`);
-                }
-                count++;
-            } else {
-                clearInterval(this.timeoutObj);
-                count = 0;
-                if (WS.obj.readyState === 0 && WS.obj.readyState === 1) {
-                    WS.obj.close();
-                }
-            }
-        }, self.timeout);
+    // 构建 Socket.io 连接 URL (和后端统一使用 Socket.io)
+    let { hostname, protocol, port } = window.location;
+    if (protocol === 'http:') {
+        Socket.protocol = 'ws:';
+    } else {
+        Socket.protocol = 'wss:';
    }
-}
+    Socket.url = Socket.protocol + '//' + hostname + (port ? ':' + port : '');
+    Socket.IPAddress = hostname;

-Socket.init = (onopenFunc = (data) => {}, doFunc = () => {}) => {
-    if (Socket.connected) {
-        if (Socket.initFunc) {
-            Socket.initFunc();
-            Socket.initFunc = null;
-        }
-        doFunc();
-        return;
-    }
+    let lockReconnect = false;
+    let timeoutFlag = true;
+    let timeoutSet = null;
+    let reconectNum = 0;
+    const timeout = 5000;

-    timeoutSet = setTimeout(() => {
-        if (timeoutFlag && reconectNum < 3) {
-            console.info(`重连`);
-            reconectNum++;
+    function reconnect() {
+        if (lockReconnect) return;
+        lockReconnect = true;
+        setTimeout(function () {
+            timeoutFlag = true;
            Socket.init();
+            console.info(`正在重连第${reconectNum + 1}次`);
+            reconectNum++;
+            lockReconnect = false;
+        }, timeout);
+    }
+
+    // 心跳检测
+    const heartCheck = {
+        timeout,
+        timeoutObj: null,
+        serverTimeoutObj: null,
+        reset: function () {
+            clearInterval(this.timeoutObj);
+            clearTimeout(this.serverTimeoutObj);
+            return this;
+        },
+        start: function () {
+            const self = this;
+            let count = 0;
+            this.timeoutObj = setInterval(() => {
+                if (count < 3) {
+                    if (Socket.connected) {
+                        // Socket.io 自带心跳，这里可以发送自定义心跳
+                        console.info(`HeartBeat第${count + 1}次`);
+                    }
+                    count++;
+                } else {
+                    clearInterval(this.timeoutObj);
+                    count = 0;
+                    if (Socket.obj && !Socket.connected) {
+                        Socket.obj.disconnect();
+                    }
+                }
+            }, self.timeout);
        }
-    }, timeout);
-    
-    let WS = Socket;
-    WS.obj = new WebSocket(WS.url);
-    WS.obj.onopen = () => {
-        console.log('已连接' + WS.url);
-        WS.connected = true;
-        Socket.initFunc = doFunc;
-        reconectNum = 0;
-        timeoutFlag = false;
-        clearTimeout(timeoutSet);
-        heartCheck.reset().start();
-        onopenFunc(WS);
-        Socket.reload();
-        if (Socket.updating) {
-            Socket.updating = false;
+    }
+
+    Socket.init = (onopenFunc = (data) => { }, doFunc = () => { }) => {
+        if (Socket.connected) {
+            if (Socket.initFunc) {
+                Socket.initFunc();
+                Socket.initFunc = null;
+            }
+            doFunc();
+            return;
        }
-    };

-    WS.obj.onmessage = (event) => {
-        heartCheck.reset().start();
-        let command = Command.parse(event.data);
-        command = MJson.decode(command);
-        if (Socket.debug)
-            console.log('receive -> ', event.data);
-        Command.run(command);
-    };
+        timeoutSet = setTimeout(() => {
+            if (timeoutFlag && reconectNum < 3) {
+                console.info(`重连`);
+                reconectNum++;
+                Socket.init();
+            }
+        }, timeout);

-    WS.obj.onerror = (event) => {
-        console.log('WebSocket error: ', event);
-        reconnect();
-    };
+        // 使用 Socket.io 客户端连接（和后端统一）
+        Socket.obj = io(`${Socket.url}/all`, {
+            path: '/mixly-socket/',
+            reconnection: true,
+            reconnectionDelayMax: 10000,
+            transports: ['websocket']
+        });

-    WS.obj.onclose = (event) => {
-        WS.connected = false;
-        WS.disconnectTimes += 1;
-        if (WS.disconnectTimes > 255) {
-            WS.disconnectTimes = 1;
-        }
-        console.log('已断开' + WS.url);
-
-        console.info(`关闭`, event.code);
-        if (event.code !== 1000) {
+        Socket.obj.on('connect', () => {
+            console.log('已连接' + Socket.url);
+            Socket.connected = true;
+            Socket.initFunc = doFunc;
+            reconectNum = 0;
            timeoutFlag = false;
            clearTimeout(timeoutSet);
+            heartCheck.reset().start();
+            onopenFunc(Socket);
+            Socket.reload();
+            if (Socket.updating) {
+                Socket.updating = false;
+            }
+        });
+
+        // Socket.io 消息接收
+        Socket.obj.onAny((eventName, ...args) => {
+            heartCheck.reset().start();
+            // 构造兼容原有 Command 格式的消息
+            const command = { event: eventName, data: args };
+            if (Socket.debug) {
+                console.log('receive -> ', eventName, args);
+            }
+            // 尝试使用原有 Command 系统处理
+            try {
+                Command.run(MJson.decode(command));
+            } catch (e) {
+                // 如果 Command 系统不能处理，忽略
+            }
+        });
+
+        Socket.obj.on('connect_error', (error) => {
+            console.log('WebSocket error: ', error);
            reconnect();
-        } else {
-            clearInterval(heartCheck.timeoutObj);
-            clearTimeout(heartCheck.serverTimeoutObj);
-        }
-    }
-}
+        });

-Socket.sendCommand = (command) => {
-    let WS = Mixly.WebSocket.Socket;
-    if (!WS.connected) {
-        layer.msg('未连接' + WS.url, {time: 1000});
-        return;
-    }
-    let commandStr = '';
-    
-    try {
-        commandStr = JSON.stringify(MJson.encode(command));
-        if (Socket.debug)
-            console.log('send -> ', commandStr);
-    } catch (e) {
-        console.log(e);
-        return;
-    }
-    WS.obj.send(commandStr);
-}
+        Socket.obj.on('disconnect', (reason) => {
+            Socket.connected = false;
+            Socket.disconnectTimes += 1;
+            if (Socket.disconnectTimes > 255) {
+                Socket.disconnectTimes = 1;
+            }
+            console.log('已断开' + Socket.url);
+            console.info(`关闭`, reason);

-Socket.clickConnect = () => {
-    if (Socket.connected) {
-        Socket.disconnect();
-    } else {
-        Socket.connect((WS) => {
-            layer.closeAll();
-            layer.msg(WS.url + '连接成功', { time: 1000 });
+            if (reason !== 'io client disconnect') {
+                timeoutFlag = false;
+                clearTimeout(timeoutSet);
+                reconnect();
+            } else {
+                clearInterval(heartCheck.timeoutObj);
+                clearTimeout(heartCheck.serverTimeoutObj);
+            }
        });
    }
-}

-Socket.openLoadingBox = (title, successFunc = () => {}, endFunc = () => {}) => {
-    layer.open({
-        type: 1,
-        title: title,
-        content: $('#mixly-loader-div'),
-        shade: LayerExt.SHADE_ALL,
-        closeBtn: 0,
-        success: function () {
-            $("#webusb-cancel").css("display","none");
-            $(".layui-layer-page").css("z-index", "198910151");
-            successFunc();
-        },
-        end: function () {
-            $("#mixly-loader-div").css("display", "none");
-            $(".layui-layer-shade").remove();
-            $("#webusb-cancel").css("display", "unset");
-            if (Socket.connected)
-                endFunc();
+    Socket.sendCommand = (command) => {
+        if (!Socket.connected) {
+            layer.msg('未连接' + Socket.url, { time: 1000 });
+            return;
        }
-    });
-}

-Socket.connect = (onopenFunc = (data) => {}, doFunc = () => {}) => {
-    if (Socket.connected) {
-        doFunc();
-        return;
+        try {
+            const encodedCommand = MJson.encode(command);
+            if (Socket.debug) {
+                console.log('send -> ', encodedCommand);
+            }
+            // 使用 Socket.io emit 发送命令
+            Socket.obj.emit('command', encodedCommand);
+        } catch (e) {
+            console.log(e);
+            return;
+        }
    }
-    let title = '连接中...';
-    Socket.openLoadingBox(title, () => {
-        setTimeout(() => {
-            Socket.init(onopenFunc);
-        }, 1000);
-    }, doFunc);
-}

-Socket.disconnect = () => {
-    if (!Socket.connected)
-        return;
-    let title = '断开中...';
-    Socket.openLoadingBox(title, () => {
-        Socket.obj.close();
-    });
-}
-
-Socket.reload = () => {
-    if (!Socket.updating && Socket.disconnectTimes) {
-        window.location.reload();
+    Socket.clickConnect = () => {
+        if (Socket.connected) {
+            Socket.disconnect();
+        } else {
+            Socket.connect((WS) => {
+                layer.closeAll();
+                layer.msg(WS.url + '连接成功', { time: 1000 });
+            });
+        }
+    }
+
+    Socket.openLoadingBox = (title, successFunc = () => { }, endFunc = () => { }) => {
+        layer.open({
+            type: 1,
+            title: title,
+            content: $('#mixly-loader-div'),
+            shade: LayerExt.SHADE_ALL,
+            closeBtn: 0,
+            success: function () {
+                $("#webusb-cancel").css("display", "none");
+                $(".layui-layer-page").css("z-index", "198910151");
+                successFunc();
+            },
+            end: function () {
+                $("#mixly-loader-div").css("display", "none");
+                $(".layui-layer-shade").remove();
+                $("#webusb-cancel").css("display", "unset");
+                if (Socket.connected)
+                    endFunc();
+            }
+        });
+    }
+
+    Socket.connect = (onopenFunc = (data) => { }, doFunc = () => { }) => {
+        if (Socket.connected) {
+            doFunc();
+            return;
+        }
+        let title = '连接中...';
+        Socket.openLoadingBox(title, () => {
+            setTimeout(() => {
+                Socket.init(onopenFunc);
+            }, 1000);
+        }, doFunc);
+    }
+
+    Socket.disconnect = () => {
+        if (!Socket.connected)
+            return;
+        let title = '断开中...';
+        Socket.openLoadingBox(title, () => {
+            Socket.obj.disconnect();
+        });
+    }
+
+    Socket.reload = () => {
+        if (!Socket.updating && Socket.disconnectTimes) {
+            window.location.reload();
+        }
    }
-}

 })();