vue 使用stompjs websocket连接rabbitmq_vue stompjs

1. 首先确保rabbitmq服务已开启web-stomp

        1.1 登录rabbitmq web控制台

        1.2 在overview目录下 下拉找到Ports and contexts 看列表有没有http/web-stomp

        1.3 如果没有需要开启 window/centos 进入rabbitmq安装目录的bin目录下执行rabbitmq-plugins enable rabbitmq_web_stomp rabbitmq_stomp rabbitmq_web_stomp_examples

        1.4 如果是docker安装需要先rm 容器，然后在启动命令加15674端口 重新启动容器

2.前端部分

        2.1 引入stompjs, npm install stompjs --save

        2.2 前端完整代码

<template>
  <div class="page">
    <button @click="createConnection">连接MQTT
 
    </button>
    <button @click="doSubscribe">订阅主题
 
    </button>
    <button @click="doUnSubscribe">取消主题
 
    </button>
    <button @click="destroyConnection">断开MQTT
 
    </button>
  </div>
</template>
 
<script>
  import Stomp from 'stompjs'; // 引入stompjs 需要先npm install stompjs --save
  export default {
    data() {
      return {
        client: null,
        options: {
          vhost: '/', // rabbitmq的vhost
          incoming: 8000, // 心跳包时间，（须大于0，且小于10000，因为服务器可能默认10秒没心跳就会断开）
          outgoing: 8000, // 心跳包时间，（须大于0，且小于10000，因为服务器可能默认10秒没心跳就会断开）
          account: 'guest', // rabbitmq的账户
          pwd: 'guest', // rabbitmq的密码
          server: 'ws://192.168.56.10:15674/ws' // ws://rabbitmq的ip:rabbitmq的web-stomp的端口/ws
        }
      }
    },
 
    methods: {
      connect(options) {
        this.options = { ...this.options, ...options }
        const mqUrl = this.options.server // 连接地址
        const ws = new WebSocket(mqUrl) // 创建
        ws.onclose = close => {
          console.log('webSocket关闭', close) // 关闭回调
        }
        ws.onerror = error => {
          console.log('webSocket异常', error) // 异常回调
        }
        ws.onopen = success => {
          console.log('webSocket连接成功', success) // 成功回调
        }
        this.client = Stomp.over(ws)
        this.client.heartbeat.incoming = this.options.incoming
        this.client.heartbeat.outgoing = this.options.outgoing
 
        //开始连接
        this.client.connect(
          this.options.account, // 用户名
          this.options.pwd, // 密码
          this.onSuccessConnectRabbitmq, // 连接成功时回调
          this.onErrorConnectRabbitmq, // 失败时回调
          this.options.vhost
        );
      },
      onSuccessConnectRabbitmq() {
        console.log('stomp 连接成功！')
        // 直接在连接成功的时候就订阅监听user.audit.queue队列 user.audit.queue是rabbitmq里创建的queue名称
        this.doSubscribe('user.audit.queue')
      },
      onErrorConnectRabbitmq(errorMsg) {
        console.error(`stomp 断开连接，正在准备重新连接...`, errorMsg)
        this.connect(this.options)
      },
      doSubscribe(queueName) {
        this.currentSubscribe = this.client.subscribe(queueName, function (messages) {
          console.log('receive:', messages)
          console.log('message body', messages.body) // 消息内容主体 json需要自己转
 
        });
      },
      doUnSubscribe() {
        this.currentSubscribe.unsubscribe()
      },
      createConnection() {
        this.connect()
      },
      destroyConnection() {
        this.client.disconnect(() => {
          console.log('已关闭rabbitmq连接')
        });
      },
    },
    mounted() {
      this.connect()
    },
  };
</script>

3. 后端/rabbitmq操作

        3.1 后端代码操作 直接给队列发消息前端doSubscribe即可收到消息

                3.1.1 rabbitTemplate.convertAndSend(exchange routingkey, message);

        3.2 rabbitmq web控制台操作

                3.2.1 创建exchange、queue, 将queue绑定到exchange, 在publish message直接发送消息验证