refactor: 前端 WebSocket 地址改为动态推导,添加 Vite 开发代理

- websocket.ts: 移除硬编码 localhost:8080,基于 window.location 动态构建 WS URL
- vite.config.ts: 添加 /ws 和 /api 的 server.proxy 配置
- 同步更新 02-系统架构.md 和 03-接口文档.md 中的开发环境说明
This commit is contained in:
hhs
2026-06-14 13:00:54 +08:00
parent 563ca12790
commit d8630a8f26
3 changed files with 16 additions and 7 deletions

View File

@@ -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`