Websocket封装及使用

1.封装 webSocket.js

// websocket实例
let wsObj = null

// ws连接地址
let wsUrl = null

// 是否执行重连 true/不执行 ； false/执行
let lockReconnect = false

// 重连定时器
let wsCreateHandler = null

// 连接成功，执行回调函数
let messageCallback = null

// 连接失败，执行回调函数
let errorCallback = null

// 发送给后台的数据
let sendDatas = {}
 
/**
 * 发起websocket请求函数
 * @param {string} url ws连接地址
 * @param {Object} agentData 传给后台的参数
 * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
 * @param {function} errCallback ws连接错误的回调函数
 */
export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
    wsUrl = url
    createWebSoket()
    messageCallback = successCallback
    errorCallback = errCallback
    sendDatas = agentData
}

// 创建ws函数
const createWebSoket = () => {
    if (typeof (WebSocket) === 'undefined') {
      writeToScreen('您的浏览器不支持WebSocket，无法获取数据')
      return false
    }
   
    try {
      wsObj = new WebSocket(wsUrl)
      initWsEventHandle()
    } catch (e) {
      writeToScreen('连接异常，开始重连')
      reconnect()
    }
}
 
// 手动关闭websocket （这里手动关闭会执行onclose事件）
export const closeWebsocket = () => {
    if (wsObj) {
      writeToScreen('手动关闭websocket')
      wsObj.close() // 关闭websocket
      // wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
      // 关闭重连
      lockReconnect = true
      wsCreateHandler && clearTimeout(wsCreateHandler)
      // 关闭心跳检查
      heartCheck.stop()
    }
  }
 

//  创建成功后的处理
const initWsEventHandle = () => {
  try {
    // 连接成功后的回调函数
    wsObj.binaryType = "arraybuffer";//返回 websocket 连接所传输二进制数据的类型。
    wsObj.onopen = (event) => {
      onWsOpen(event)
      // heartCheck.start()
    }
    // 监听服务器端返回的信息
    wsObj.onmessage = (event) => {
      onWsMessage(event)
      // heartCheck.start()
    }
    //  连接关闭后的回调函数
    wsObj.onclose = (event) => {
      writeToScreen('onclose执行关闭事件')
      onWsClose(event)
    }
    //  报错时的回调函数
    wsObj.onerror = (event) => {
      writeToScreen('onerror执行error事件，开始重连')
      onWsError(event)
      reconnect()
    }
  } catch (err) {
    writeToScreen('绑定事件没有成功，开始重连')
    reconnect()
  }
}
 
// 连接成功后发送数据的处理函数
const onWsOpen = (event) => {
    writeToScreen('CONNECT')
    // // 客户端与服务器端通信
    // wsObj.send('我发送消息给服务端');
    // 添加状态判断，当为OPEN时，发送消息
    if (wsObj.readyState === wsObj.OPEN) { // wsObj.OPEN = 1
      // 发给后端的数据需要字符串化
      console.log('发送标识', sendDatas)
      wsObj.send(sendDatas)
    }
    if (wsObj.readyState === wsObj.CLOSED) { // wsObj.CLOSED = 3
      writeToScreen('wsObj.readyState=3, ws连接异常，开始重连')
      reconnect()
      errorCallback()
    }
}

// 收到服务器数据后的回调函数
const onWsMessage = (event) => {
    const jsonStr = event.data
    // var buffer = new Uint8Array(jsonStr, 0, jsonStr.length);
    // let message = PuppyWebSocketMessage.decode(buffer);
  
    writeToScreen('onWsMessage接收到服务器的数据: ', jsonStr)
  
    messageCallback(message)
}  

// 连接关闭后的回调函数
const onWsClose = (event) => {
    writeToScreen('DISCONNECT')
    // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
    // e.code !== 1000  表示非正常关闭。
    console.log('onclose event: ', event)
    if (event && event.code !== 1000) {
        writeToScreen('非正常关闭')
        errorCallback()
        // 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
        reconnect()
    }
}

// 连接失败 后的错误返回
const onWsError = (event) => {
    writeToScreen('onWsError: ', event.data)
    errorCallback()
}

//打印连接信息  
const writeToScreen = (massage) => {
    console.log(massage)
}
 
// 重连函数
const reconnect = () => {
    if (lockReconnect) {
        return
    }
    writeToScreen('3秒后重连')
    lockReconnect = true
    // 没连接上会一直重连，设置延迟避免请求过多
    wsCreateHandler && clearTimeout(wsCreateHandler)
    wsCreateHandler = setTimeout(() => {
        writeToScreen('重连...' + wsUrl)
        createWebSoket()
        lockReconnect = false
        writeToScreen('重连完成')
    }, 3000)
}
 
// 心跳检查（看看websocket是否还在正常连接中）
const heartCheck = {
    timeout: 60000,
    timeoutObj: null,
    serverTimeoutObj: null,
    // 重启
    reset() {
        clearTimeout(this.timeoutObj)
        clearTimeout(this.serverTimeoutObj)
        this.start()
    },
    // 停止
    stop() {
        clearTimeout(this.timeoutObj)
        clearTimeout(this.serverTimeoutObj)
    },
    // 开启定时器
    start() {
        this.timeoutObj && clearTimeout(this.timeoutObj)
        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
        // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
        this.timeoutObj = setTimeout(() => {
            writeToScreen('心跳检查，发送ping到后台')
            try {
                const datas = { ping: true }
                wsObj.send(JSON.stringify(datas))
            } catch (err) {
                writeToScreen('发送ping异常')
            }
                console.log('内嵌定时器this.serverTimeoutObj: ', this.serverTimeoutObj)
                // 内嵌定时器
                this.serverTimeoutObj = setTimeout(() => {
                writeToScreen('没有收到后台的数据，重新连接')
                reconnect()
            }, 100)
        }, this.timeout)
    }
}

2.使用

import { connectWebsocket } from "../api/websocket";
 
 
created(){
     connectWebsocket(
        URL,
      // 发送
      "HeartBeat",
      // 成功拿到后台返回的数据的回调函数
      (data) => {
        console.log("成功的回调函数, 接收到的data数据： ", data);
        this.Socket(data);
      },
      // websocket连接失败的回调函数
      () => {
        console.log("失败的回调函数");
      }
    );
},
 
methods:{
     Socket(e) {
      console.log(e);
     }  
}

转载：https://blog.csdn.net/m0_49256439/article/details/126133435