uniapp前端从零开始搭建一套mqtt服务

搭建mqtt服务器

参考：【MQTT】| 搭建——在云服务器上搭建MQTT服务器_mqtt服务器搭建-CSDN博客

如果服务器执行命令出现“Error: Failed to synchronize cache for repo ‘AppStream‘”的问题

解决方法：https://www.jianshu.com/p/a95e9d6d22e9

uniapp 使用MQTT连接服务器

npm install mqtt@3.0.0
npm install uuid

使用npm引入3.0.0版本的，最新版会有点小问题，uuid用来生成clientId唯一标识，用同一个标识的话会把其他相同标识的客户端踢下线

uniapp demo，直接拿来就能用

u-popup是uview-ui的弹窗组件uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

mqtt的js文件mqtt (v5.0.5) - A library for the MQTT protocol | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 创建一个mqtt.js文件复制进去就好

真机调试mqtt5会报错，改用mqtt3

<template>
	<view class="content">
		<button type="default" v-if="!client||!client.connected" @click="connect">连接</button>
		<button type="default" v-if="client&&client.connected" @click="end">断开</button>
		<button type="default" v-if="!subscribeStatus" @click="subscribe">订阅</button>
		<button type="default" v-if="subscribeStatus" @click="unsubscribe">取消订阅</button>
		<button type="default" @click="open">发送</button>
		<view>状态:{{clientStatus?'已连接':'未连接'}}</view>
		<view class="string">
			<view class="string" v-for="(item, index) in stringArr" :key="index"
				style="display:flex;padding: 10rpx;box-sizing: border-box;width: 100%;border-bottom: 1rpx solid #000;justify-content: center;">
				<text
					style="width:90%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">{{item}}</text>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center">
			<view style="padding: 20rpx;">
				<u--input placeholder="请输入数据" border="surround" v-model="writeDataValue"></u--input>
				<button @click="publish()">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		v4
	} from 'uuid';
	var mqtt = require('mqtt/dist/mqtt.js')
	const MQTT_IP = '192.xxx.x.xxx:8083/mqtt' //mqtt地址端口, 使用emqx时一定要加mqtt
	const MQTT_USERNAME = '' //mqtt用户名
	const MQTT_PASSWORD = '' //密码

	const MQTT_OPTIONS = {
		connectTimeout: 5000,
		clientId: '',
		username: MQTT_USERNAME,
		password: MQTT_PASSWORD,
		clean: true
	}
	export default {
		data() {
			return {
				client: {
					connected: false,
				},
				topic: 'testtopic/', //要订阅的主题
				show: false,
				writeDataValue: "world",
				clientStatus: false,
				subscribeStatus: false,
				stringArr: [],
			}
		},
		methods: {
			open() {
				if (!this.clientStatus) {
					uni.showToast({
						title: "请连接",
						icon: "none"
					})
					return;
				}
				this.show = true;
			},
			close() {
				this.show = false;
			},
			async connect() {
				let status = await uni.getNetworkType();
				if (status.networkType === "none") {
					uni.showToast({
						title: "请检查网络连接是否正常",
						icon: "none"
					})
					return;
				}
				uni.showLoading({
					title: 'Loading...'
				});
				MQTT_OPTIONS.clientId = v4();
				var that = this;
				// #ifdef H5
				that.client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
				// #endif
				// #ifdef MP-WEIXIN||APP-PLUS
				that.client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
				// #endif
				that.stringArr = [];
				that.clientStatus = false;
				that.subscribeStatus = false;
				that.client.on('connect', function() {
					uni.showToast({
						title: "连接成功",
						icon: "none"
					})
					console.log('连接成功');
					uni.hideLoading();
					that.clientStatus = true;
					that.subscribe();
				});
				that.client.on('reconnect', function(error) {
					console.log('正在重连...', that.topic)
					uni.getNetworkType({
						success: function(res) {
							console.log(res
								.networkType); //网络类型 wifi、2g、3g、4g、ethernet、unknown、none
							if (res.networkType === "none") {
								console.log("当前无网络");
								that.end();
							} else {
								console.log("有网络");
								uni.showToast({
									title: "正在重连...",
									icon: "none"
								})
								uni.showLoading({
									title: 'Loading...'
								});
							}
						}
					})
				});
				// 掉线
				that.client.on('offline', (msg) => {
					console.log('掉线', msg);
					uni.showToast({
						title: '掉线',
						icon: 'none',
					})
				});
				that.client.on('error', function(error) {
					console.log('连接失败...', error);
					uni.showToast({
						title: "连接失败...",
						icon: "none"
					})
					uni.hideLoading();
				});
				that.client.on('end', function() {
					console.log('连接断开')
					uni.showToast({
						title: "连接断开",
						icon: "none"
					})
					uni.hideLoading();
					that.client = {};
					that.stringArr = [];
					that.clientStatus = false;
					that.subscribeStatus = false;
				});
				that.client.on('message', function(topic, message) {
					console.log('接收推送信息：', message.toString())
					that.stringArr.unshift(message.toString());
				})
			},
			// 发布
			publish() {
				var that = this;
				if (!this.clientStatus) {
					uni.showToast({
						title: "请连接",
						icon: "none"
					})
					return;
				}
				that.client.publish(that.topic, that.writeDataValue, {}, function(err) {
					if (!err) {
						console.log('发送成功');
						that.close();
						uni.showToast({
							title: "发送成功",
							icon: "none"
						})
					}
				})
			},
			// 订阅
			subscribe() {
				var that = this;
				if (!this.clientStatus) {
					uni.showToast({
						title: "请连接",
						icon: "none"
					})
					return;
				}
				that.client.subscribe(that.topic, function(err) {
					if (!err) {
						console.log('订阅成功');
						uni.showToast({
							title: "订阅成功",
							icon: "none"
						})
						that.subscribeStatus = true;
					}
				})
			},
			// 取消订阅
			unsubscribe() {
				var that = this;
				if (!this.clientStatus) {
					uni.showToast({
						title: "请连接",
						icon: "none"
					})
					return;
				}
				that.client.unsubscribe(that.topic, function(err) {
					if (!err) {
						console.log('取消订阅成功');
						uni.showToast({
							title: "取消订阅成功",
							icon: "none"
						})
						that.subscribeStatus = false;
					}
				})
			},
			// 断开
			end() {
				var that = this;
				that.client.connected = false;// 移动端不加这个关闭回调不会触发
				that.client.end(true, (err) => {
					if (err) {
						that.client.connected = true;
					} else {
						console.log('断开成功')
						that.stringArr = [];
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		button {
			margin-top: 10px;
		}
	}

	.string {
		width: 100%;
		flex: 1;
		overflow-y: scroll;
	}

	.list {
		padding: 20rpx;

		view {
			display: flex;
			justify-content: space-around;
		}
	}
</style>