Vue2/Vue3使用WebSocket 心跳检测(开箱即用,附带原理)

本文链接：https://blog.youkuaiyun.com/2303_77072102/article/details/136350051

本文介绍了如何在大数据项目中使用JavaScript的WebSocket来实现实时通信，包括创建WebSocket实例、设置生命周期事件监听、实现心跳检测以及处理连接关闭和错误情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我司突然来了个大数据项目需要使用长连接本来心想用定时器解决的但是后面业务涉及到一个操作最多同时只能一个人触发。这样的话定时器就无法满足需求的，就需要使用WebSocket。

1.首先创建WebSocket实例对象这是JS原生自带的无需下载第三方库如果需要心跳检测一定要封装成函数调用不需要就可以直接找个位置即可。

let connect =() =>{
// // 创建WebSocket对象并指定服务器地址 只需要IP加端口号 不需要加https或者http
var socket = new WebSocket('ws://192.168.1.90:9000/v1/ws/connect')
}
//调用
connect()

2.创建生命周期钩子监听各个阶段的事件

socket.onopen = function () {

  ws_heartCheck.start() // 启动心跳

  console.log('WebSocket连接已建立')

  // 在连接建立后，可以发送消息到服务器

}

// // 监听接收到服务器发送的消息

socket.onmessage = function (event:any) {

  console.log(event,'event')

  // socket.close() 主动断开连接方法

}

// // 监听连接关闭事件

socket.onclose = function (event) {

  console.log('WebSocket连接已关闭')

}

// // 监听连接错误事件

socket.onerror = function (event) {

  console.error('WebSocket连接错误：' + event)

}

3.设置心跳检测主要的思路就是通过定时器每隔一段时间主动向服务器推送状态码，服务器那边要是成功收到状态码，就会返回客户端成功的状态码，我们只需要根据相对于的状态码进行逻辑处理即可。如果返回失败的状态码我们需要主动断开连接调用socket.close()方法即可。然后在断开连接钩子设置定时器重新调用封装好的socket方法即可

// WebSocket心跳检测
var ws_heartCheck = {
  timeout: 5000, // 5秒一次心跳
  timeoutObj: null, // 执行心跳的定时器
  serverTimeoutObj: null, // 服务器超时定时器
  reset: function () {
    // 重置方法
    clearTimeout(this.timeoutObj)
    clearTimeout(this.serverTimeoutObj)
    return this
  },
  start: function () {
    // 启动方法
    var self = this
    this.timeoutObj = setTimeout(function () {
      // 这里发送一个心跳信息，后端收到后，返回一个消息，在onmessage拿到返回的心跳（信息）就说明连接正常
      socket.send(JSON.stringify({ "code": 1004 }))
      // 如果超过一定时间还没重置，说明后端主动断开了
      self.serverTimeoutObj = setTimeout(function () {
        // 如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        socket.close()
      }, self.timeout)
    }, this.timeout)
  }
}

4.使用心跳检测

// // 监听连接关闭事件
socket.onclose = function (event) {
  console.log('WebSocket连接已关闭')
  setTimeout(() => {
    connect() //心跳重连
  },1000)
}

5.完整代码复制接口开箱即用

let connect =() =>{
// // 创建WebSocket对象并指定服务器地址 只需要IP加端口号 不需要加https或者http
var socket = new WebSocket('ws://192.168.1.90:9000/v1/ws/connect')
// // 监听连接建立事件
socket.onopen = function () {
  ws_heartCheck.start() // 启动心跳
  console.log('WebSocket连接已建立')
  // 在连接建立后，可以发送消息到服务器
}
// // 监听接收到服务器发送的消息
socket.onmessage = function (event:any) {
  console.log(event,'event')
  // socket.close() 主动断开连接方法
}
// // 监听连接关闭事件
socket.onclose = function (event) {
  console.log('WebSocket连接已关闭')
  setTimeout(() => {
    connect() //心跳重连
  },1000)
}
// // 监听连接错误事件
socket.onerror = function (event) {
  console.error('WebSocket连接错误：' + event)
}
// WebSocket心跳检测
var ws_heartCheck = {
  timeout: 5000, // 5秒一次心跳
  timeoutObj: null, // 执行心跳的定时器
  serverTimeoutObj: null, // 服务器超时定时器
  reset: function () {
    // 重置方法
    clearTimeout(this.timeoutObj)
    clearTimeout(this.serverTimeoutObj)
    return this
  },
  start: function () {
    // 启动方法
    var self = this
    this.timeoutObj = setTimeout(function () {
      // 这里发送一个心跳信息，后端收到后，返回一个消息，在onmessage拿到返回的心跳（信息）就说明连接正常
      socket.send(JSON.stringify({ "code": 1004 }))
      // 如果超过一定时间还没重置，说明后端主动断开了
      self.serverTimeoutObj = setTimeout(function () {
        // 如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        socket.close()
      }, self.timeout)
    }, this.timeout)
  }
}
}

connect()