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]);  //获得属性值}

然后输出这个

_getPayloadStringfunction m/this._getPayloadString()_getPayloadBytesfunction m/this._getPayloadBytes()_getDestinationNamefunction m/this._getDestinationName()_setDestinationNamefunction m/this._setDestinationName()_getQosfunction m/this._getQos()_setQosfunction m/this._setQos()_getRetainedfunction m/this._getRetained()_setRetainedfunction m/this._setRetained()_getDuplicatefunction m/this._getDuplicate()_setDuplicatefunction m/this._setDuplicate()payloadString{"temperature":11.00,"humidity":25.00}payloadBytesUint8Array [ 123, 34, 116, 101, 109, 112, 101, 114, 97, 116, … ]destinationNamev1/devices/me/telemetryqos0retainedfalseduplicatefalse

由对象的这些属性就可以知道：

• 消息的主题名：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));            }