hotmaneil熱血新好男人

繼上次寫的文章 基於RabbitMQ Web MQTT Plugin以Vue+precompiled-mqtt實作訂閱與發佈MQTT

這次改以Vite建置Vue3專案。由於測試時precompiled-mqtt只能在localhost使用，無法在其它IP使用，因此改以mqttws31.js實作

mqttws31.js下載來源：

https://eclipse.dev/paho/index.php?page=clients/js/index.php

找

https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js

將mqttws31.js下載掛到public資料夾下

 

 

 

index.html裡加上

<script src="mqttws31.js"></script>

自己新增自訂mqttClient.js

/**
 * 初始化MQTT元件
 * @returns
 */
export function InitMQTT() {
    /** mqtt相關參數 */
    const reconnectTimeout = 2000
    try {
        const mqttObject = new Paho.MQTT.Client(
            window._config.web_mqtt_IP,//自訂IP
            window._config.web_mqtt_Port,//自訂Port
            '/ws',
            'client' + getUUID
        )

        var options = {
            timeout: 10,
            keepAliveInterval: 60,
            userName: 'sunsda',
            password: 'sunsda',
            onSuccess: function () {
                console.log('連線成功，Layout連到broker')
                mqttObject.subscribe('Layout/WindowsServiceStatus', { qos: 1 })

            },
            onFailure: function (message) {
                console.log('onFailure message', message)
                setTimeout(InitMQTT(), reconnectTimeout)
            }
        }

        mqttObject.connect(options)

        mqttObject.onMessageArrived = onMessageArrived
        mqttObject.onConnectionLost = onCustomConnectionLost

        return mqttObject
    } catch (error) {
        console.log('initMQTTConnect error:', error)
    }
}

/**
 * 接收訊息
 * @param {*} message
 */
function onMessageArrived(message) {
    
    var topic = message.destinationName
    var msg = message.payloadString

    console.log('收到 topics:' + topic)
    console.log('收到 msg:' + msg)

    if (topic === 'Layout/WindowsServiceStatus') {
        if (msg === true || msg === 'true') {
            //自己決定UI裡怎麼變化
        } else {
           //自己決定UI裡怎麼變化
        }
    }

}

/**
 * 連線失敗報錯訊息
 * @param {*} responseObject
 */
function onCustomConnectionLost(responseObject) {
    console.log('異常:' + responseObject.errorMessage)
    if (responseObject.errorCode !== 0) {
        console.log('onConnectionLost:' + responseObject.errorMessage)
        console.log('連接已斷開')
    }
}

由於要在Vue的全域變數發揮作用，因此在main.js加進

import { InitMQTT } from '@/utils/mqttClient'

const app = createApp(App)

app.config.globalProperties.$mqttObject = InitMQTT()

app.mount('#app')