hotmaneil熱血新好男人

RabbitMQ之Web MQTT Plugin

首先要在已經有安裝RabbitMQ的前提下，開啟外掛：Web MQTT Plugin

rabbitmq-plugins enable rabbitmq_web_mqtt

參考文件：https://www.rabbitmq.com/web-mqtt.html

然後在RabbitMQ Management UI裡可以看到port:15675已經打開

 

 

 

Vue與precompiled-mqtt

再來以Vue-cli建置Vue3專案，並安裝套件：precompiled-mqtt

npm i precompiled-mqtt

參考文件：https://www.npmjs.com/package/precompiled-mqtt

撰寫Vue的重點程式碼如下：

載入precompiled-mqtt

import mqtt from "precompiled-mqtt"

data()裡必須要

data() {
        return {

            conntectResult:null,

            /** 訊息陣列 */
            messageArray: []
        }
    },

訂閱(Subscriber)，buildConnection是我自訂的function名稱

buildConnection() {

            const vm = this

            //Local broker
            const URL = "ws://127.0.0.1:15675/ws";

            const client = mqtt.connect(URL);
            client.on('connect', () => {
                console.log("連到broker");
                this.conntectResult="連到broker"
                client.subscribe('home/workStation2')
                this.conntectResult+="已開始訂閱home/workStation2"
            });

            client.on('message', function (topic, msg) {
                var result = `收到${topic}主題，訊息：${msg}`
                const obj = JSON.parse(msg);
                vm.messageArray.push(obj.context)
                console.log(result)
            })
        },

發佈(Publish)，publishMsg是我自訂的function名稱

publishMsg(){
            const URL = "ws://127.0.0.1:15675/ws";
            const client = mqtt.connect(URL);

            var topic= 'home/workStation2'
            var payload= '{ "context": "內傳訊息" }'
            client.publish(topic,payload)
        }

測試結果如下圖(按下發佈訊息3次)：