From 4b06f3b5109af2350c746140a992ba1dd77657e6 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Mon, 28 Apr 2025 15:15:56 +0800
Subject: [PATCH] update

---
 packages/backend/src/websocket.ts             | 22 +++++++++++++-----
 .../src/components/RemoteDesktopModal.vue     | 23 +++++++++++++------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/backend/src/websocket.ts b/packages/backend/src/websocket.ts
index 30b0976..fdf4c97 100644
--- a/packages/backend/src/websocket.ts
+++ b/packages/backend/src/websocket.ts
@@ -428,7 +428,11 @@ export const initializeWebSocket = async (server: http.Server, sessionParser: Re
                     // 传递必要信息给 connection 事件
                     (request as any).clientIpAddress = ipAddress;
                     (request as any).isRdpProxy = true; // 标记为 RDP 代理连接
-                    (request as any).rdpToken = parsedUrl.query.token; // 传递 RDP token
+                    // 传递 RDP token 和其他参数
+                    (request as any).rdpToken = parsedUrl.query.token;
+                    (request as any).rdpWidth = parsedUrl.query.width;
+                    (request as any).rdpHeight = parsedUrl.query.height;
+                    (request as any).rdpDpi = parsedUrl.query.dpi;
                     wss.emit('connection', extWs, request);
                 });
             } else {
@@ -458,11 +462,16 @@ export const initializeWebSocket = async (server: http.Server, sessionParser: Re
 
         // --- RDP 代理连接处理 ---
         if (isRdpProxy) {
+            // Retrieve all necessary parameters passed from the upgrade handler
             const rdpToken = (request as any).rdpToken;
-            if (!rdpToken) {
-                console.error(`WebSocket: RDP Proxy connection for ${ws.username} missing token.`);
-                ws.send(JSON.stringify({ type: 'rdp:error', payload: 'Missing RDP connection token.' }));
-                ws.close(1008, 'Missing RDP token');
+            const rdpWidth = (request as any).rdpWidth;
+            const rdpHeight = (request as any).rdpHeight;
+            const rdpDpi = (request as any).rdpDpi;
+
+            if (!rdpToken || !rdpWidth || !rdpHeight || !rdpDpi) {
+                console.error(`WebSocket: RDP Proxy connection for ${ws.username} missing required parameters (token, width, height, dpi).`);
+                ws.send(JSON.stringify({ type: 'rdp:error', payload: 'Missing RDP connection parameters.' }));
+                ws.close(1008, 'Missing RDP parameters');
                 return;
             }
 
@@ -479,7 +488,8 @@ export const initializeWebSocket = async (server: http.Server, sessionParser: Re
 
             // Ensure base URL doesn't end with a slash before appending query params
             const cleanRdpBaseUrl = rdpBaseUrl.endsWith('/') ? rdpBaseUrl.slice(0, -1) : rdpBaseUrl;
-            const rdpTargetUrl = `${cleanRdpBaseUrl}/?token=${rdpToken}`; // Append token query param
+            // Append ALL parameters to the target URL
+            const rdpTargetUrl = `${cleanRdpBaseUrl}/?token=${encodeURIComponent(rdpToken)}&width=${encodeURIComponent(rdpWidth)}&height=${encodeURIComponent(rdpHeight)}&dpi=${encodeURIComponent(rdpDpi)}`;
 
             console.log(`WebSocket: RDP Proxy for ${ws.username} attempting to connect to ${rdpTargetUrl}`);
 
diff --git a/packages/frontend/src/components/RemoteDesktopModal.vue b/packages/frontend/src/components/RemoteDesktopModal.vue
index 725bf85..8ba9f1f 100644
--- a/packages/frontend/src/components/RemoteDesktopModal.vue
+++ b/packages/frontend/src/components/RemoteDesktopModal.vue
@@ -38,11 +38,20 @@ const desiredModalHeight = ref(858); // User sets the desired TOTAL modal height
 const MIN_MODAL_WIDTH = 1024;
 const MIN_MODAL_HEIGHT = 768;
 
-// Dynamically construct WebSocket URL
-const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-const wsHost = window.location.hostname;
-const backendPort = '3001'; // Backend WebSocket port
-const BACKEND_WEBSOCKET_URL = `${wsProtocol}//${wsHost}:${backendPort}`; // URL for backend proxy
+// Dynamically construct WebSocket URL based on environment
+let backendBaseUrl: string;
+
+if (import.meta.env.DEV && import.meta.env.VITE_BACKEND_WS_URL) {
+  // Development mode: Use the URL specified in .env
+  backendBaseUrl = import.meta.env.VITE_BACKEND_WS_URL;
+  console.log(`[RDP Modal] Using development WebSocket Base URL from env: ${backendBaseUrl}`);
+} else {
+  // Production mode: Construct URL based on current window location
+  const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsHostAndPort = window.location.host;
+  backendBaseUrl = `${wsProtocol}//${wsHostAndPort}`;
+  console.log(`[RDP Modal] Using production WebSocket Base URL from window.location: ${backendBaseUrl}`);
+}
 // Removed localStorage keys
 
 const connectRdp = async () => { // Removed useInputValues parameter
@@ -91,8 +100,8 @@ const connectRdp = async () => { // Removed useInputValues parameter
          // Consider setting an error state or notifying the user
     }
 
-    // Construct URL for the backend proxy endpoint
-    const tunnelUrl = `${BACKEND_WEBSOCKET_URL}/rdp-proxy?token=${encodeURIComponent(token)}&width=${widthToSend}&height=${heightToSend}&dpi=${dpiToSend}`;
+    // Construct URL for the backend proxy endpoint using the determined base URL
+    const tunnelUrl = `${backendBaseUrl}/rdp-proxy?token=${encodeURIComponent(token)}&width=${widthToSend}&height=${heightToSend}&dpi=${dpiToSend}`;
     console.log(`[RDP Modal] Connecting to tunnel: ${tunnelUrl}`); // Log the final URL
     // @ts-ignore
     const tunnel = new Guacamole.WebSocketTunnel(tunnelUrl);