0ced7e5a9f
refactor(warehouse): 重构仓库管理页面为卡片布局并优化交互 - 移除树形表格改用卡片布局 - 添加启用/禁用快捷开关 - 优化备注显示样式 - 简化表单逻辑 feat(utils): 新增WebSocket管理器类 - 支持多连接管理 - 自动重连机制 - 状态监控功能 style(views): 清理注释掉的代码和未使用的组件
138 lines
3.6 KiB
JavaScript
138 lines
3.6 KiB
JavaScript
/**
|
||
* WebSocket 管理器
|
||
* 用于管理多个 WebSocket 连接
|
||
*/
|
||
|
||
class WebSocketManager {
|
||
constructor(url) {
|
||
this.connections = new Map()
|
||
this.baseUrl = url
|
||
}
|
||
|
||
/**
|
||
* 创建 WebSocket 连接
|
||
* @param {String} type - WebSocket 类型 (track_measure, track_position, track_signal, track_matmap, calc_setup_result)
|
||
* @param {Function} onMessage - 接收消息的回调函数
|
||
* @param {Function} onOpen - 连接打开的回调函数
|
||
* @param {Function} onError - 错误回调函数
|
||
* @param {Function} onClose - 关闭回调函数
|
||
*/
|
||
connect(type, { onMessage, onOpen, onError, onClose } = {}) {
|
||
// 如果已存在连接，先断开
|
||
if (this.connections.has(type)) {
|
||
this.disconnect(type)
|
||
}
|
||
|
||
const url = `${this.baseUrl}?type=${type}`
|
||
console.log(`[WebSocket] 正在连接: ${type}`)
|
||
|
||
try {
|
||
const socket = new WebSocket(url)
|
||
|
||
socket.onopen = (event) => {
|
||
console.log(`[WebSocket] 连接成功: ${type}`)
|
||
if (onOpen) onOpen(event)
|
||
}
|
||
|
||
socket.onmessage = (event) => {
|
||
try {
|
||
const data = JSON.parse(event.data)
|
||
if (onMessage) onMessage(data)
|
||
} catch (error) {
|
||
console.error(`[WebSocket] 数据解析失败 (${type}):`, error)
|
||
// 如果不是 JSON，直接传递原始数据
|
||
if (onMessage) onMessage(event.data)
|
||
}
|
||
}
|
||
|
||
socket.onerror = (error) => {
|
||
console.error(`[WebSocket] 连接错误 (${type}):`, error)
|
||
if (onError) onError(error)
|
||
}
|
||
|
||
socket.onclose = (event) => {
|
||
console.log(`[WebSocket] 连接关闭 (${type}):`, event.code, event.reason)
|
||
this.connections.delete(type)
|
||
|
||
if (onClose) {
|
||
onClose(event)
|
||
} else if (event.code !== 1000) {
|
||
// 非正常关闭，3秒后自动重连
|
||
console.log(`[WebSocket] 3秒后尝试重连: ${type}`)
|
||
setTimeout(() => {
|
||
this.connect(type, { onMessage, onOpen, onError, onClose })
|
||
}, 3000)
|
||
}
|
||
}
|
||
|
||
this.connections.set(type, socket)
|
||
return socket
|
||
} catch (error) {
|
||
console.error(`[WebSocket] 创建连接失败 (${type}):`, error)
|
||
// 失败后3秒重试
|
||
setTimeout(() => {
|
||
this.connect(type, { onMessage, onOpen, onError, onClose })
|
||
}, 3000)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 断开指定类型的连接
|
||
*/
|
||
disconnect(type) {
|
||
const socket = this.connections.get(type)
|
||
if (socket) {
|
||
console.log(`[WebSocket] 主动断开: ${type}`)
|
||
socket.close(1000, '主动关闭')
|
||
this.connections.delete(type)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 断开所有连接
|
||
*/
|
||
disconnectAll() {
|
||
console.log('[WebSocket] 断开所有连接')
|
||
this.connections.forEach((socket, type) => {
|
||
this.disconnect(type)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取指定类型的连接状态
|
||
*/
|
||
isConnected(type) {
|
||
const socket = this.connections.get(type)
|
||
return socket && socket.readyState === WebSocket.OPEN
|
||
}
|
||
|
||
/**
|
||
* 获取所有连接状态
|
||
*/
|
||
getAllStatus() {
|
||
const status = {}
|
||
this.connections.forEach((socket, type) => {
|
||
status[type] = socket.readyState === WebSocket.OPEN
|
||
})
|
||
return status
|
||
}
|
||
|
||
/**
|
||
* 发送消息（如果需要）
|
||
*/
|
||
send(type, message) {
|
||
const socket = this.connections.get(type)
|
||
if (socket && socket.readyState === WebSocket.OPEN) {
|
||
const data = typeof message === 'string' ? message : JSON.stringify(message)
|
||
socket.send(data)
|
||
return true
|
||
}
|
||
console.warn(`[WebSocket] 无法发送消息，连接未打开: ${type}`)
|
||
return false
|
||
}
|
||
}
|
||
|
||
// 导出单例
|
||
export default WebSocketManager
|
||
|