物联网应用:MQTT数据发送+前端vue的交互+Echarts
目录
前言
MQTT订阅与数据发送
前端Vue引用
效果图:
Echarts的使用和渲染
Echart数据效果图:
前言
在物联网应用中,单片机硬件数据可以通过NB-IoT,LoRa等广域网通信进行数据传递。
NBIoT:低功耗广域网,覆盖广、连接多、速率快、成本低、功耗低、架构优
LoRa:广域网无线通信:由终端、网关、网络服务器、应用服务器组成,具有低功耗、覆盖范围广,抗干扰强的特点,可用于上km的远距离传输,几百kb,应用于企业智能抄表等等
这里使用的是MQTT协议发送,数据格式为JSON,前端Vue调用数据展示
MQTT订阅与数据发送
数据发送是以基于ESP32的等硬件发送
通过MQTTX的数据测试软件完成我们的信息, 并设置订阅一个主题:
注意:由于MQTT发送方和接收方是两个用户,所以ID不能相同
前端Vue引用
import mqtt from ‘mqtt/dist/mqtt.min.js’;
methods方法中:
initMqttConnection() {
// 填写端口号和用户名 密码
this.client = mqtt.connect(‘ws://59.11x.xxx.xx:端口号/mqtt’, {
username: ”,
password: ”
});
this.client.on(‘connect’, () => {
console.log(‘MQTT connected’);
// 订阅的主题
this.client.subscribe(‘topic/01’);
});
this.client.on(‘message’, (topic, message) => {
const data = JSON.parse(message.toString());
console.log(‘MQTT JSON Data:’, data);
this.updateData(data);
});
this.client.on(‘error’, (err) => {
console.log(‘MQTT connection error:’, err);
});
},
mounted中挂载
mounted() {
this.initMqttConnection();
},
完整的测试代码
JSON数据:
{ "Tem": 22, "Hum": 60, "SoilHum": 70, "WLeval": 14, "WQuality": "10" }
MQTT Real-time Data
Temperature
{{ temperature }}°C
Humidity
{{ humidity }}%
Soil Humidity
{{ soilHumidity }}%
Water Level
{{ waterLevel }}cm
Water Quality
{{ waterQuality }}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.sensor-data-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-top: 40px;
}
.sensor-data-item {
background-color: #f4f4f4;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.label {
font-weight: bold;
margin-bottom: 10px;
}
.value {
font-size: 24px;
}
效果图:
Echarts的使用和渲染
import * as echarts from ‘echarts’;
// or
import echarts from ‘echarts’
// 这里以温度为例
//初始化
{{ temperature }}°C
//mounted挂载
this.initCharts();
// 初始化
initCharts() {
this.tempChart = echarts.init(this.$refs.tempChart);
}
//
updateData(data) {
this.temperature = data.Tem;
}
//写入图表
updateCharts(data) {
this.tempChartData.push(data.Tem);
}
// 图表格式数据
this.tempChart.setOption({
grid: {
top: ‘10%’,
bottom: ‘10%’,
left: ‘10%’,
right: ‘10%’
},
xAxis: {
type: ‘category’,
splitLine: {
show: false
}
},
yAxis: {
type: ‘value’,
min: 0,
max: 50,
splitLine: {
show: false
}
},
series: [
{
data: this.tempChartData,
type: ‘bar’,
itemStyle: {
color: ‘#ff6b6b’
}
}
],
tooltip: {
trigger: ‘axis’,
formatter: ‘{b}: {c}°C’
}
});
Echart数据效果图:
传MQTT数据后: