// 组件didMount调用
Store.createWebSocket(Math.random())
// Store
url = `ws://${window.backend_server.slice(7)}/apronMapWebsocket/` // 这个要与后端提供的相同
ws = null // WebSocket的引用
reconnectTimeInterval = 2000 // 这里设置重连间隔(ms)
timeoutObj = null
timeout = 10000
webSocketId
// 建立连接
@action createWebSocket = (id) => {
// store 里 window.backend_server 无法更改,暂时在 UI 里存储
let url = `ws://${UI.configIP.slice(7)}/apronMapWebsocket/` // 这个要与后端提供的相同
this.webSocketId = id
try {
if ('WebSocket' in window) {
this.ws = new window.WebSocket(`${url}${id}`)
} else if ('MozWebSocket' in window) {
this.ws = new window.MozWebSocket(`${url}${id}`)
} else {
this.ws = new window.SockJS(`${url}${id}`)
}
this.initEventHandle()
} catch (e) {
this.reconnect()
}
}
// 连接成功主函数
@action initEventHandle = () => {
this.ws.onclose = () => {
// this.reconnect()
clearTimeout(this.timeoutObj)
clearTimeout(this.circlrList)
this.ifCircle = false
}
this.ws.onerror = () => {
this.reconnect()// 重连
}
// 连接成功建立后响应
this.ws.onopen = () => {
// 心跳检测
this.heartCheckStart()
}
// 收到服务器消息后响应
this.ws.onmessage = (e) => {
console.log(JSON.parse(e.data)
}
}
// 重连
@action reconnect = () => {
if (this.lockReconnect) return
this.lockReconnect = true
clearTimeout(this.timeoutObj)
// 没连接上会一直重连,设置延迟避免请求过多
setTimeout(() => {
this.createWebSocket(this.webSocketId)
// this.lockReconnect = false
}, this.reconnectTimeInterval)
}
// 关闭
@action heartCheckClose = () => {
clearTimeout(this.timeoutObj)
this.ws && this.ws.close()
}
05-02
4万+
06-27
2507
03-02
1024