MqttDemo/pages/index/index_backoff1.vue

<template>
	<view class="content">
		<view>
			<button type="primary" @click="connectOrDisconnect">{{connectText}}</button>
			<button @click="godoBle">添加设备</button>
		</view>
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<text class="title">发布消息</text>
		<view class="br"></view>
		<view class="text-area">
			<text>Topic</text>
			<input class="edittext" v-model="publishTopic" />
		</view>
		<view class="br"></view>
		<view class="text-area">
			<text>Payload</text>
			<textarea class="edittext" v-model="publishMsg" />
		</view>
		<view class="br"></view>
		<button @click="publish">publish</button>

		<text class="title">订阅主题</text>
		<view class="text-area">
			<!-- 订阅 -->
			<input class="edittext" v-model="subscribeTopic" />
		</view>
		<view class="br"></view>
		<button @click="subscribe">subscribe</button>
		<view class="br"></view>
		<text class="title">收到的Message</text>
		<view class="br"></view>
		<view v-for="(item, index) in subList" :key="index">
			<text>Topic：{{ item.topic }} ，Payload： {{ item.msg }}</text>
		</view>
		<view>

		</view>
	</view>
</template>

<script>
	//import store from '@/store/index.js';//需要引入store
	
	

	export default {
		data() {
			return {

				publishMsg: "",
				publishTopic: "",
				subscribeTopic: "",
				subList: [],
			}
		},
		onLoad() {
			console.log('index.vue onload')
			this.init();

		},
		created() {
			//this.init();
		},
		computed: {
			connectText() {
				return (this.$store.getters.isConnect) ? '断开' : '连接'
			}
		},
		methods: {
			publish() {
				//发布消息
				if (this.$store.getters.isConnect) {
					this.$store.state.mqttClient.publish(this.publishTopic, this.publishMsg, (err) => {
						if (err) {
							//alert(`发布消息失败`);
							uni.showToast({
								title: "发布消息失败",
								duration: 2000,
								icon: "none"
							})
						}
					});
				}
			},
			subscribe() {
				//console.log(this.$root)
				console.log(`subscribe isconnect = ${this.$store.getters.isConnect}`)
				if (this.$store.getters.isConnect) {
					//订阅消息
					this.$store.state.mqttClient.subscribe(this.subscribeTopic, (err) => {
						console.log(err);
						if (!err) {
							uni.showToast({
								title: `订阅${this.subscribeTopic}主题成功`,
								duration: 2000,
								icon: "none"
							})
						} else {
							uni.showToast({
								title: `订阅${this.subscribeTopic}主题失败`,
								duration: 2000,
								icon: "none"
							})
						}
					});
				}
			},
			init() {
				//连接mqtt服务器
				//this.$store.commit('connect')
				//this.mqttListen()
			},
			mqttListen() {
				const that = this;
				if (this.$store.state.mqttClient !== undefined) {
					//收到消息的回调
					this.$store.state.mqttClient.on("message", function(topic, message) {
						console.log(`message = ${message.toString()}`);
						that.subList.push({
							topic: topic.toString(),
							msg: message.toString(),
						});
					});
				}
			},
			connectOrDisconnect() { //连接或者断开mqtt服务
				if (this.$store.getters.isConnect === false) {
					//连接mqtt服务器
					this.$store.commit('connect')
					this.mqttListen()
				} else {
					//断开连接
					this.$store.commit('disconnect')
				}
			},
			godoBle() { //添加设备
				// #ifdef MP-WEIXIN||APP-PLUS
				uni.navigateTo({
					url: '../ble/ScanBleDevice'
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '../ble/ConnectBleDevice'
				})
				// uni.showToast({
				// 	title:'H5页面不支持扫描设备',
				// 	icon:'none'
				// })
				// #endif

			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
		margin: 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.br {
		height: 10rpx;
	}

	.text-area {
		display: flex;
		/* justify-content: center; */
	}

	.title {
		font-size: 20rpx;
		color: #2c3e50;
	}

	textarea {
		height: 50rpx;
	}

	.edittext {
		display: flex;
		border: 1rpx solid #333333;
	}
</style>