搭建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>