一、連線MQTTwebsocket伺服器

1、首先引入CDN線上檔案：

<script src="https://cdn.bootcss.com/paho-mqtt/1.0.2/mqttws31.min.js"></script>

2、新增具體程式碼：

        client = new Paho.MQTT.Client("www.liefyuan.top", Number(9001), "websockets-test");//建立客戶端例項
        client.connect({onSuccess:onConnect});//連線伺服器並註冊連線成功處理事件
            function
 
 onConnect() {
                console.log("onConnected");

                topic = 'v1/devices/me/telemetry';

                client.subscribe(topic);//訂閱主題
                console.log("subscribed");
            }
            client.onConnectionLost = onConnectionLost;//註冊連線斷開處理事件
            client.onMessageArrived = onMessageArrived;//註冊訊息接收處理事件
 

            function onConnectionLost(responseObject) {
                if (responseObject.errorCode !== 0) {
                    console.log("onConnectionLost:"+responseObject.errorMessage);
                    console.log("連線已斷開");
                 }
            }
            function onMessageArrived
 
(message) {

                console.log("收到訊息:"+message.payloadString);
                console.log("主題："+message.destinationName);

            }

如上：註冊事件函式處理收到MQTT推送來的訊息，傳入一個message，所有的操作都是對message進行的。

（1）分析message：

因為message是一個物件所以對它操作：

for (i in message) {
     console.log(i);           //獲得屬性
     console.log(message[i]);  //獲得屬性值
}

然後輸出這個

_getPayloadString

function m/this._getPayloadString()

_getPayloadBytes

function m/this._getPayloadBytes()

_getDestinationName

function m/this._getDestinationName()

_setDestinationName

function m/this._setDestinationName()

_getQos

function m/this._getQos()

_setQos

function m/this._setQos()

_getRetained

function m/this._getRetained()

_setRetained

function m/this._setRetained()

_getDuplicate

function m/this._getDuplicate()

_setDuplicate

function m/this._setDuplicate()

payloadString

{"temperature":11.00,"humidity":25.00}

payloadBytes

Uint8Array [ 123, 34, 116, 101, 109, 112, 101, 114, 97, 116, … ]

destinationName

v1/devices/me/telemetry

qos

0

retained

false

duplicate

false

由物件的這些屬性就可以知道：

• 訊息的主題名：message.destinationName
• 訊息的內容：message.payloadString

（2）解析message.payloadString：{“temperature”:11.00,”humidity”:25.00}

可以知道訊息的內容是一個string，
1）最簡單的解析辦法就是（這個是絕對不行的！）：
擷取

temprature = message.payloadString.slice(15,20);
humidity = message.payloadString.slice(32,37);

2）觀察資料發現應該是一個JSon資料，這就好辦了！

var temp1 = jQuery.parseJSON(message.payloadString); // JSon格式化

// 直接使用
console.log("解析出來的：humidity："+temp1.humidity);
console.log("解析出來的：temperature："+temp1.temperature);

這樣就好了！

最終的程式碼：

client = new Paho.MQTT.Client("www.liefyuan.top", Number(9001), "websockets-test");//建立客戶端例項
        client.connect({onSuccess:onConnect});//連線伺服器並註冊連線成功處理事件
            function onConnect() {
                console.log("onConnected");

                topic = 'v1/devices/me/telemetry'; //訂閱的主題

                client.subscribe(topic);//訂閱主題
                console.log("subscribed");
                //傳送訊息
            }
            client.onConnectionLost = onConnectionLost;//註冊連線斷開處理事件
            client.onMessageArrived = onMessageArrived;//註冊訊息接收處理事件
            function onConnectionLost(responseObject) {
                if (responseObject.errorCode !== 0) {
                    console.log("onConnectionLost:"+responseObject.errorMessage);
                    console.log("連線已斷開");
                 }
            }
            function onMessageArrived(message) {

                console.log("收到訊息:"+message.payloadString);
                console.log("主題："+message.destinationName);

               // temprature = message.payloadString.slice(15,20); // 擷取資料
               // humidity = message.payloadString.slice(32,37); // 擷取資料

                var temp1 = jQuery.parseJSON(message.payloadString);

                console.log("解析出來的：humidity："+temp1.humidity);
                console.log("解析出來的：temperature："+temp1.temperature);
                 // 直接使用格式化的JSon資料
                temperature = temp1.temperature;  // 直接使用格式化的JSon資料
                humidity = temp1.humidity;


                //console.log(temprature.slice(15,20));
                //console.log(temprature.slice(32,37));

            }