vue 使用stompjs websocket连接rabbitmq-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 前端完整代码

<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直接发送消息验证

文章来源地址https://www.toymoban.com/news/detail-622622.html

到了这里，关于vue 使用stompjs websocket连接rabbitmq的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！