vue使用rabbitmq

docker安装rabbitmq

docker pull rabbitmq:3-management

docker run -d  --name rabbit -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=admin -p 15672:15672 -p 5672:5672 rabbitmq:3-management

docker exec -it rabbit /bin/bash

rabbitmq-plugins enable rabbitmq_web_stomp rabbitmq_web_stomp_examples

docker commit 容器ID rabbitmq:stomp

docker stop rabbit

docker run -di --name=rabbit2 -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=admin -p 5617:5617 -p 5672:5672 -p 4369:4369 -p 15671:15671 -p 15672:15672 -p 25672:25672 -p 15670:15670 -p 15674:15674 rabbitmq:stomp

创建rabbitmq用户
先进入mq容器

docker exec -it 容器ID bash

rabbitmqctl add_user admin admin

rabbitmqctl set_user_tags admin administrator

rabbitmqctl set_permissions -p / admin ".*" ".*" ".*"

vue连接MQ
鼠标放到上面



创建一个ts文件

import { ElMessageBox } from 'element-plus'
import Stomp, { Client } from "stompjs";
import router from '../router';
import type { Action } from 'element-plus'

var stop: Client


//登录成功后调用此方法，通过token创建并监听队列
export const toMQ = ((token: string) => {
  const ws = new WebSocket('ws://dragon.atim2k.top:15674/ws');
  stop = Stomp.over(ws);

  stop.connect('admin', 'admin', () => {
    console.log('登录成功');

	//监听队列或交换机
    stop.subscribe(token, (msg) => {


      if (msg.body == "10000") {
        stop.disconnect(() => { })

        ElMessageBox.alert('您被挤下线了', 'Title', {
          confirmButtonText: 'OK',
          callback: (action: Action) => {
            router.push("/")
          },
        })
      }
    });


  }, () => {
    console.log('登录失败');
  }, '/');

})
//关闭mq链接
export const closeMQ = (() => {
  if (stop != undefined) {
    stop.disconnect(() => { })
  }
})

登录页面：登录成功后调用toMQ方法，生命周期添加断开链接方法

onMounted(() => {
  //清空pinia的数据
  store.$reset()
  //断开mq链接
  closeMQ()

})

app.vue添加，作用是刷新页面后重新链接mq

import { onBeforeMount, onMounted } from "vue";
import {toMQ,closeMQ} from "./linkMQ/index"

import { mainStore } from './piniaState/index'
const store = mainStore();

onBeforeMount(()=>{
//刷新页面后重新链接mq,前提是已经登录成功
  if(store.token != ''){
    toMQ(store.token)
  }
  
})