MQTT--JavaScript连接学习笔记--消息数据解析

一、连接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));

            }