1. 首先確保rabbitmq服務(wù)已開啟web-stomp

? ? ? ? 1.1 登錄rabbitmq web控制臺

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

? ? ? ? 1.3?如果沒有需要開啟 window/centos 進入rabbitmq安裝目錄的bin目錄下執(zhí)行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，因為服務(wù)器可能默認10秒沒心跳就會斷開）
          outgoing: 8000, // 心跳包時間，（須大于0，且小于10000，因為服務(wù)器可能默認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) // 創(chuàng)建
        ws.onclose = close => {
          console.log('webSocket關(guān)閉', close) // 關(guān)閉回調(diào)
        }
        ws.onerror = error => {
          console.log('webSocket異常', error) // 異?；卣{(diào)
        }
        ws.onopen = success => {
          console.log('webSocket連接成功', success) // 成功回調(diào)
        }
        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, // 連接成功時回調(diào)
          this.onErrorConnectRabbitmq, // 失敗時回調(diào)
          this.options.vhost
        );
      },
      onSuccessConnectRabbitmq() {
        console.log('stomp 連接成功！')
        // 直接在連接成功的時候就訂閱監(jiān)聽user.audit.queue隊列 user.audit.queue是rabbitmq里創(chuàng)建的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) // 消息內(nèi)容主體 json需要自己轉(zhuǎn)

        });
      },
      doUnSubscribe() {
        this.currentSubscribe.unsubscribe()
      },
      createConnection() {
        this.connect()
      },
      destroyConnection() {
        this.client.disconnect(() => {
          console.log('已關(guān)閉rabbitmq連接')
        });
      },
    },
    mounted() {
      this.connect()
    },
  };
</script>

3.?后端/rabbitmq操作

? ? ? ? 3.1?后端代碼操作 直接給隊列發(fā)消息前端doSubscribe即可收到消息

? ? ? ? ? ? ? ? 3.1.1 rabbitTemplate.convertAndSend(exchange routingkey, message);

? ? ? ? 3.2?rabbitmq web控制臺操作

? ? ? ? ? ? ? ? 3.2.1?創(chuàng)建exchange、queue, 將queue綁定到exchange, 在publish message直接發(fā)送消息驗證

????????

?文章來源地址http://www.zghlxwxcb.cn/news/detail-622622.html

到了這里，關(guān)于vue 使用stompjs websocket連接rabbitmq的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！