小程序使用mqtt协议获取数据并绘制canvas 汇总和其中会出现问题
mqtt协议使用
我们可以将其放入page中的函数内部方便我们使用
注意一下几点：
1.出现SocketTask.send:fail SocketTask.readyState is not OPEN ，出现问题是我们在未建立连接之前就发送消息，我们只需要让message在connect之后运行即可。
2.对client组件在生命周期进行销毁，需要在page声明一个全局函数即可
3.在client.on函数时使用回调函数保持内外this的一致，才能使用this.data;（下面案例有）
4.实现mqtt协议传输某个东西有数据进行报警，没有传数据则恢复，而且传输是以
图二形式不会将所有数据一起给你，三秒一条，没有传代表不报警，但报警中间不能断。
还有很多补足的地方大家多多指点，希望大家多多留言。
,
reqMqtt: function (res) {
let {userCode, mecCode, departCode} = res;
let homeList = this.data.homeList;
// 连接选项 认证信息 按自己需求填写
const options = {
userCode: userCode,
clientId: 'clientUserID',
};
//这里可以在page外部声明好
client = mqtt.connect(util.ulrMqtt, options);
client.on('reconnect', (error) => {
console.log('正在重连:', error)
});
client.on('error', (error) => {
console.log('连接失败:', error)
});
client.on('connect', (e) => {
//订阅一个主题
const resUrl = `abnormalMsg/${mecCode}/${departCode}/#`;
console.log(resUrl);
client.subscribe(resUrl, {qos: 0}, (err) => {
if (!err) {
console.log("订阅成功");
}
});
//加入缓存的数组，存储发过来的10条
let resArr = [];
//监听mq的返回
client.on('message', (topic, payload) => {
//数据解析（后面这些是第四条，不需要的同学可以跳过）
let newdata = JSON.parse(payload.toString());
let roomCode = newdata.room_code ? newdata.room_code : 0;
console.log(newdata);
//当有数据时push进缓存内，并且对多的进行从头部弹出
if (roomCode) {
resArr.push(roomCode);
if (resArr.length > 10) {
resArr.shift();
}
} else {
//没有新数据，弹出旧的
this.tiemAlarm(resArr, roomCode);
}
//homeList为我渲染的数组，进行遍历
for (let i in homeList) {
// 进行验证出现相同的就将其设置成1实现报警
if (this.showAlarm(i, resArr, homeList)) {
console.log(true);
this.setList(i, 1);
} else {
console.log(false);
this.setList(i, 0);
}
} ;
});
});
},
//定时函数
tiemAlarm: function (resArr, roomCode) {
let set = setTimeout(() => {
resArr.pop(roomCode);
clearTimeout(set);
}, 2000)
},
//对渲染逻辑的判断
showAlarm: function (i, resArr, homeList) {
//查询缓存中是否存在
for (let x in resArr) {
if (homeList[i].room_code == resArr[x]) {
return true
}
}
return false
},
//对值进行设置
setList: function (i, alarm) {
let homeList = this.data.homeList;
homeList[i].alarm = alarm;
this.setData({
homeList: homeList
});
},
在微信小程序里首先可以wx.getStorage()获取我们在client.subscribe 动态的订阅主题
client.on('connect', function () {
console.log('连接成功');
//订阅
wx.getStorage({
key: 'sn',
success: function (res) {
// success
client.subscribe(res.data.toUpperCase());
wx.request({
url: util.url + "/analysis/getStatisticsByTime",
data: {
selectTime: new Date().getFullYear() + "-" + Number(new Date().getUTCMonth() + 1) + "-" + new Date().getDate(),
sn: res.data
},
success: res => {
time24 = res.data.data[0]
},
})
}
})
})
canvas部分
接下来就该配置canvas，我一部分用的原生canvas绘制，一部分用的echarts，先使用echarts
1.先配置
在组件中的json里配置
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
},
"component": true,
}
2.进行实时获取数据
利用mqtt协议中的message来拿取数据
//分解数据
function Uint8ArrayToString(fileData) {
var dataString = "";
for (var i = 0; i < fileData.length; i++) {
dataString += String.fromCharCode(fileData[i]);
}
return dataString
}
//监听mqtt消息
client.on('message', function (topic, payload) {
var newdata = JSON.parse(Uint8ArrayToString(payload));
}）
3.接下来进入对echarts的配置，将mqtt中的message放入eachrts的函数中即可，目前函数都在page外部, 可以将message放入page中函数
function getHb(canvas, width, height) {
var hb = [];
client.on('message', function (topic, payload) {
var newData = JSON.parse(Uint8ArrayToString(payload));
hb.push(newdata.hb)
var option = { //按自己需求填写数据在newData中
}
chart.setOption(option);
})
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
return chart;
}
//同时在data进行关联
data: {
hb: {
onInit: getHb
},
},
4.在小程序page内部使用
在onReady中调用函数即可
changeNowData: function () {
var that = this;
client.on('message', function (topic, payload) {
var newdata = JSON.parse(Uint8ArrayToString(payload));
console.log(newdata);
that.font(newdata.hb, newdata.st)
that.annulus(newdata.hb)
})
},