From d8630a8f26d8875dcb01d46b4186b9df2820fb5d Mon Sep 17 00:00:00 2001
From: hhs <386998068@qq.com>
Date: Sun, 14 Jun 2026 13:00:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=89=8D=E7=AB=AF=20WebSocket=20?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E6=94=B9=E4=B8=BA=E5=8A=A8=E6=80=81=E6=8E=A8?=
 =?UTF-8?q?=E5=AF=BC=EF=BC=8C=E6=B7=BB=E5=8A=A0=20Vite=20=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E4=BB=A3=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- websocket.ts: 移除硬编码 localhost:8080，基于 window.location 动态构建 WS URL
- vite.config.ts: 添加 /ws 和 /api 的 server.proxy 配置
- 同步更新 02-系统架构.md 和 03-接口文档.md 中的开发环境说明
---
 docs/02-系统架构.md     |  6 +++---
 docs/03-接口文档.md     |  6 ++----
 frontend/vite.config.ts | 11 +++++++++++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/02-系统架构.md b/docs/02-系统架构.md
index e4de9d1..0a2b316 100644
--- a/docs/02-系统架构.md
+++ b/docs/02-系统架构.md
@@ -127,7 +127,7 @@ Pipeline 实现（`internal/orchestrator/pipeline.go`）流程：
 ```typescript
 function useVisionSession() {
   const [messages, setMessages] = useState<Message[]>([]);
-  const wsRef = useWebSocket("ws://localhost:8080/ws");
+  const wsRef = useWebSocket(`${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/ws`);
   const videoRef = useRef<HTMLVideoElement>(null);
   const { captureFrame } = useCamera(videoRef);
 
@@ -249,6 +249,6 @@ server {
 
 ### 开发环境
 
-开发时前端（Vite :5173）和后端（Gin :8080）不同端口。当前实现中前端 WebSocket 地址硬编码为 `ws://localhost:8080/ws`，直连后端，不经过 Vite 代理。
+开发时前端（Vite :5173）和后端（Gin :8080）不同端口。前端 WebSocket 地址基于 `window.location.host` 动态构建，通过 Vite `server.proxy` 转发到后端，无需硬编码端口。
 
-> 如需使用 Vite 代理解决跨域，可在 `vite.config.ts` 中添加 `server.proxy` 配置，并将前端 WebSocket 地址改为相对路径。
+`vite.config.ts` 中配置了 `/ws`（WebSocket）和 `/api`（REST）的代理，目标为 `http://localhost:8080`。
diff --git a/docs/03-接口文档.md b/docs/03-接口文档.md
index 152ac89..6fa54f4 100644
--- a/docs/03-接口文档.md
+++ b/docs/03-接口文档.md
@@ -1054,10 +1054,8 @@ function reconnect(attempt: number) {
 
 **生产环境**：Nginx 将 `/`（前端）、`/api/*`（REST）、`/ws`（WebSocket）统一反代到同一域名，详见 `02-系统架构.md` 部署架构章节。
 
-**开发环境**：前端 WebSocket 地址硬编码为 `ws://localhost:8080/ws`，直连后端，不经过 Vite 代理。REST API 同理直连 `http://localhost:8080`。
+**开发环境**：前端 WebSocket 地址基于 `window.location.host` 动态构建（相对路径），通过 Vite `server.proxy` 转发到后端 `http://localhost:8080`。REST API（`/api`）同理通过 Vite 代理转发。
 
-> 当前开发模式为前后端直连，未使用 Vite proxy。如需使用 Vite 代理解决跨域，需在 `vite.config.ts` 中添加 `server.proxy` 配置，并将前端 WebSocket 地址改为相对路径。
-
-**Go 后端 WebSocket CheckOrigin**：生产环境 Nginx 同源，`CheckOrigin` 可保持默认（拒绝跨域）。开发环境前端直连后端，需确保 `CheckOrigin` 允许跨域或使用 Vite proxy 转发。
+**Go 后端 WebSocket CheckOrigin**：生产环境 Nginx 同源，`CheckOrigin` 可保持默认（拒绝跨域）。开发环境通过 Vite proxy 转发，前后端同源，无需额外配置 `CheckOrigin`。
 
 > 如果未来需要支持第三方客户端直连（如移动端），再按需添加 CORS 中间件和 `CheckOrigin` 白名单。
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d3deedc..3f3146b 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -15,6 +15,17 @@ const staticFiles = [
 ]
 
 export default defineConfig({
+  server: {
+    proxy: {
+      '/ws': {
+        target: 'http://localhost:8080',
+        ws: true,
+      },
+      '/api': {
+        target: 'http://localhost:8080',
+      },
+    },
+  },
   plugins: [
     react(),
     {
-- 
2.49.1