使用vueuse库的useWebSocket

先介绍一下vueuse库，它为开发者提供了一系列简单好用的 Hooks，可以帮助我们快速实现各种功能，提高开发效率。

一、什么是 VueUse？
VueUse 是一个基于 Vue 3 Composition API 的高质量 Hooks 库，它提供了许多简单好用的 Hooks，可以帮助开发者快速实现各种功能。VueUse 的 Hooks 覆盖了数据请求、状态管理、视图操作、性能优化等多个方面，使得开发者可以更加专注于业务逻辑的实现。

二、使用useWebSocket

官方文档：useWebSocket | VueUse

import { useWebSocket } from "@vueuse/core";

/**
 * status 是连接的状态值
 * data 是 socket 推送过来的消息
 * send 是一个方法， 用来发送消息给后台
 * close 是一个方法，关闭 socket 连接
 * open 如果当前的websocket是活跃的，将会关闭它重新打开一个新的
 */
const { status, data, send, open, close  } = useWebSocket(wsUrl, {
  onConnected: function (ws) {
    console.log('websocket 连接成功！', ws)
  },
  onDisconnected: function (ws, event) {
    console.log('onDisconnected')
  },
  onError: function (ws, event) {
    console.log('onError')
  },
  onMessage: function (ws, event) {
    console.log('event.data', event.data)
    if (event.data) {
      const info = JSON.parse(event.data)
      console.log(info) // 这里就是websocket每次发送的消息
    }
  },
  // 每隔x毫秒发送一次心跳,heartbeat默认为false
  // heartbeat: true,
  // heartbeat: {
  //   message: 'ping', // 心跳消息
  //   responseMessage: '', // 心跳的响应消息，如果未定义，将使用该消息
  //   interval: 1000, // 间隔(毫秒)
  //   pongTimeout: 1000, // 心跳响应超时，以毫秒为单位,默认为1000
  // },
  /*
  * 不使用心跳，根据后台实际逻辑来，有时候发送心跳，不会返回任何数据，但是不会断开
  * 如果设置为 true，表示需要心跳，发送心跳后，后台一定要返回信息，不然就会断开重连
  * */
  heartbeat: false,
  // autoReconnect: true,
  autoReconnect: {
    retries: 3,
    delay: 2000,
    onFailed() {
      alert('Failed to connect WebSocket after 3 retires')
    },
  },
  autoClose: true, // 自动关闭连接
})

当然，除了在onMessage里去监听websocket的消息推送，也可以使用watch或者watchEffect来监听data或status，

watchEffect(async () => {
  // watch ws发送的消息
  if (data.value) {
    // 将收到的ws数据转换为 JavaScript 对象
    let parsedData = JSON.parse(data.value);
    // 这里写对应的业务逻辑 
  }
  if (status.value && status.value === 'CLOSED') {
    // ws连接断开
  }
});