Vue3通过StompJS连接RabbitMQ实现安装 npm install stompjs --save 具体实现

安装

npm install stompjs --save

具体实现

我这里新建了一个文件，里面单独写了实现的各个步骤。真正开发中可以封装成组件，然后引入

<template>
  <a-form :model="formState" :label-col="{ style: { width: '80px' } }" class="box">
    <a-form-item label="服务地址">
      <a-input v-model:value="formState.SERVICE" />
    </a-form-item>
    <a-form-item label="账号">
      <a-input v-model:value="formState.USERNAME" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model:value="formState.PASSWORD" />
    </a-form-item>
    <a-form-item label="topic">
      <a-input v-model:value="formState.topic" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" style="width: 100%; margin-top: 20px" @click="connect"
        >连接</a-button
      >
    </a-form-item>
    <a-button type="warn" style="width: 100%; margin-top: 20px" @click="offLine">断开连接</a-button>
  </a-form>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import Stomp from 'stompjs'
import { ref } from 'vue'
// 创建客户端实例
let client: any = null
// 连接的地址ws只能本地连接
// 账号
// 密码
// topic
const formState = ref({
  SERVICE: 'ws://*******:15674/ws',
  USERNAME: '***',
  PASSWORD: '***',
  topic: '/exchange/exchange_pushmsg/rk_pushmsg',
})
//连接成功时的回调 同时订阅频道
const onConnected = (frame: any) => {
  // const topic = ref('/vECU')
  message.success('连接成功')
  client.subscribe(formState.value.topic, responseCallback, onFailed)
}
// 连接失败时的回调
const onFailed = (frame: any) => {
  message.error(JSON.stringify(frame))
}
//接收消息处理
const responseCallback = (frame: any) => {
  message.success(JSON.stringify(frame.body))
}
//初始化mqtt客户端，并连接mqtt服务
const connect = () => {
  client = Stomp.client(formState.value.SERVICE)
  // 去除控制台的提示
  // client.debug = () => {}
  const headers = {
    login: formState.value.USERNAME,
    passcode: formState.value.PASSWORD,
  }
  client.connect(headers, onConnected, onFailed)
}
const offLine = () => {
  client.disconnect(() => {
    message.warning('连接已断开')
  })
}
// connect()
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  height: 300px;
  margin: 100px auto;
  background: #fff;
  padding: 20px;
}
</style>