MQTT - 使用 Paho MQTT JavaScript

前言

之前一直使用 MQTT.js，後來出現了「WebSocket connection to 'ws://xxx/mqtt' failed: Close received after close」錯誤，雖然會自動重連，不過就要處理重連初始化的訊息。可以處理不過在 google 追究之後，就決定改用 Paho MQTT 試試看，畢竟在 Python 也是使用 Paho MQTT 的版本，說不定可以解決問題

參考資源

Paho MQTT JavaScript 1.0.3 版本截至 2024/07 只支援 3.1.1，對於網頁 WebSocket 而言並不影響

程式碼

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Paho MQTT JS Test</title>
    <link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/paho-mqtt@1.0.3/mqttws31-min.js"></script>
</head>
<body>

<button type="button" class="btn btn-light" onclick="send()">Send</button>

<script src="php.js?v=65cd879be1395"></script>
<script>
    let mc;
    let mqtt_client_id = window.localStorage.client_id + '_' + Math.random().toString(16);

    mc = new Paho.MQTT.Client("broker.hivemq.com", 8884, mqtt_client_id);
    mc.connect({
        onSuccess: onConnect,
        useSSL: true
    });

    // set callback handlers
    mc.onConnectionLost = function (responseObject) {
        console.log(responseObject.errorCode);
        console.log("Connection Lost: "+responseObject.errorMessage);
    }

    mc.onMessageArrived = function (message) {
        console.log(message.payloadString);
    }

    // Called when the connection is made
    function onConnect(){
        console.log("Connected!");
        mc.subscribe("HootKaSelf/lobby", {
            onSuccess: function (){
                console.log('subscribeSuccess');
            },
            onFailure: function (){}
        });

        let message = new Paho.MQTT.Message("Hello");
        message.destinationName = "HootKaSelf/lobby";
        mc.send(message);
    }

    function send(){
        let message = new Paho.MQTT.Message(JSON.stringify({
            command: "question",
            room_id: window.localStorage.in_room,
            order: '大家好',
        }));
        console.log(message);
        message.destinationName = "HootKaSelf/lobby";
        mc.send(message);
    }
</script>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

let mc;

let mqtt_client_id = window.localStorage.client_id + '_' + Math.random().toString(16);

mc = new Paho.MQTT.Client("broker.hivemq.com", 8884, mqtt_client_id);

mc.connect({

onSuccess: onConnect,

useSSL: true

});

// set callback handlers

mc.onConnectionLost = function (responseObject) {

console.log(responseObject.errorCode);

console.log("Connection Lost: "+responseObject.errorMessage);

}

mc.onMessageArrived = function (message) {

console.log(message.payloadString);

}

// Called when the connection is made

function onConnect(){

console.log("Connected!");

mc.subscribe("HootKaSelf/lobby", {

onSuccess: function (){

console.log('subscribeSuccess');

onFailure: function (){}

});

let message = new Paho.MQTT.Message("Hello");

message.destinationName = "HootKaSelf/lobby";

mc.send(message);

}

function send(){

let message = new Paho.MQTT.Message(JSON.stringify({

command: "question",

room_id: window.localStorage.in_room,

order: '大家好',

}));

console.log(message);

message.destinationName = "HootKaSelf/lobby";

mc.send(message);

}

</script>

</body>

</html>

安裝、連接

安裝使用 CDN，MQTT Broker 使用了 HiveMQ 的

<script src="https://cdn.jsdelivr.net/npm/paho-mqtt@1.0.3/mqttws31-min.js"></script>

<script>
mc = new Paho.MQTT.Client('broker.hivemq.com', 8884, 'mqtt_client_id');
mc.connect({
    onSuccess: onConnect,
    useSSL: true,
});

function onConnect(){
    // 連接成功訂閱主題
    mc.subscribe("HootKaSelf/lobby", {
        onSuccess: function (){
            console.log('subscribeSuccess');
        },
        onFailure: function (){}
    });
}
</script>

mc = new Paho.MQTT.Client('broker.hivemq.com', 8884, 'mqtt_client_id');

mc.connect({

onSuccess: onConnect,

useSSL: true,

});

function onConnect(){

// 連接成功訂閱主題

mc.subscribe("HootKaSelf/lobby", {

onSuccess: function (){

console.log('subscribeSuccess');

onFailure: function (){}

});

}

</script>

.connect() 選項

timeout:"number"
userName:"string"
password:"string"
willMessage:"object"
keepAliveInterval:"number"
cleanSession:"boolean"
useSSL:"boolean"
invocationContext:"object"
onSuccess:"function"
onFailure:"function"
hosts:"object"
ports:"object"
mqttVersion:"number"
mqttVersionExplicit:"boolean"
uris: "object"

如果 Broker 需要帳號、密碼，就需要增加 userName password 選項

訂閱、取消訂閱主題

訂閱主題

mc.subscribe("HootKaSelf/lobby", {
    onSuccess: function (){
        console.log('subscribeSuccess');
    },
    onFailure: function (){}
});

mc.subscribe("HootKaSelf/lobby", {

onSuccess: function (){

console.log('subscribeSuccess');

onFailure: function (){}

});

取消訂閱主題

mc.unsubscribe('HootKaSelf/room/' + j['room_id'], {
    onFailure: function () {},
    onSuccess: function () {
        console.log("subscribe success!");
    }
});

mc.unsubscribe('HootKaSelf/room/' + j['room_id'], {

onFailure: function () {},

onSuccess: function () {

console.log("subscribe success!");

}

});

傳送訊息

使用 JSON 格式

let message = new Paho.MQTT.Message(JSON.stringify({
    command: "start_game",
    room_id: room_id,
    user_id: client_id,
}));
message.destinationName = "HootKaSelf/server";
mc.send(message);

let message = new Paho.MQTT.Message(JSON.stringify({

command: "start_game",

room_id: room_id,

user_id: client_id,

}));

message.destinationName = "HootKaSelf/server";

mc.send(message);

接收訊息

mc.onMessageArrived = function (message) {
    let json = JSON.parse(message.payloadString);
}

mc.onMessageArrived = function (message) {

let json = JSON.parse(message.payloadString);

}

接收的訊息經過處理轉換成 JSON 格式

messge 可接收到

destinationName 主題
duplicate 是否為重複發送
payloadBytes 字數
payloadString 內容
qos
retained

AMQJS0005E Internal error.

Paho MQTT 出現這個錯誤的話是 onMessageArrived 接收訊息處理時程式有錯誤，導致 WebSocket 斷線，這時 Paho 會攔截錯誤加上自己的資訊。所以會讓人誤會是 MQTT 連接問題，其實只是接受訊息內的程式出錯。

結論

Paho MQTT 確實解決了 MQTT.js 的問題，Paho MQTT 的心跳保持功能比較正常，一天的測試之下都是維持同一個連接，並不會重新連接。反之 MQTT.js 則是多次重新連接，不知道原因為何。

最後 (2024/07) Hoyo 推薦 JavaScript 使用 Paho MQTT

1,617 total views, 3 views today

MQTT - 使用 Paho MQTT JavaScript

前言

參考資源

程式碼

安裝、連接

訂閱、取消訂閱主題

傳送訊息

接收訊息

AMQJS0005E Internal error.

結論

Related Post

發佈留言

MQTT - 使用 Paho MQTT JavaScript

前言

參考資源

程式碼

安裝、連接

訂閱、取消訂閱主題

傳送訊息

接收訊息

AMQJS0005E Internal error.

結論

Related Post

WT32-ETH01 - 控制板子上的 LED

WT32-ETH01 - Ethernet

NanoPi - 控制硬體

發佈留言