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.0npm 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

连接断开订阅取消订阅发送状态:{{clientStatus?'已连接':'未连接'}}{{item}}确定import {v4} from 'uuid';var mqtt = require('mqtt/dist/mqtt.js')const MQTT_IP = '192.xxx.x.xxx:8083/mqtt' //mqtt地址端口, 使用emqx时一定要加mqttconst 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 H5that.client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)// #endif// #ifdef MP-WEIXIN||APP-PLUSthat.client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)// #endifthat.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、noneif (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 = [];}});}}}.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;}}