Vue2 封装Websoket心跳机制

好的，下面是 Vue2 封装 WebSocket 心跳机制的代码示例：

import { Message } from 'element-ui'

let socket = null
let timer = null

function createWebSocket(wsUrl) {
  socket = new WebSocket(wsUrl)
  // 监听 WebSocket 连接打开事件
  socket.onopen = () => {
    console.log('WebSocket 连接已打开')
    // 开启心跳机制
    startHeartBeat()
  }
  // 监听 WebSocket 连接关闭事件
  socket.onclose = () => {
    console.log('WebSocket 连接已关闭')
    // 关闭心跳机制
    stopHeartBeat()
    // 尝试重新连接
    setTimeout(() => {
      createWebSocket(wsUrl)
    }, 3000)
  }
  // 监听 WebSocket 接收消息事件
  socket.onmessage = (event) => {
    console.log('接收到 WebSocket 消息：', event.data)
    // 处理接收到的消息
    handleMessage(event.data)
  }
  // 监听 WebSocket 发生错误事件
  socket.onerror = (error) => {
    console.log('WebSocket 发生错误：', error)
    // 关闭心跳机制
    stopHeartBeat()
  }
}

// 发送消息
function sendMessage(message) {
  if (socket && socket.readyState === 1) {
    socket.send(JSON.stringify(message))
  } else {
    Message.error('WebSocket 连接未打开')
  }
}

// 处理接收到的消息
function handleMessage(message) {
  // 处理接收到的消息
}

// 开启心跳机制
function startHeartBeat() {
  timer = setInterval(() => {
    console.log('发送心跳包')
    sendMessage({
      type: 'ping'
    })
  }, 30000)
}

// 关闭心跳机制
function stopHeartBeat() {
  clearInterval(timer)
}

export default {
  createWebSocket,
  sendMessage
}

以上代码中，我们封装了创建 WebSocket 连接、发送消息、处理接收到的消息、开启和关闭心跳机制等功能。其中，心跳机制的实现方式是每隔一段时间发送一个 ping 消息给服务器，以维持 WebSocket 连接的稳定性。如果在心跳机制过程中发生错误，会关闭心跳机制并尝试重新连接。在发送消息时，我们先判断 WebSocket 连接是否已打开，如果未打开则提示用户连接未打开。