【vue】自定义一个websocket工具函数

备注一个近期在做的项目下使用的websocket工具函数

(实际应用场景为,某院下的排队叫号系统,需要使用到websocket连接,且自定义回调函数并按需处理 )

使用步骤大致如下:

  1. 项目根路径下新建一个websocket.js文件,文件内容如下

    let ws = null
    let _data = null
    let _url = null
    let _callback = null
    let hearBeatTimer = null
    let reconnectTimer = null
    let reconnectNum = 0 // 重连次数
    const time = 3000 // 心跳间隔
    const reconnectTime = 5000 // 重连超时
    export function webSocket(url = '', data = '', callback = () => {}) {
      // 初始化
      _url = url // 地址
      _data = data // 发送消息
      _callback = callback // 回调函数,利用闭包
      createWebSocket() // 创建 webSocket
    }
    export function getWebSocket() {
      return ws
    }
    
    export function closeWebSocket() {
      console.log('关闭WebSocket')
      if (ws) {
     ws.onerror = () => {}
     ws.onclose = () => {}
     ws.close()
      }
      ws = null
      _data = null
      _url = null
      _callback = () => {}
      // timeoutTimer = null
      hearBeatTimer = null
      reconnectTimer = null
    }
    
    function createWebSocket() {
      console.log('创建WebSocket')
      if (!_url) return
      if (ws) {
     ws.close()
     ws = null
      }
      ws = new WebSocket(_url)
      ws.onopen = function() {
     sendMessage()
     heartBeat()
      }
      ws.onmessage = function(e) {
     console.log('消息事件:', e)
     // clearTimeout(timeoutTimer)
     if (typeof _callback === 'function') {
       _callback(e)
     }
     reconnectNum = 0
     heartBeat()
      }
      ws.onerror = function() {
     reconnect()
      }
      ws.onclose = function() {
     reconnect()
      }
    }
    
    function heartBeat() {
      if (hearBeatTimer) {
     clearTimeout(hearBeatTimer)
      }
      hearBeatTimer = setTimeout(() => {
     if (ws && ws.readyState === 1) {
       // 如果连接正常
       sendMessage()
       // setTimeoutTimer()
     } else {
       reconnect()
     }
      }, time)
    }
    
    function sendMessage() {
      console.log('发送消息:', _data)
      if (!ws) return
      switch (Object.prototype.toString.call(_data)) {
     case '[object Object]':
       ws.send(JSON.stringify(_data))
       break
     case '[object String]':
       ws.send(_data)
      }
    }
    
    
    function reconnect() {
      if (reconnectTimer) {
     clearTimeout(reconnectTimer)
      }
      reconnectTimer = setTimeout(() => {
     reconnectNum++
     console.log('重连WebSocket')
     console.log('重连次数:', reconnectNum)
     webSocket(_url, _data, _callback)
      }, reconnectTime)
    }
    window.onbeforeunload = () => {
      closeWebSocket()
    }
    

2.在app.vue 下引用并初始化websocket

import { webSocket } from './websocket.js'

export default {
created() {
  this.init()
},
methods: {
    init() {
      this.onWebSocket()
    },
    // 打开 socket
    onWebSocket() {
     // 模拟地址
      const url =  'wss://www.baidu.com?uuid=‘
// 心跳包发送内容
        const data = {
          to: -1,
          text: 'ping', // 内容
        }
        console.log('data', data)
        webSocket(url, data, this.handleWSCallBack)
      },
 // 处理socket 回调
    handleWSCallBack(data) {
       // console.log('data', e.data)
      //do something
}
}
}

剩余函数部分,各位小伙伴可以按需调整该回调参数

备注:以上CODE部分内容,要感谢下面这位裘同学的帮忙,下面的他的某乎账号,各位如有兴趣可以关注下(里面干货略多)

某乎账号

你可能感兴趣的:(【vue】自定义一个websocket工具函数)