diff --git a/packages/web/src/hooks/useChat.ts b/packages/web/src/hooks/useChat.ts index 548116e..976fd48 100644 --- a/packages/web/src/hooks/useChat.ts +++ b/packages/web/src/hooks/useChat.ts @@ -32,6 +32,8 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption const reconnectTimeoutRef = useRef(); const reconnectAttemptsRef = useRef(0); const maxReconnectAttempts = 5; + // 标记是否正在主动关闭连接(切换 session 时) + const isClosingRef = useRef(false); // 用 ref 存储回调,避免依赖变化导致无限循环 const onErrorRef = useRef(onError); @@ -57,7 +59,12 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption // 连接 WebSocket const connect = useCallback(() => { + // 如果正在关闭,不要连接 + if (isClosingRef.current) return; + // 如果已经连接,不要重复连接 if (wsRef.current?.readyState === WebSocket.OPEN) return; + // 如果正在连接中,不要重复连接 + if (wsRef.current?.readyState === WebSocket.CONNECTING) return; const ws = createWebSocket(sessionId); @@ -68,6 +75,11 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption ws.onclose = () => { setState((prev) => ({ ...prev, isConnected: false })); + // 主动关闭时不重连 + if (isClosingRef.current) { + isClosingRef.current = false; + return; + } // 限制重连次数 if (reconnectAttemptsRef.current < maxReconnectAttempts) { reconnectAttemptsRef.current++; @@ -76,6 +88,8 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption }; ws.onerror = () => { + // 主动关闭时不报错 + if (isClosingRef.current) return; onErrorRef.current?.(new Error('WebSocket connection error')); }; @@ -166,12 +180,33 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption // 初始化 useEffect(() => { + // 重置状态 + isClosingRef.current = false; + setState({ + messages: [], + isConnected: false, + isLoading: false, + streamingContent: '', + }); + reconnectAttemptsRef.current = 0; + loadMessages(); connect(); return () => { clearTimeout(reconnectTimeoutRef.current); - wsRef.current?.close(); + // 标记为主动关闭,避免触发错误回调和重连 + isClosingRef.current = true; + // 只关闭已建立的连接 + if (wsRef.current) { + const ws = wsRef.current; + // 清除引用,防止后续操作 + wsRef.current = null; + // 只有在 OPEN 或 CONNECTING 状态才关闭 + if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) { + ws.close(); + } + } }; }, [loadMessages, connect]); diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts index 5dad97c..90c4bcd 100644 --- a/packages/web/vite.config.ts +++ b/packages/web/vite.config.ts @@ -61,6 +61,36 @@ export default defineConfig({ target: 'http://localhost:3000', changeOrigin: true, ws: true, + // 忽略 WebSocket 代理错误(切换 session 时正常发生) + configure: (proxy) => { + // 静默忽略所有代理错误 + proxy.on('error', (err, _req, res) => { + const msg = err.message || ''; + // EPIPE/ECONNRESET 是正常的连接关闭错误 + if (msg.includes('EPIPE') || msg.includes('ECONNRESET') || msg.includes('ECONNREFUSED')) { + if (res && 'writeHead' in res && !res.headersSent) { + res.writeHead(502); + res.end(); + } + return; + } + console.error('[proxy error]', msg); + }); + // WebSocket 请求阶段错误 + proxy.on('proxyReqWs', (_proxyReq, _req, socket) => { + socket.on('error', () => {}); + }); + // WebSocket 响应阶段错误 + proxy.on('open', (proxySocket) => { + proxySocket.on('error', () => {}); + }); + // WebSocket 关闭 + proxy.on('close', (_res, socket) => { + if (socket && !socket.destroyed) { + socket.destroy(); + } + }); + }, }, '/health': { target: 'http://localhost:3000',