vue3 实现websocket心跳基础代码

牛马人生

已于 2024-01-08 11:59:27 修改

阅读量569

点赞数 8

文章标签： websocket vue.js 前端

于 2024-01-08 11:53:51 首次发布

本文链接：https://blog.csdn.net/qq_44476779/article/details/135453758

版权

话不多说直接看代码

<script setup lang="ts">
onMounted(() => {
  createWebSocket()   // 创建socket连接
  init() // 初始化
  if (heartConnet.value) clearInterval(heartConnet.value)
  heartConnet.value = setInterval(() => {
    createWebSocket()
    init()
  }, 60000)
})

// 建立webscoked连接
function createWebSocket() {
  try {
    socket = new WebSocket(
      `ws://${location.host}/wsUrl/myHandler/`
    )
  } catch (e) {
    reconnect()
  }
}

var socket: any = null    // socket对象
let heartConnet: any = ref(null) //连续一分钟心跳
let lockReconnect = false //避免重复连接
let tt: any = null

function init() {
  socket.onclose = () => {
    // 连接已关闭
    createWebSocket()    // 重新连接
  }
  socket.onerror = (_error: any) => {
    // 连接报错
    createWebSocket()    // 重新连接
  }
  socket.onopen = () => {
    console.log('websocket open')
  }
  socket.onmessage = (_event: any) => {
    let res = JSON.parse(_event.data)
    // 收到消息
    }
  }
}

function reconnect() {
  if (lockReconnect) {
    return
  }
  lockReconnect = true
  //没连接上会一直重连，设置延迟避免请求过多
  tt && clearTimeout(tt)
  tt = setTimeout(function () {
    createWebSocket()
    lockReconnect = false
  }, 2000)
}
</script>