feat(websocket): implement buildWebSocketUrl utility and update websocket connections in views

src/utils/websocket.js

@@ -0,0 +1,20 @@
+const getWebSocketTarget = () => {
+    if (import.meta.env.DEV && typeof __APP_TARGET__ !== 'undefined' && __APP_TARGET__) {
+        return __APP_TARGET__;
+    }
+    return window.location.host;
+};
+
+export const buildWebSocketUrl = (path, params = {}) => {
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+    const url = new URL(`${wsProtocol}//${getWebSocketTarget()}${normalizedPath}`);
+
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+            url.searchParams.set(key, value);
+        }
+    });
+
+    return url.toString();
+};

src/views/InstanceDetail.vue

@@ -306,6 +306,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { instanceApi } from '../api/index.js';
 import { showNotification, formatDate, getCookie } from '../utils/functions.js';
 import { showFSDialog } from '../utils/dialogManager.js';
+import { buildWebSocketUrl } from '../utils/websocket.js';
 
 export default {
     name: 'InstanceDetail',
@@ -452,9 +453,10 @@ export default {
 
         const connectLogWebSocket = () => {
             const token = getCookie('token');
-            const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsUrl = buildWebSocketUrl('/api/frpcAct/instanceMgr/logs', {
-            const target = __APP_TARGET__;
+                instanceID: instanceID.value,
-            const wsUrl = `${wsProtocol}//${target}/api/frpcAct/instanceMgr/logs?instanceID=${instanceID.value}&token=${token}`;
+                token
+            });
 
             logSocket = new WebSocket(wsUrl);
 

src/views/Logs.vue

@@ -31,6 +31,7 @@
 <script>
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { showNotification, formatDate, getCookie } from '../utils/functions.js';
+import { buildWebSocketUrl } from '../utils/websocket.js';
 
 export default {
     name: 'Logs',
@@ -60,9 +61,7 @@ export default {
 
         const connectWebSocket = () => {
             const token = getCookie('token');
-            const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsUrl = buildWebSocketUrl('/api/system/getLogs', { token });
-            const target = __APP_TARGET__;
-            const wsUrl = `${wsProtocol}//${target}/api/system/getLogs?token=${token}`;
 
             socket.value = new WebSocket(wsUrl);
 

src/views/Settings.vue

@@ -20,10 +20,12 @@
                 <div class="form-group">
                     <label>Frp Client Path</label>
                     <input type="text" v-model="settings.frpcPath" placeholder="/usr/local/bin/frpc">
+                    <p v-pre class="field-hint">You have to fill it with absolute path but not relative path</p>
                 </div>
                 <div class="form-group">
                     <label>Instance Config Storage Path</label>
                     <input type="text" v-model="settings.instancePath" placeholder="/etc/frpc">
+                    <p v-pre class="field-hint">You have to fill it with absolute path but not relative path</p>
                 </div>
             </div>
         </div>