WebSocket 包装器
使用
import webSocketWrapper from "@/utils/WebSocketWrapper";
//连接
webSocketWrapper.connect(`ws://172.16.0.148:8887/printer`)
//日志
webSocketWrapper.logFactory( (message)=>{
console.log(message)
})
//接受数据
webSocketWrapper.onDataReceive( (data)=>{
console.log(data)
})
//发送信息
webSocketWrapper.send(message)
//关闭
webSocketWrapper.close()
包装器源码
const CLOSE_CODE_RECONNECT = 3000
const PING_TIME = 5000
const RECONNECT_DOWN_TIME = 5000
const DEFAULT_IP = '127.0.0.1'
const DEFAULT_PORT = '8887'
const DEFAULT_PATH = ''
let webSocket = null
let pingIntervalId = -1
let reconnectIntervalId = -1
let reconnectDownTime
let serverUrl = ''
let logCallback = null
let dataCallback = null
let autoReconnectFlag = true
let heartFlag = true
const Log = (message) => {
if (!!logCallback && (logCallback instanceof Function)) {
logCallback(message)
}
}
const startPingServer = () => {
endPingServer()
if (!heartFlag) {
return
}
pingIntervalId = setInterval(() => {
if (!webSocket || webSocket.readyState !== WebSocket.OPEN) {
return
}
webSocket.send('ping')
}, PING_TIME)
}
const endPingServer = () => {
if (pingIntervalId !== -1) {
clearInterval(pingIntervalId)
pingIntervalId = -1
}
}
const reconnect = () => {
endPingServer()
endReconnect()
if (!autoReconnectFlag) {
return
}
reconnectIntervalId = setInterval(() => {
Log(`${reconnectDownTime / 1000}后重新连接...`)
reconnectDownTime -= 1000
if (reconnectDownTime <= 0) {
reconnectDownTime = RECONNECT_DOWN_TIME
Log('正在重新连接...')
if (serverUrl === '') {
console.error(`WebSocket服务端地址错误:${serverUrl}`)
return
}
connect(serverUrl, autoReconnectFlag, heartFlag)
}
}, 1000)
}
const endReconnect = () => {
if (reconnectIntervalId !== -1) {
Log('结束重新连接倒计时...')
clearInterval(reconnectIntervalId)
reconnectIntervalId = -1
}
}
const connect = (url = `ws://${DEFAULT_IP}:${DEFAULT_PORT}${DEFAULT_PATH}`, autoReconnect = true, heart = true) => {
if (!url) {
console.error(`WebSocket服务端地址错误:${url}`)
return
}
autoReconnectFlag = autoReconnect
heartFlag = heart
serverUrl = url
close()
reconnectDownTime = RECONNECT_DOWN_TIME
Log(`正在连接服务器[${serverUrl}]...`)
webSocket = new WebSocket(url)
webSocket.onopen = (event) => {
Log('webSocket连接已打开')
startPingServer()
}
webSocket.onclose = (closeEvent) => {
Log('已与服务器断开连接')
reconnect()
}
webSocket.onerror = (event) => {
}
webSocket.onmessage = (event) => {
if (!!dataCallback && (dataCallback instanceof Function)) {
dataCallback(event.data)
}
}
}
const close = () => {
endPingServer()
endReconnect()
if (!!webSocket) {
webSocket.onclose = (closeEvent) => {
Log('关闭服务')
}
webSocket.close(CLOSE_CODE_RECONNECT, 'WebSocket连接前关闭已有链接')
}
}
const logFactory = (callback) => {
logCallback = callback
}
const onDataReceive = (callback) => {
dataCallback = callback
}
const send = (message) => {
if (!!webSocket) {
webSocket.send(message)
}
}
const info = () => {
if (!!webSocket) {
return {
binaryType: webSocket.binaryType,
bufferedAmount: webSocket.bufferedAmount,
extensions: webSocket.extensions,
protocol: webSocket.protocol,
url: webSocket.url,
readyState: webSocket.readyState
}
}
return {}
}
const Wrapper = () => {
return {
connect,
logFactory,
send,
close,
info,
onDataReceive
}
}
export default Wrapper()