refactor: 优化资源清理与连接管理，避免内存泄漏

Author: dalaolala

backend/socket/socketHandler.js

@@ -3,6 +3,21 @@ const { Client } = require('ssh2');
 // 存储活跃的SSH连接
 const activeConnections = new Map();
 
+// 清理连接的辅助函数
+const cleanupConnection = (socketId) => {
+  const connection = activeConnections.get(socketId);
+  if (connection) {
+    try {
+      if (connection.conn) {
+        connection.conn.end();
+      }
+    } catch (error) {
+      console.error('清理连接时出错:', error);
+    }
+    activeConnections.delete(socketId);
+  }
+};
+
 const socketHandler = (io) => {
   io.on('connection', (socket) => {
     console.log('快速连接用户连接:', socket.id);
@@ -92,21 +107,19 @@ const socketHandler = (io) => {
 
     // 断开SSH连接
     socket.on('disconnect-ssh', () => {
-      const connection = activeConnections.get(socket.id);
-      if (connection) {
-        connection.conn.end();
-        activeConnections.delete(socket.id);
-      }
+      cleanupConnection(socket.id);
     });
 
     // 处理连接断开
     socket.on('disconnect', () => {
       console.log('用户断开连接:', socket.id);
-      const connection = activeConnections.get(socket.id);
-      if (connection) {
-        connection.conn.end();
-        activeConnections.delete(socket.id);
-      }
+      cleanupConnection(socket.id);
+    });
+
+    // 处理错误
+    socket.on('error', (error) => {
+      console.error('Socket错误:', socket.id, error);
+      cleanupConnection(socket.id);
     });
 
     // 心跳检测

backend/utils/sftpHandler.js

@@ -37,10 +37,15 @@ class SftpHandler {
 
   async disconnect() {
     if (this.sshClient) {
-      this.sshClient.end();
+      try {
+        this.sshClient.end()
+      } catch (error) {
+        console.error('断开SFTP连接时出错:', error)
+      }
     }
-    this.isConnected = false;
-    this.sftp = null;
+    this.isConnected = false
+    this.sftp = null
+    this.sshClient = null
   }
 
   async listDirectory(directory = '.') {

frontend/src/components/XtermTerminal.vue

@@ -109,6 +109,8 @@ let isComposing = false
 let wheelHandler = null
 let viewportWheelHandler = null
 let initialScrollTop = 0
+let mutationObserver = null
+let wheelObserver = null
 
 // Context Menu State
 const contextMenu = ref({
@@ -242,14 +244,14 @@ const initTerminal = () => {
     
     // IME Fix for composing
     setupHelperTextarea()
-    const observer = new MutationObserver((mutations) => {
+    mutationObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === 'childList') {
           setupHelperTextarea()
         }
       })
     })
-    observer.observe(terminalRef.value, { childList: true, subtree: true })
+    mutationObserver.observe(terminalRef.value, { childList: true, subtree: true })
     
     // Terminal input handler
     term.onData((data) => {
@@ -264,7 +266,7 @@ const initTerminal = () => {
     
     // Optimize wheel scroll
     enableWheelScroll()
-    const wheelObserver = new MutationObserver(() => enableWheelScroll())
+    wheelObserver = new MutationObserver(() => enableWheelScroll())
     wheelObserver.observe(terminalRef.value, { childList: true, subtree: true })
     
     wheelHandler = (e) => {
@@ -548,10 +550,28 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
+  // 断开所有 MutationObserver
+  if (mutationObserver) {
+    mutationObserver.disconnect()
+    mutationObserver = null
+  }
+  if (wheelObserver) {
+    wheelObserver.disconnect()
+    wheelObserver = null
+  }
+  
+  // 清理终端实例
   if (term) {
     term.dispose()
     term = null
   }
+  
+  // 清理 FitAddon
+  if (fitAddon) {
+    fitAddon = null
+  }
+  
+  // 移除事件监听器
   if (terminalRef.value && wheelHandler) {
     terminalRef.value.removeEventListener('wheel', wheelHandler)
     wheelHandler = null

frontend/src/stores/terminal.js

@@ -51,52 +51,104 @@ export const useTerminalStore = defineStore('terminal', () => {
     })
   }
 
+  // 存储事件处理器引用，便于清理
+  const eventHandlers = {
+    sshConnected: null,
+    sshData: null,
+    sshError: null,
+    sshClosed: null,
+    disconnect: null
+  }
+
   // 监听Socket事件（在Socket连接建立后设置）
   const setupSocketListeners = () => {
     if (!socket.value || socket.value._listenersSetup) return
 
     // 标记已设置监听器，避免重复设置
     socket.value._listenersSetup = true
 
-    socket.value.on('ssh-connected', () => {
+    // 创建事件处理器
+    eventHandlers.sshConnected = () => {
       isConnected.value = true
       isConnecting.value = false
       connectionError.value = null
       console.log('SSH连接成功')
-    })
+    }
 
-    socket.value.on('ssh-data', (data) => {
+    eventHandlers.sshData = (data) => {
       // 确保数据是字符串格式
       const output = typeof data === 'string' ? data : String(data)
       terminalOutput.value += output
-      
+
       // 限制输出长度，防止内存溢出
       if (terminalOutput.value.length > 50000) {
         terminalOutput.value = terminalOutput.value.slice(-25000)
       }
-    })
+    }
 
-    socket.value.on('ssh-error', (data) => {
+    eventHandlers.sshError = (data) => {
       isConnecting.value = false
       isConnected.value = false
       connectionError.value = data.error
       console.error('SSH连接错误:', data.error)
-    })
+    }
 
-    socket.value.on('ssh-closed', () => {
+    eventHandlers.sshClosed = () => {
       isConnected.value = false
       isConnecting.value = false
       currentConnection.value = null
       console.log('SSH连接已关闭')
-    })
+    }
 
-    socket.value.on('disconnect', () => {
+    eventHandlers.disconnect = () => {
       isConnected.value = false
       isConnecting.value = false
       console.log('Socket连接断开')
       // 清除监听器标记
+      if (socket.value) {
+        socket.value._listenersSetup = false
+      }
+    }
+
+    // 注册事件监听器
+    socket.value.on('ssh-connected', eventHandlers.sshConnected)
+    socket.value.on('ssh-data', eventHandlers.sshData)
+    socket.value.on('ssh-error', eventHandlers.sshError)
+    socket.value.on('ssh-closed', eventHandlers.sshClosed)
+    socket.value.on('disconnect', eventHandlers.disconnect)
+  }
+
+  // 移除所有事件监听器
+  const removeSocketListeners = () => {
+    if (!socket.value) return
+
+    if (eventHandlers.sshConnected) {
+      socket.value.off('ssh-connected', eventHandlers.sshConnected)
+    }
+    if (eventHandlers.sshData) {
+      socket.value.off('ssh-data', eventHandlers.sshData)
+    }
+    if (eventHandlers.sshError) {
+      socket.value.off('ssh-error', eventHandlers.sshError)
+    }
+    if (eventHandlers.sshClosed) {
+      socket.value.off('ssh-closed', eventHandlers.sshClosed)
+    }
+    if (eventHandlers.disconnect) {
+      socket.value.off('disconnect', eventHandlers.disconnect)
+    }
+
+    // 清空处理器引用
+    eventHandlers.sshConnected = null
+    eventHandlers.sshData = null
+    eventHandlers.sshError = null
+    eventHandlers.sshClosed = null
+    eventHandlers.disconnect = null
+
+    // 清除标记
+    if (socket.value) {
       socket.value._listenersSetup = false
-    })
+    }
   }
 
   // 连接到SSH服务器
@@ -169,10 +221,13 @@ export const useTerminalStore = defineStore('terminal', () => {
   // 断开Socket连接
   const disconnectSocket = () => {
     if (socket.value) {
+      // 先移除所有事件监听器
+      removeSocketListeners()
+      // 断开连接
       socket.value.disconnect()
       socket.value = null
     }
-    
+
     isConnected.value = false
     isConnecting.value = false
     currentConnection.value = null

frontend/src/views/QuickConnect.vue

@@ -319,6 +319,7 @@ import WebdavSync from '@/components/WebdavSync.vue'
 import GithubCard from '@/components/GithubCard.vue'
 
 const HISTORY_KEY = 'webssh_quick_connect_history'
+const MAX_HISTORY_ITEMS = 100 // 最多保存100条历史记录
 
 const router = useRouter()
 const themeStore = useThemeStore()
@@ -526,6 +527,11 @@ const saveToHistory = () => {
 
   historyList.value.unshift(record)
 
+  // 限制历史记录数量，防止无限增长
+  if (historyList.value.length > MAX_HISTORY_ITEMS) {
+    historyList.value = historyList.value.slice(0, MAX_HISTORY_ITEMS)
+  }
+
   persistHistory()
 }