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