重构 WebSocket 推送服务:统一使用 /ws 路径和 channel 订阅模式
- 后端重构: - 统一 WebSocket 路径为 /ws,通过 channel 区分不同推送服务 - 实现 UnifiedWebSocketHandler 统一处理所有推送频道 - 实现 WebSocketSubscriptionService 管理订阅和推送 - 消息类型改为 int 类型(1:SUB, 2:UNSUB, 3:DATA, 4:SUB_ACK, 5:PING, 6:PONG) - status 字段改为 int 类型(0: success, 非0: error) - 移除旧的 /ws/positions 路由和 PositionWebSocketHandler - 修复首推数据:订阅 position 频道后立即发送全量数据 - 前端重构: - 实现全局 WebSocket 管理器(单例模式) - 应用启动时立即建立全局 WebSocket 连接 - 实现 useWebSocketSubscription hook 用于订阅频道 - PositionList 完全依赖 WebSocket 推送,移除 HTTP 轮询 - 添加连接状态显示和自动重连机制 - 实现心跳保活机制(PING/PONG) - 配置更新: - 添加 WebSocket 相关配置项 - 更新 vite.config.ts 添加 /ws 代理配置
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { wsManager, SubscriptionCallback } from '../services/websocket'
|
||||
|
||||
/**
|
||||
* 使用 WebSocket 订阅
|
||||
*/
|
||||
export function useWebSocketSubscription<T = any>(
|
||||
channel: string,
|
||||
callback: SubscriptionCallback,
|
||||
payload?: any
|
||||
): { connected: boolean } {
|
||||
const [connected, setConnected] = useState(wsManager.isConnected())
|
||||
const callbackRef = useRef(callback)
|
||||
|
||||
// 更新回调引用
|
||||
useEffect(() => {
|
||||
callbackRef.current = callback
|
||||
}, [callback])
|
||||
|
||||
useEffect(() => {
|
||||
// 订阅频道(连接已在 App.tsx 中全局建立,这里只需要订阅)
|
||||
const unsubscribe = wsManager.subscribe(channel, (data) => {
|
||||
callbackRef.current(data)
|
||||
}, payload)
|
||||
|
||||
// 监听连接状态(连接在 App.tsx 中全局管理,这里只监听状态变化)
|
||||
const removeConnectionListener = wsManager.onConnectionChange(setConnected)
|
||||
|
||||
// 初始化连接状态
|
||||
setConnected(wsManager.isConnected())
|
||||
|
||||
return () => {
|
||||
unsubscribe()
|
||||
removeConnectionListener()
|
||||
}
|
||||
}, [channel, payload])
|
||||
|
||||
return { connected }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user