gavin/map-client-vue

Fork 0

Files

douboer d93bc02772 first commit

2025-10-14 14:18:20 +08:00

10 KiB

Raw Blame History

🔄 自动重连功能说明

功能描述

页面刷新后，自动重新连接之前已连接的 MCP 服务器。

工作原理

1. 保存连接状态

当你连接或断开服务器时，连接状态会自动保存到浏览器的 localStorage 中。

2. 页面加载时

从 localStorage 加载服务器配置
检查哪些服务器之前是"已连接"状态
自动尝试重新连接这些服务器

3. 重连过程

页面刷新
  ↓
loadServers() - 加载配置，所有服务器状态设为 'disconnected'
  ↓
MCPSettings 组件挂载
  ↓
autoReconnect() - 自动重连
  ↓
检查 localStorage 中哪些服务器之前是 'connected'
  ↓
并行重连所有这些服务器
  ↓
成功：服务器状态变为 'connected'
失败：服务器保持 'disconnected'

代码实现

1. Store 中的自动重连函数

文件: web/src/stores/newServer.ts

// 自动重连之前已连接的服务器
const autoReconnect = async () => {
  const stored = localStorage.getItem('mcp-servers')
  if (!stored) return
  
  try {
    const parsedServers = JSON.parse(stored) as MCPServerConfig[]
    const wasConnected = parsedServers.filter(s => s.status === 'connected')
    
    if (wasConnected.length > 0) {
      console.log(`🔄 发现 ${wasConnected.length} 个之前已连接的服务器，尝试自动重连...`)
      
      // 并行重连所有服务器
      const reconnectPromises = wasConnected.map(async (server) => {
        const currentServer = servers.value.find(s => s.id === server.id)
        if (currentServer) {
          try {
            console.log(`🔌 自动重连: ${server.name}`)
            await connectServer(server.id)
            console.log(`✅ 自动重连成功: ${server.name}`)
          } catch (err) {
            console.warn(`⚠️ 自动重连失败: ${server.name}`, err)
            // 失败了也不要抛出错误，继续尝试其他服务器
          }
        }
      })
      
      await Promise.allSettled(reconnectPromises)
      console.log(`✅ 自动重连完成`)
    }
  } catch (err) {
    console.error('自动重连失败:', err)
  }
}

2. 组件中调用自动重连

文件: web/src/components/MCPSettings.vue

// 组件挂载时自动重连之前已连接的服务器
onMounted(async () => {
  console.log('🚀 MCPSettings 组件已挂载，开始自动重连...')
  try {
    await serverStore.autoReconnect()
  } catch (error) {
    console.error('自动重连失败:', error)
  }
})

3. 加载服务器时的处理

const loadServers = () => {
  try {
    const stored = localStorage.getItem('mcp-servers')
    if (stored) {
      const parsedServers = JSON.parse(stored) as MCPServerConfig[]
      servers.value = parsedServers.map(server => ({
        ...server,
        // 保留之前的连接状态，但将 'connected' 改为 'disconnected'
        // 因为页面刷新后实际连接已断开
        status: server.status === 'connected' ? 'disconnected' : server.status,
        // 清除能力信息，因为连接已断开
        capabilities: undefined
      }))
      
      console.log(`📦 加载了 ${servers.value.length} 个服务器配置`)
    }
  } catch (err) {
    console.error('加载服务器配置失败:', err)
    error.value = '加载服务器配置失败'
  }
}

使用示例

场景：正常使用流程

首次连接服务器

用户操作: 点击"连接"按钮
结果: 服务器状态变为 'connected'
存储: localStorage 保存 status: 'connected'

刷新页面

加载阶段:
- loadServers() 读取 localStorage
- 发现服务器之前是 'connected'
- 暂时设为 'disconnected'（因为连接已丢失）
- 页面显示"未连接"状态

挂载阶段:
- MCPSettings 组件挂载
- 调用 autoReconnect()
- 检测到服务器之前已连接
- 自动尝试重新连接

自动重连成功

结果: 
- 服务器状态变回 'connected'
- 页面显示"已连接"状态
- 绿色圆点显示
- 工具列表恢复显示

自动重连失败

原因: MCP 服务器未运行或网络问题
结果:
- 服务器保持 'disconnected' 状态
- 控制台显示警告: ⚠️ 自动重连失败: xxx
- 用户可以手动点击"连接"按钮重试

控制台日志

成功的自动重连

🚀 MCPSettings 组件已挂载，开始自动重连...
🔄 发现 2 个之前已连接的服务器，尝试自动重连...
🔌 自动重连: xhs-http
🔌 自动重连: test-sse-server
🔗 正在连接到 MCP 服务器: xhs-http (http://0.0.0.0:3100/mcp)
🔄 原始URL: http://0.0.0.0:3100/mcp
🔄 转换后URL: http://localhost:3100/mcp
✅ 成功连接到 MCP 服务器: xhs-http
✅ 自动重连成功: xhs-http
✅ 自动重连成功: test-sse-server
✅ 自动重连完成

部分失败的自动重连

🚀 MCPSettings 组件已挂载，开始自动重连...
🔄 发现 2 个之前已连接的服务器，尝试自动重连...
🔌 自动重连: xhs-http
🔌 自动重连: offline-server
✅ 自动重连成功: xhs-http
❌ 连接 MCP 服务器失败: offline-server
⚠️ 自动重连失败: offline-server Error: 网络连接失败
✅ 自动重连完成

配置选项

禁用自动重连（可选）

如果你不想要自动重连功能，可以注释掉 MCPSettings.vue 中的 onMounted 钩子：

// 注释掉这段代码即可禁用自动重连
/*
onMounted(async () => {
  console.log('🚀 MCPSettings 组件已挂载，开始自动重连...')
  try {
    await serverStore.autoReconnect()
  } catch (error) {
    console.error('自动重连失败:', error)
  }
})
*/

手动触发重连

你也可以在需要时手动调用：

// 在组件中
const reconnect = async () => {
  await serverStore.autoReconnect()
}

// 在模板中
<n-button @click="reconnect">重新连接所有服务器</n-button>

优势

✅ 用户体验提升

刷新页面后无需手动重新连接
自动恢复之前的工作状态
减少重复操作

✅ 可靠性

使用 Promise.allSettled() 确保所有重连尝试都完成
单个服务器失败不影响其他服务器
详细的错误日志方便调试

✅ 性能

并行重连多个服务器
不阻塞页面渲染
异步执行，不影响用户操作

限制

⚠️ 实际连接仍会断开

页面刷新会断开 WebSocket/HTTP 连接
即使显示"已连接"，也需要重新建立连接
自动重连是重新创建连接，不是恢复旧连接

⚠️ 依赖服务器可用性

如果 MCP 服务器未运行，自动重连会失败
网络问题会导致重连失败
用户需要确保 MCP 服务器在运行

⚠️ 不会保存会话状态

不保存之前的工具调用历史
不保存资源读取状态
只恢复连接，不恢复会话数据

测试步骤

1. 准备环境

# 启动 MCP 服务器
cd /Users/gavin/xhs/mcp_client/xhsLoginMCP
node server.js

# 启动前端开发服务器
cd /Users/gavin/xhs/mcp_client/mcp-client-vue/web
npx vite

2. 连接服务器

访问 http://localhost:5175/（或当前端口）
找到服务器卡片
点击"连接"按钮
确认状态变为"已连接"

3. 刷新页面

按 Cmd + R 或点击浏览器刷新按钮
打开控制台（Cmd + Option + I）
观察自动重连日志

4. 验证结果

预期行为:

页面加载时短暂显示"未连接"（1-2秒）
自动开始重连（控制台显示日志）
重连成功后状态变为"已连接"
可以看到工具列表
绿色圆点显示

如果 MCP 服务器未运行:

自动重连失败
控制台显示警告
服务器保持"未连接"状态
可以手动点击"连接"按钮重试

故障排查

Q1: 刷新后没有自动重连

检查:

控制台是否有 "🚀 MCPSettings 组件已挂载" 日志？
是否有 "🔄 发现 X 个之前已连接的服务器" 日志？
localStorage 中是否保存了服务器配置？

解决方案:

// 在控制台检查 localStorage
const stored = localStorage.getItem('mcp-servers')
const servers = JSON.parse(stored)
console.log('保存的服务器:', servers)
console.log('之前已连接的:', servers.filter(s => s.status === 'connected'))

Q2: 自动重连一直失败

检查:

MCP 服务器是否在运行？
端口是否正确？
是否有 CORS 问题？