vue 中使用stompjs 连接 rabbitMq

<script setup name="message">

import Stomp from "stompjs";  

const client = ref(null); //连接客户端对象
const currentSubscribe = ref(null); //连接队列对象

function connect() {
    const mqUrl = "ws://192.168.10.120:7981/ws" // 连接地址
    //使用websocket 协议
    const ws = new WebSocket(mqUrl) // 创建
    client.value = Stomp.over(ws)
     
    // 设置心跳包时间，（须大于0，且小于10000，因为服务器可能默认10秒没心跳就会断开）
    client.value.heartbeat.incoming = 8000
    client.value.heartbeat.outgoing = 8000

    //开始连接
    client.value.connect(
      USERNAME, // 用户名
      PASSWORD, // 密码
      onSuccessConnectRabbitmq, // 连接成功时回调
      onErrorConnectRabbitmq, // 失败时回调
      "/"
    );

    //client.value.debug = ()=>{}; //关闭控制台日志
  }

  // 连接成功回调
  function onSuccessConnectRabbitmq() {
    let userId = userStore.userId;
    let queueName = `/exchange/exchange_topic/message_order.${userId}`
    
    // ack的确认方式有三种 auto 自动， client: 批量手动确认 client-individual :逐条手动确认
    let hearder = {"ack": "client", "auto-delete": true }
   
    //订阅监听成功回调
    currentSubscribe.value = client.value.subscribe(queueName, function (messages) {
      console.log("recive111111111=", messages)
      if(messages.headers.userId == userId){
        ElNotification({
          type: 'warning',
          title: '@我订单消息',
          message: "您来新订单消息啦, 请到消息中心查询",
        })
        messages.ack();
        newMessage.value = true;
      }

    }, hearder);

  }

  // 连接失败回调
  function onErrorConnectRabbitmq(errorMsg) {
    console.error(`stomp 断开连接，正在准备重新连接...`, errorMsg)
    connect()
  }

  // 销毁连接
  function destroyConnection() {
    if(currentSubscribe.value){
      currentSubscribe.value.unsubscribe()
    }

    if(client.value){
      client.value.disconnect(() => {
        console.log('已关闭rabbitmq连接')
      });
    }
  }


onMounted(()=>{
  connect();
})

onUnmounted(()=>{
  destroyConnection();
})

</script>