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:
@@ -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`。
|
||||
|
||||
Reference in New Issue
Block a user