MqttDemo/pages/index/index.vue

<template>
	<view class="content">
		<view>
			<button type="primary" @click="connectOrDisconnect">{{connectText}}</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: "",
			}
		},
		onLoad() {
			console.log('index.vue onload')
		},
		created() {
			console.log('index.vue created')
		},
		computed: {
			connectText() {
				return (this.$store.getters['moduleMqtt/connected']) ? '断开' : '连接'
			},
			subList() {
				return this.$store.state.moduleMqtt.msgList
			},
		},
		methods: {
			publish() { //发布
				let that = this;
				//发布消息
				that.$store.dispatch({
					type: 'moduleMqtt/publish',
					topic: that.publishTopic,
					payload: that.publishMsg,
				}).then(() => {/* success */}, (err) =>{
					console.log(err);
					uni.showToast({
						title: "发布消息失败",
						duration: 2000,
						icon: "none"
					});
				});
			},
			subscribe() { //订阅
				let that = this;
				//订阅消息
				that.$store.dispatch('moduleMqtt/subscribe', that.subscribeTopic)
					.then(() => {
							uni.showToast({
								title: `订阅${that.subscribeTopic}主题成功`,
								duration: 2000,
								icon: "none"
							})
						},
						(err) => {
							uni.showToast({
								title: `订阅${that.subscribeTopic}主题失败`,
								duration: 2000,
								icon: "none"
							})
						});
			},
			connectOrDisconnect() { //连接或者断开mqtt服务
				if (this.$store.getters['moduleMqtt/connected'] === false) {
					//连接mqtt服务器
					this.$store.commit('moduleMqtt/connect')
				} else {
					//断开连接
					this.$store.commit('moduleMqtt/disconnect')
				}
			},
			connectWithWxApi(){
				uni.connectSocket({
					url:'wss://mqtt.test.radio1964.com',
					success(res){
						console.log('连接成功');
					},
					fail(err){
						console.log('连接失败');
					}
				});
				uni.onSocketOpen(function(res){
					console.log('onSocketOpen');
					console.log(res);
				})
				uni.onSocketClose(function(res){
					console.log('onSocketClose');
					console.log(res);
				})
				uni.onSocketError(function(err){
					console.log('err');
					console.log(err);
					
				})
			},
			closeSocket(){
				uni.closeSocket({
					success() {
						console.log("closeSocket success");
					},
					fail() {
						console.log("closeSocket fail");
					}
				})
			},
			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: 30rpx;
		color: #2c3e50;
		margin: 5rpx;
	}

	textarea {
		height: 50rpx;
	}

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