用uniapp写一个mqtt服务的信息采集app代码
时间: 2023-05-23 08:03:33 浏览: 122
uniapp-mqtt小程序可用完整代码示例-解决整机调试问题、重复断线重连等问题(可转微信小程序完美解决H5、微信小程序多端)
5星 · 资源好评率100%
非常感谢您的提问!以下是用Uniapp写一个MQTT服务的信息采集App的代码:
<template>
<view>
<text>MQTT服务地址:</text>
<input v-model="brokerUrl"></input>
<text>MQTT服务端口:</text>
<input v-model="brokerPort"></input>
<text>订阅主题:</text>
<input v-model="topic"></input>
<text>消息:</text>
<scroll-view style="height:300rpx;width:600rpx;">
<view>
<text>{{ messages }}</text>
</view>
</scroll-view>
</view>
</template>
<script>
var mqtt = require('mqtt');
var client = mqtt.connect(this.brokerUrl, {
port: this.brokerPort
});
export default {
data() {
return {
messages: '',
brokerUrl: '',
brokerPort: '',
topic: ''
}
},
created() {
client.on('connect', () => {
console.log('MQTT Connected');
client.subscribe(this.topic);
});
client.on('message', (topic, message) => {
console.log('New MQTT Message: ' + message.toString());
this.messages += '\n' + message.toString();
});
},
methods: {}
}
</script>
希望这个代码对您有所帮助!
阅读全文