fix(desktop): 修复桌面端 API 连接问题

- API 客户端使用完整后端 URL (localhost:3000)
- 添加 tauri-plugin-http 支持外部 HTTP 请求
- 配置 CSP 允许连接 localhost
- 同步 useChat hook 修复 WebSocket 错误处理
This commit is contained in:
2025-12-12 15:30:01 +08:00
parent fc5a644726
commit 4ca8c413a6
10 changed files with 458 additions and 19 deletions
+1
View File
@@ -18,6 +18,7 @@ tauri = { version = "2", features = ["tray-icon"] }
tauri-plugin-shell = "2"
tauri-plugin-fs = "2"
tauri-plugin-dialog = "2"
tauri-plugin-http = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
tokio = { version = "1", features = ["full"] }
@@ -0,0 +1,19 @@
{
"$schema": "https://schema.tauri.app/config/2/capability",
"identifier": "default",
"description": "Default capabilities for the application",
"windows": ["*"],
"permissions": [
"core:default",
"shell:default",
"fs:default",
"dialog:default",
{
"identifier": "http:default",
"allow": [
{ "url": "http://localhost:*/*" },
{ "url": "http://127.0.0.1:*/*" }
]
}
]
}
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
{}
{"default":{"identifier":"default","description":"Default capabilities for the application","local":true,"windows":["*"],"permissions":["core:default","shell:default","fs:default","dialog:default",{"identifier":"http:default","allow":[{"url":"http://localhost:*/*"},{"url":"http://127.0.0.1:*/*"}]}]}}
@@ -1934,6 +1934,132 @@
}
}
},
{
"if": {
"properties": {
"identifier": {
"anyOf": [
{
"description": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`",
"type": "string",
"const": "http:default",
"markdownDescription": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`"
},
{
"description": "Enables the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch",
"markdownDescription": "Enables the fetch command without any pre-configured scope."
},
{
"description": "Enables the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-cancel",
"markdownDescription": "Enables the fetch_cancel command without any pre-configured scope."
},
{
"description": "Enables the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-read-body",
"markdownDescription": "Enables the fetch_read_body command without any pre-configured scope."
},
{
"description": "Enables the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-send",
"markdownDescription": "Enables the fetch_send command without any pre-configured scope."
},
{
"description": "Denies the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch",
"markdownDescription": "Denies the fetch command without any pre-configured scope."
},
{
"description": "Denies the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-cancel",
"markdownDescription": "Denies the fetch_cancel command without any pre-configured scope."
},
{
"description": "Denies the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-read-body",
"markdownDescription": "Denies the fetch_read_body command without any pre-configured scope."
},
{
"description": "Denies the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-send",
"markdownDescription": "Denies the fetch_send command without any pre-configured scope."
}
]
}
}
},
"then": {
"properties": {
"allow": {
"items": {
"title": "HttpScopeEntry",
"description": "HTTP scope entry.",
"anyOf": [
{
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
},
{
"type": "object",
"required": [
"url"
],
"properties": {
"url": {
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
}
}
}
]
}
},
"deny": {
"items": {
"title": "HttpScopeEntry",
"description": "HTTP scope entry.",
"anyOf": [
{
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
},
{
"type": "object",
"required": [
"url"
],
"properties": {
"url": {
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
}
}
}
]
}
}
}
},
"properties": {
"identifier": {
"description": "Identifier of the permission or permission set.",
"allOf": [
{
"$ref": "#/definitions/Identifier"
}
]
}
}
},
{
"if": {
"properties": {
@@ -5948,6 +6074,60 @@
"const": "fs:write-files",
"markdownDescription": "This enables all file write related commands without any pre-configured accessible paths."
},
{
"description": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`",
"type": "string",
"const": "http:default",
"markdownDescription": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`"
},
{
"description": "Enables the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch",
"markdownDescription": "Enables the fetch command without any pre-configured scope."
},
{
"description": "Enables the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-cancel",
"markdownDescription": "Enables the fetch_cancel command without any pre-configured scope."
},
{
"description": "Enables the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-read-body",
"markdownDescription": "Enables the fetch_read_body command without any pre-configured scope."
},
{
"description": "Enables the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-send",
"markdownDescription": "Enables the fetch_send command without any pre-configured scope."
},
{
"description": "Denies the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch",
"markdownDescription": "Denies the fetch command without any pre-configured scope."
},
{
"description": "Denies the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-cancel",
"markdownDescription": "Denies the fetch_cancel command without any pre-configured scope."
},
{
"description": "Denies the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-read-body",
"markdownDescription": "Denies the fetch_read_body command without any pre-configured scope."
},
{
"description": "Denies the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-send",
"markdownDescription": "Denies the fetch_send command without any pre-configured scope."
},
{
"description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
"type": "string",
@@ -1934,6 +1934,132 @@
}
}
},
{
"if": {
"properties": {
"identifier": {
"anyOf": [
{
"description": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`",
"type": "string",
"const": "http:default",
"markdownDescription": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`"
},
{
"description": "Enables the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch",
"markdownDescription": "Enables the fetch command without any pre-configured scope."
},
{
"description": "Enables the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-cancel",
"markdownDescription": "Enables the fetch_cancel command without any pre-configured scope."
},
{
"description": "Enables the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-read-body",
"markdownDescription": "Enables the fetch_read_body command without any pre-configured scope."
},
{
"description": "Enables the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-send",
"markdownDescription": "Enables the fetch_send command without any pre-configured scope."
},
{
"description": "Denies the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch",
"markdownDescription": "Denies the fetch command without any pre-configured scope."
},
{
"description": "Denies the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-cancel",
"markdownDescription": "Denies the fetch_cancel command without any pre-configured scope."
},
{
"description": "Denies the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-read-body",
"markdownDescription": "Denies the fetch_read_body command without any pre-configured scope."
},
{
"description": "Denies the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-send",
"markdownDescription": "Denies the fetch_send command without any pre-configured scope."
}
]
}
}
},
"then": {
"properties": {
"allow": {
"items": {
"title": "HttpScopeEntry",
"description": "HTTP scope entry.",
"anyOf": [
{
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
},
{
"type": "object",
"required": [
"url"
],
"properties": {
"url": {
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
}
}
}
]
}
},
"deny": {
"items": {
"title": "HttpScopeEntry",
"description": "HTTP scope entry.",
"anyOf": [
{
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
},
{
"type": "object",
"required": [
"url"
],
"properties": {
"url": {
"description": "A URL that can be accessed by the webview when using the HTTP APIs. Wildcards can be used following the URL pattern standard.\n\nSee [the URL Pattern spec](https://urlpattern.spec.whatwg.org/) for more information.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin on port 443\n\n- \"https://*:*\" : allows all HTTPS origin on any port\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
"type": "string"
}
}
}
]
}
}
}
},
"properties": {
"identifier": {
"description": "Identifier of the permission or permission set.",
"allOf": [
{
"$ref": "#/definitions/Identifier"
}
]
}
}
},
{
"if": {
"properties": {
@@ -5948,6 +6074,60 @@
"const": "fs:write-files",
"markdownDescription": "This enables all file write related commands without any pre-configured accessible paths."
},
{
"description": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`",
"type": "string",
"const": "http:default",
"markdownDescription": "This permission set configures what kind of\nfetch operations are available from the http plugin.\n\nThis enables all fetch operations but does not\nallow explicitly any origins to be fetched. This needs to\nbe manually configured before usage.\n\n#### Granted Permissions\n\nAll fetch operations are enabled.\n\n\n#### This default permission set includes:\n\n- `allow-fetch`\n- `allow-fetch-cancel`\n- `allow-fetch-read-body`\n- `allow-fetch-send`"
},
{
"description": "Enables the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch",
"markdownDescription": "Enables the fetch command without any pre-configured scope."
},
{
"description": "Enables the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-cancel",
"markdownDescription": "Enables the fetch_cancel command without any pre-configured scope."
},
{
"description": "Enables the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-read-body",
"markdownDescription": "Enables the fetch_read_body command without any pre-configured scope."
},
{
"description": "Enables the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:allow-fetch-send",
"markdownDescription": "Enables the fetch_send command without any pre-configured scope."
},
{
"description": "Denies the fetch command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch",
"markdownDescription": "Denies the fetch command without any pre-configured scope."
},
{
"description": "Denies the fetch_cancel command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-cancel",
"markdownDescription": "Denies the fetch_cancel command without any pre-configured scope."
},
{
"description": "Denies the fetch_read_body command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-read-body",
"markdownDescription": "Denies the fetch_read_body command without any pre-configured scope."
},
{
"description": "Denies the fetch_send command without any pre-configured scope.",
"type": "string",
"const": "http:deny-fetch-send",
"markdownDescription": "Denies the fetch_send command without any pre-configured scope."
},
{
"description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
"type": "string",
+1
View File
@@ -11,6 +11,7 @@ pub fn run() {
.plugin(tauri_plugin_shell::init())
.plugin(tauri_plugin_fs::init())
.plugin(tauri_plugin_dialog::init())
.plugin(tauri_plugin_http::init())
.setup(|app| {
setup_tray(app)?;
Ok(())
+1 -1
View File
@@ -24,7 +24,7 @@
}
],
"security": {
"csp": null
"csp": "default-src 'self'; connect-src 'self' http://localhost:* ws://localhost:* http://127.0.0.1:* ws://127.0.0.1:*; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"
},
"trayIcon": {
"iconPath": "icons/icon.png",
+9 -5
View File
@@ -35,7 +35,8 @@ export interface HealthStatus {
};
}
const API_BASE = '/api';
// Tauri 应用需要完整的后端 URL
const API_BASE = 'http://localhost:3000/api';
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
const response = await fetch(`${API_BASE}${path}`, {
@@ -56,7 +57,11 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
// Health
export async function getHealth(): Promise<HealthStatus> {
return request('GET', '/../health');
const response = await fetch('http://localhost:3000/health');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
}
// Sessions
@@ -90,9 +95,8 @@ export async function sendMessage(
// WebSocket
export function createWebSocket(sessionId: string): WebSocket {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const host = window.location.host;
return new WebSocket(`${protocol}//${host}/api/ws/${sessionId}`);
// Tauri 应用直接连接后端
return new WebSocket(`ws://localhost:3000/api/ws/${sessionId}`);
}
// Files
+65 -11
View File
@@ -10,6 +10,7 @@ import { createWebSocket, getMessages, type Message } from '../api/client';
interface UseChatOptions {
sessionId: string;
onError?: (error: Error) => void;
onSessionNotFound?: () => void;
}
interface ChatState {
@@ -19,7 +20,7 @@ interface ChatState {
streamingContent: string;
}
export function useChat({ sessionId, onError }: UseChatOptions) {
export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOptions) {
const [state, setState] = useState<ChatState>({
messages: [],
isConnected: false,
@@ -29,6 +30,16 @@ export function useChat({ sessionId, onError }: UseChatOptions) {
const wsRef = useRef<WebSocket | null>(null);
const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
const reconnectAttemptsRef = useRef(0);
const maxReconnectAttempts = 5;
// 标记是否正在主动关闭连接(切换 session 时)
const isClosingRef = useRef(false);
// 用 ref 存储回调,避免依赖变化导致无限循环
const onErrorRef = useRef(onError);
const onSessionNotFoundRef = useRef(onSessionNotFound);
onErrorRef.current = onError;
onSessionNotFoundRef.current = onSessionNotFound;
// 加载历史消息
const loadMessages = useCallback(async () => {
@@ -36,28 +47,50 @@ export function useChat({ sessionId, onError }: UseChatOptions) {
const { data } = await getMessages(sessionId);
setState((prev) => ({ ...prev, messages: data }));
} catch (error) {
onError?.(error instanceof Error ? error : new Error('Failed to load messages'));
// 会话不存在(404 或 "Session not found"),通知上层重新创建
const msg = error instanceof Error ? error.message : '';
if (msg.includes('404') || msg.toLowerCase().includes('not found')) {
onSessionNotFoundRef.current?.();
return;
}
onErrorRef.current?.(error instanceof Error ? error : new Error('Failed to load messages'));
}
}, [sessionId, onError]);
}, [sessionId]);
// 连接 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);
ws.onopen = () => {
reconnectAttemptsRef.current = 0; // 连接成功,重置重连次数
setState((prev) => ({ ...prev, isConnected: true }));
};
ws.onclose = () => {
setState((prev) => ({ ...prev, isConnected: false }));
// 自动重连
reconnectTimeoutRef.current = setTimeout(connect, 3000);
// 主动关闭时不重连
if (isClosingRef.current) {
isClosingRef.current = false;
return;
}
// 限制重连次数
if (reconnectAttemptsRef.current < maxReconnectAttempts) {
reconnectAttemptsRef.current++;
reconnectTimeoutRef.current = setTimeout(connect, 3000);
}
};
ws.onerror = () => {
onError?.(new Error('WebSocket connection error'));
// 主动关闭时不报错
if (isClosingRef.current) return;
onErrorRef.current?.(new Error('WebSocket connection error'));
};
ws.onmessage = (event) => {
@@ -98,7 +131,7 @@ export function useChat({ sessionId, onError }: UseChatOptions) {
break;
case 'error':
onError?.(new Error(message.payload?.message || 'Unknown error'));
onErrorRef.current?.(new Error(message.payload?.message || 'Unknown error'));
setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
break;
}
@@ -108,13 +141,13 @@ export function useChat({ sessionId, onError }: UseChatOptions) {
};
wsRef.current = ws;
}, [sessionId, onError]);
}, [sessionId]);
// 发送消息
const sendMessage = useCallback(
(content: string) => {
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
onError?.(new Error('WebSocket not connected'));
onErrorRef.current?.(new Error('WebSocket not connected'));
return;
}
@@ -128,7 +161,7 @@ export function useChat({ sessionId, onError }: UseChatOptions) {
})
);
},
[sessionId, onError]
[sessionId]
);
// 取消处理
@@ -147,12 +180,33 @@ export function useChat({ sessionId, onError }: UseChatOptions) {
// 初始化
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]);