vue 使用stompjs websocket连接rabbitmq

  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 前端完整代码

html 复制代码
<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>
  1. 后端/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直接发送消息验证

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
萧大侠jdeps10 小时前
el-select 添加icon
前端·javascript·vue.js
(; ̄ェ ̄)。12 小时前
在nodejs中使用RabbitMQ(七)实现生产者确认
分布式·中间件·rabbitmq
计算机学姐13 小时前
基于SpringBoot的鲜花商城
java·vue.js·spring boot·后端·mysql·spring·java-ee
ThomasChan12313 小时前
vue3.x 的 toRef详细解读
前端·javascript·vue.js·node.js·vue·bootstrap·less
zkkkkkkkkkkkkk13 小时前
vue stores全局状态共享
前端·javascript·vue.js