From ed5751002b2810237b3727ea881c0c5465fbc255 Mon Sep 17 00:00:00 2001
From: Tran Anh Tuan <tunztunzz@Trans-Mac-mini.local>
Date: Tue, 27 Jan 2026 12:55:01 +0700
Subject: [PATCH] feat(wsClient): Update WebSocket connection to support
 relative paths and enhance MQTT handling

---
 config/proxy_dev.ts                       |  5 +++++
 src/pages/Manager/Device/Camera/index.tsx | 16 ++++------------
 src/utils/wsClient.ts                     | 10 ++++++++--
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/config/proxy_dev.ts b/config/proxy_dev.ts
index 5249a25..74aec9e 100644
--- a/config/proxy_dev.ts
+++ b/config/proxy_dev.ts
@@ -24,6 +24,11 @@ const proxyDev: Record<string, any> = {
       target: target,
       changeOrigin: true,
     },
+    '/mqtt': {
+      target: target,
+      changeOrigin: true,
+      ws: true,
+    },
   },
   test: {
     '/test': {
diff --git a/src/pages/Manager/Device/Camera/index.tsx b/src/pages/Manager/Device/Camera/index.tsx
index 62617a0..410a831 100644
--- a/src/pages/Manager/Device/Camera/index.tsx
+++ b/src/pages/Manager/Device/Camera/index.tsx
@@ -1,4 +1,4 @@
-import { apiSearchThings } from '@/services/master/ThingController';
+import { apiGetThingDetail } from '@/services/master/ThingController';
 import { wsClient } from '@/utils/wsClient';
 import {
   ArrowLeftOutlined,
@@ -111,7 +111,7 @@ const CameraConfigPage = () => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    wsClient.connect('wss://gms.smatec.com.vn/mqtt', false);
+    wsClient.connect('/mqtt', false);
     const unsubscribe = wsClient.subscribe((data: any) => {
       console.log('Received WS data:', data);
     });
@@ -126,16 +126,8 @@ const CameraConfigPage = () => {
       if (!thingId) return;
       try {
         setLoading(true);
-        const response = await apiSearchThings({
-          offset: 0,
-          limit: 1,
-          id: thingId,
-        });
-        if (response?.things && response.things.length > 0) {
-          setThingName(response.things[0].name || thingId);
-        } else {
-          setThingName(thingId);
-        }
+        const thing = await apiGetThingDetail(thingId);
+        setThingName(thing.name || thingId);
       } catch (error) {
         console.error('Failed to fetch thing info:', error);
         setThingName(thingId);
diff --git a/src/utils/wsClient.ts b/src/utils/wsClient.ts
index 4adba05..651c4df 100644
--- a/src/utils/wsClient.ts
+++ b/src/utils/wsClient.ts
@@ -9,7 +9,7 @@ class WSClient {
 
   /**
    * Kết nối tới WebSocket server.
-   * @param url Địa chỉ WebSocket server
+   * @param url Địa chỉ WebSocket server (có thể là relative path như /mqtt)
    * @param isAuthenticated Có sử dụng token xác thực hay không
    */
   connect(url: string, isAuthenticated: boolean) {
@@ -18,7 +18,13 @@ class WSClient {
     if (isAuthenticated) {
       token = getToken();
     }
-    const wsUrl = isAuthenticated ? `${url}?token=${token}` : url;
+    let wsUrl = url;
+    if (url.startsWith('/')) {
+      // Relative path, prepend base WebSocket URL
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      wsUrl = `${protocol}//${window.location.host}${url}`;
+    }
+    wsUrl = isAuthenticated ? `${wsUrl}?token=${token}` : wsUrl;
     this.ws = new ReconnectingWebSocket(wsUrl, [], {
       maxRetries: 10,
       maxReconnectionDelay: 10000,