Vue websocket方法封装

1.封装的ws.js文件

let global_callback = null
let socket = '' // 存储 WebSocket 连接.
let timeoutObj = null  // 心跳定时器
let serverTimoutObj = null // 服务超时定时关闭
let lockReconnect = false // 是否真正建立了连接
let timeoutnum = null // 重新连接的定时器，  没连接上会一直重连，设置延迟避免请求过多

const socketConfig = {
  url: '',
  retryTimeout: 20000 // 心跳时间 暂定20s
}

export const sendWebsocket = function (agentData, callback) {
  global_callback = callback
  socketOnSend(agentData)
}

export const initWebSocket = function (url) {
  let weburl = url || socketConfig.url
  if (!window.WebSocket) { return }
  if (!socket) {
    socket = new WebSocket(weburl)
    socketOnOpen()
    socketOnClose()
    socketOnError()
    socketOnMessage()
  }
}

/**
 * 关闭websocket函数
 */
export const closeWebsocket = function () {
  if (socket) {
    socket.close()
  }
  clearTimeout(timeoutObj)
  clearTimeout(serverTimoutObj)
}

function socketOnSend(data) {
  socket.send(data)
}

function socketOnOpen() {
  socket.onopen = () => {
    console.log('socket连接成功')
    start()
  }
}

// 开启心跳
function start() {
  timeoutObj && clearTimeout(timeoutObj)
  serverTimoutObj && clearTimeout(serverTimoutObj)
  timeoutObj = setTimeout(() => {
    // 这里发送一个心跳，后端收到后返回一个心跳消息
    if (socket.readyState === 1) {
      // 如果连接正常  给后端发送指定消息
      socket.send('')
      console.log('发送消息')
    } else {
      // 重连
      reconnect()
    }
    serverTimoutObj = setTimeout(() => {
      // 超时关闭连接
      socket.close()
    }, socketConfig.retryTimeout);
  }, socketConfig.retryTimeout);
}

// 重连
function reconnect() {
  if (lockReconnect) {
    return
  }
  lockReconnect = true
  timeoutnum && clearTimeout(timeoutnum)
  timeoutnum = setTimeout(() => {
    initWebSocket()
    lockReconnect = false
  }, 5000);
}

function socketOnClose() {
  socket.onclose = () => {
    console.log('socket已经关闭')
  }
}

function socketOnError() {
  socket.onerror = () => {
    reconnect()
    console.log('socket 连接失败')
  }
}

function socketOnMessage() {
  socket.onmessage = (e) => {
    global_callback(e.data)
    reset()
  }
}

// 重置心跳
function reset() {
  // 清除时间
  clearTimeout(timeoutObj)
  clearTimeout(serverTimoutObj)
  // 重启心跳
  start()
}

这里的封装export了三个方法

• initWebSocket 用来初始化websock，可传入url
• sendWebsocket 用来发送数据
• closeWebsocket 用来关闭连接

2.使用方法

1. 文件存放路径： /src/utils/ws.js

2. 所需文件中按需引入

    1.首先需要再项目中进行初始化，如果你的项目有登陆的话，则你可以再home.vue里面进行引入：
    ```vue
    import { initWebSocket } from ‘@/utils/ws.js’
    ···
    
    eport default {
    	 created () {
    		initWebSocket ()
    	} 
    }
    ```
   
    2. 然后在你需要获取实时数据的地方进行引入并调用 sendWebsocket 
    ```vue
    import { sendWebsocket } from ‘@/utils/ws.js’
    ···
    
    eport default {
    	 created () {
    		sendWebsocket (this.onWebSocketMessage)
    	},
    	methods: {
    		onWebSocketMessage(data) {}
    	}
    }
    ```
   

3. 关闭websock

    import { closeSock} from "@/api/socket";
    
    export default {
    	destoryed () {
    		closeSock()
    	}
    }