MqttDemo/pages/index/indexbackoff.vue

<template>
	<view class="content">
		<!-- <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>
</template>

<script>
	import mqtt from 'mqtt/dist/mqtt.js'

	//let mqtt = require('mqtt/dist/mqtt.js')

	const options = {
		connectTimeout: 4000, // 超时时间
		clientId: "mqtt_" + parseInt(Math.random() * 100 + 800, 10),
		port: 8081,
	};
	
	// #ifdef H5
	let url = 'wss://test.mosquitto.org'
	// #endif
	// #ifdef MP-WEIXIN||APP-PLUS
	let url = 'wxs://test.mosquitto.org'
	// #endif

	let client = mqtt.connect(url, options)



	export default {
		data() {
			return {
				publishMsg: "",
				publishTopic: "",
				subscribeTopic: "",
				subList: [],
				isConnect: false,
			}
		},
		onLoad() {
			//this.init();
		},
		created() {
			this.init();
		},
		methods: {
			publish() {
				//发布消息
				if (this.isConnect) {
					client.publish(this.publishTopic, this.publishMsg, (err) => {
						if (err) {
							//alert(`发布消息失败`);
							uni.showToast({
								title: "发布消息失败",
								duration: 2000,
								icon: "none"
							})
						}
					});
				}
			},
			subscribe() {
				if (this.isConnect) {
					client.subscribe(this.subscribeTopic, (err) => {
						if (!err) {
							uni.showToast({
								title: `订阅${this.subscribeTopic}主题成功`,
								duration: 2000,
								icon: "none"
							})
						} else {
							uni.showToast({
								title: `订阅${this.subscribeTopic}主题失败`,
								duration: 2000,
								icon: "none"
							})
						}
					});
				}
			},
			init() {
				const that = this;

				//连接成功回调
				client.on("connect", function() {
					that.isConnect = true
					console.log("connect success!");
				});

				//异常回调
				client.on("error", function(err) {
					that.isConnect = false
					console.log(err);
				});
				
				client.on("offline", function() {
					that.isConnect = false
					console.log("offline");
				});
				
				client.on("close", function() {
					that.isConnect = false
					console.log("close");
				});

				//收到消息的回调
				client.on("message", function(topic, message) {
					console.log(`message = ${message.toString()}`);
					that.subList.push({
						topic: topic.toString(),
						msg: message.toString(),
					});
				});
			},
		}
	}
</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>