fix(web): 修复 WebSocket 切换 session 时的错误

- 添加 isClosingRef 标记主动关闭,避免触发错误回调
- 在 effect 开始时重置 isClosingRef 支持 StrictMode
- 增强 Vite 代理错误处理,静默 EPIPE/ECONNRESET 错误
This commit is contained in:
2025-12-12 15:29:46 +08:00
parent 40afa10ed9
commit fc5a644726
2 changed files with 66 additions and 1 deletions
+36 -1
View File
@@ -32,6 +32,8 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption
const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
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]);