DIY可视化整合MQTT生成UniApp源码
MQTT协议是什么？
MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，专门设计用于在低带宽、不稳定的网络环境下进行物联网设备之间的通信。具有以下特点（优势）：
- 轻量级：MQTT 协议设计简单，通信开销小，适合在资源受限的设备上使用，如传感器、嵌入式设备等。
- 发布/订阅模式：MQTT 使用发布/订阅模式，消息的发送者称为发布者（Publisher），消息的接收者称为订阅者（Subscriber），发布者和订阅者之间通过消息代理（Broker）进行通信。
- 可靠性：MQTT 协议支持消息的 QoS（Quality of Service）等级，包括至多一次、至少一次和仅一次，可以根据需求选择适当的 QoS 级别来确保消息的可靠传输。
- 连接保持：MQTT 客户端可以保持与消息代理的长连接，即使在网络不稳定或断开的情况下，客户端也可以重新连接并恢复通信。
- 适应性：MQTT 可以在 TCP/IP、TLS/SSL、WebSocket 等多种网络协议上进行通信，便于在不同的网络环境中使用。
- 支持保留消息：MQTT支持保留消息，使得新的订阅者可以立即获取到最新消息。
- 跨平台：MQTT是跨平台的，可以在各种设备和操作系统上使用。
MQTT协议定义了三种角色：
- 发布者（Publisher）：发布消息到MQTT代理（Broker）。
- 订阅者（Subscriber）：从MQTT代理接收消息。
- 代理（Broker）：负责接收发布者发送的消息，并按照订阅者的订阅主题进行消息转发。
- MQTT协议通常与各种编程语言和框架都有良好的支持，使得开发者能够轻松地在各种应用场景中实现MQTT通信。
总而言之，MQTT 协议由于其轻量级、灵活性和可靠性，被广泛应用于物联网设备、传感器网络、移动设备等场景，是物联网通信的重要协议之一。
安装步骤
下载
URL: https://www.emqx.io/zh/downloads?os=Windows
History URL: https://www.emqx.com/zh/downloads/broker
当前下载的是 emqx-5.3.0-windows-amd64.zip
安装
无需安装，解压 emqx-5.3.0-windows-amd64.zip 后即可使用
运行
假设 emqx-5.3.0-windows-amd64.zip 解压到以下目录：
D:\work\mqtt\emqx-5.3.2-windows-amd64
打开 CMD 窗口
运行以下命令，以下结果说明服务运行正常：
Microsoft Windows [版本 10.0.19045.3570]
(c) Microsoft Corporation。保留所有权利。
D:\work\mqtt\emqx-5.3.2-windows-amd64\bin>emqx start
EMQX_NODE__DB_ROLE [node.role]: core
EMQX_NODE__DB_BACKEND [node.db_backend]: mnesia
D:\work\mqtt\emqx-5.3.2-windows-amd64>cd bin
D:\work\mqtt\emqx-5.3.2-windows-amd64\bin>emqx_ctl status
Node 'emqx@127.0.0.1' 5.3.0 is started
访问 Web 端控制台：
http://127.0.0.1:18083/#/dashboard/overview
默认用户名密码登录：admin/public
扩展
emqx start ： 后台启动 EMQX Broker；
emqx stop ：关闭 EMQX Broker；
emqx restart ：重启 EMQX Broker
emqx console 使用控制台启动 EMQX Broker；
emqx foreground ： 使用控制台启动 EMQX Broker，与 emqx console 不同，emqx foreground 不支持输入 Erlang 命令
emqx ping ：Ping EMQX Broker, 检查当前节点是否通信正常；
emqx check_conf： 检查配置文件格式是否正常，如果你修改了配置文件，推荐在启动前先执行此命令，来检查配置文件的格式是否符合要求。
emqx_ctl status：查询 EMQX 运行状态
emqx_ctl broker：查询服务器基本信息，启动时间，统计数据与性能数据
emqx_ctl broker stats：查询服务器客户端连接 (Connections)、主题 (Topics)、订阅 (Subscriptions)、路由 (Routes) 统计
emqx_ctl clients list：列出所有客户端连接
MQTT5.0桌面客户端MQTTX
MQTTX是EMQ开源的一款优雅的跨平台MQTT 5.0桌面客户端，它支持macOS、Linux和Windows系统。MQTT X的UI采用了聊天界面形式，简化了页面操作逻辑，用户可以快速创建连接，允许保存多个客户端，方便用户快速测试MQTT/MQTTS连接，以及MQTT消息的订阅和发布。
MQTT X的主要特点包括：
- 跨平台：支持多种操作系统，包括macOS、Linux和Windows，满足不同用户的需求。
- 简洁的图形界面：采用聊天界面形式，使得操作更加直观和便捷。
- 快速创建和保存连接：用户可以轻松创建并保存多个MQTT客户端连接，方便进行不同场景下的测试。
- 支持多种连接方式：支持MQTT/TCP、MQTT/TLS、MQTT/WebSocket等多种连接方式，满足不同的通信需求。
- 优化使用体验：通过一键式的连接方式和快速复制连接功能，优化了用户的使用体验。
- 此外，MQTTX还提供了丰富的功能，如支持SSL/TLS加密通信、支持WebSocket连接、支持多种认证方式等，以满足不同安全需求。
总的来说，MQTTX是一个功能强大、操作简便的MQTT客户端工具，适用于物联网、智能家居、移动应用等多种场景下的MQTT通信需求。
MQTTX下载地址:https://mqttx.app/zh/downloads
<template>
<view class="container container30157">
<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24 form-clz">
<u-form-item class="diygw-col-24 url-clz" label="url" prop="url">
<u-input :focus="formData.urlFocus" class="" placeholder="mqtt协议：H5使用ws/wss APP-PLUS使用wx/wxs" v-model="form.url"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 clientId-clz" label="clientId" prop="clientId">
<u-input :focus="formData.clientIdFocus" class="" placeholder="clientId" v-model="form.clientId"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 username-clz" label="username" prop="username">
<u-input :focus="formData.usernameFocus" class="" placeholder="username" v-model="form.username"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 password-clz" label="password" prop="password">
<u-input :focus="formData.passwordFocus" class="" placeholder="password" v-model="form.password"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 switch-clz" label="clean" prop="switch">
<view class="flex diygw-col-24">
<u-switch :activeValue="1" :inactiveValue="0" @tap="changeFormSwitched" v-model="form.switched" slot="right"></u-switch>
</view>
</u-form-item>
<view class="flex diygw-col-24 button-clz">
<button @tap="navigateTo" data-type="startConnectFunction" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">连接</button>
<button @tap="navigateTo" data-type="endConnectFunction" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">终止</button>
<button @tap="navigateTo" data-type="reConnectFunction" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">重连</button>
</view>
</u-form>
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
<view class="flex flex-wrap diygw-col-24 justify-between green flex3-clz">
<view class="diygw-col-0 text22-clz"> 日志消息 </view>
<view @tap="navigateTo" data-type="cealrLogFunction" class="diygw-col-0 text2-clz"> 清空日志 </view>
</view>
<view v-for="(item, index) in logs" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
<view class="diygw-col-24 text-clz">
{{ item.option + item.log }}
</view>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex2-clz">
<view class="diygw-col-24 pink text1-clz"> 订阅消息 </view>
<u-form :model="subscribeInfo" :rules="subscribeInfoRules" :errorType="['message', 'toast']" ref="subscribeInfoRef" class="flex diygw-form diygw-col-24 subscribeInfo-clz">
<u-form-item class="diygw-col-24 topic-clz" label="topic" prop="topic">
<u-input :focus="subscribeInfoData.topicFocus" class="" placeholder="topic" v-model="subscribeInfo.topic"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 qos-clz" label="qos" prop="qos">
<view class="flex diygw-col-24">
<u-number-box @change="changeSubscribeInfoQos" name="qos" v-model="subscribeInfo.qos" bgColor="#EBECEE" color="#323233" :min="0" :max="100" :step="1" />
</view>
</u-form-item>
<view class="flex diygw-col-24 button3-clz">
<button @tap="navigateTo" data-type="changeQosFunction" class="diygw-btn green radius-xs flex-sub margin-xs button3-button-clz">Qos {{ subscribeInfo.qos }}</button>
<button @tap="navigateTo" data-type="startSubscribeFunction" class="diygw-btn green radius-xs flex-sub margin-xs button3-button-clz">订阅</button>
<button @tap="navigateTo" data-type="endSubscribeFunction" class="diygw-btn green radius-xs flex-sub margin-xs button3-button-clz">取订</button>
</view>
</u-form>
</view>
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
<view class="diygw-col-24 gradual-red text3-clz"> 发送消息 </view>
<u-form :model="publishInfo" :rules="publishInfoRules" :errorType="['message', 'toast']" ref="publishInfoRef" class="flex diygw-form diygw-col-24 publishInfo-clz">
<u-form-item class="diygw-col-24 topic-clz" label="topic" prop="topic">
<u-input :focus="publishInfoData.topicFocus" class="" placeholder="topic" v-model="publishInfo.topic"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 message-clz" label="message" prop="message">
<u-input :focus="publishInfoData.messageFocus" class="" placeholder="message" v-model="publishInfo.message"></u-input>
</u-form-item>
<view class="flex diygw-col-24 button2-clz">
<button @tap="navigateTo" data-type="publishFunction" class="diygw-btn green radius-xs flex-sub margin-xs button2-button-clz">发送</button>
</view>
</u-form>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: {},
logs: [
{
option: '环境配置：',
log: '配置成功'
}
],
publishInfoRules: {},
form: {
url: 'ws://127.0.0.1:8083/mqtt',
clientId: 'App_0109',
username: 'test',
password: 'test',
switched: 1
},
formRules: {},
publishInfo: {
topic: 'topic',
message: 'message'
},
subscribeInfo: {
topic: 'topic',
qos: 1
},
subscribeInfoRules: {},
formData: {
urlFocus: false,
clientIdFocus: false,
usernameFocus: false,
passwordFocus: false
},
subscribeInfoData: {
topicFocus: false
},
publishInfoData: {
topicFocus: false,
messageFocus: false
}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
onReady() {
this.$refs.formRef?.setRules(this.formRules);
this.$refs.subscribeInfoRef?.setRules(this.subscribeInfoRules);
this.$refs.publishInfoRef?.setRules(this.publishInfoRules);
},
methods: {
async init() {
await this.initResetform();
await this.initResetsubscribeInfo();
await this.initResetpublishInfo();
},
// 连接 自定义方法
async startConnectFunction(param) {
let thiz = this;
var _this = this;
let opts = {
url: this.form.url,
clientId: this.form.clientId,
username: this.form.username,
password: this.form.password,
clean: this.form.clean == 1 ? true : false
};
var client = await this.$mqttTool.connect(opts);
client.on('connect', function (res) {
_this.logs.unshift({
option: 'mqtt：',
log: '连接成功'
});
});
client.on('reconnect', function (res) {
_this.logs.unshift({
option: 'mqtt：',
log: '重新连接'
});
});
client.on('error', function (res) {
_this.logs.unshift({
option: 'mqtt：',
log: '连接错误'
});
});
client.on('close', function (res) {
_this.logs.unshift({
option: 'mqtt：',
log: '关闭成功'
});
});
client.on('message', function (topic, message, buffer) {
if (_this.isBuffer) {
_this.logs.unshift({
option: topic + ' buffer：',
log: JSON.stringify(buffer)
});
}
_this.logs.unshift({
option: topic + ' message：',
log: message.toString()
});
});
},
// 终止 自定义方法
async endConnectFunction(param) {
let thiz = this;
var _this = this;
this.$mqttTool.end().then((res) => {
_this.logs.unshift({
option: '终止：',
log: res
});
});
},
// 重新连接 自定义方法
async reConnectFunction(param) {
let thiz = this;
var _this = this;
this.$mqttTool.reconnect().then((res) => {
_this.logs.unshift({
option: '重连：',
log: res
});
});
},
// 发送消息 自定义方法
async publishFunction(param) {
let thiz = this;
var _this = this;
let opts = {
topic: this.publishInfo.topic,
message: this.publishInfo.message
};
this.$mqttTool.publish(opts).then((res) => {
_this.logs.unshift({
option: '发送：',
log: res
});
});
},
// 订阅 自定义方法
async startSubscribeFunction(param) {
let thiz = this;
if (this.subscribeInfo.topic == '') {
uni.showToast({
icon: 'none',
title: '输入topic'
});
return;
}
var _this = this;
let opts = {
topic: this.subscribeInfo.topic,
qos: this.subscribeInfo.qos
};
this.$mqttTool.subscribe(opts).then((res) => {
_this.logs.unshift({ option: '订阅' + opts.topic + '：', log: res });
});
},
// 取消订阅 自定义方法
async endSubscribeFunction(param) {
let thiz = this;
var _this = this;
let opts = {
topic: this.subscribeInfo.topic
};
this.$mqttTool.unsubscribe(opts).then((res) => {
_this.logs.unshift({ option: '取消订阅：', log: res });
});
},
// 清空日志 自定义方法
async cealrLogFunction(param) {
let thiz = this;
this.logs = [{ option: '环境配置：', log: '配置成功' }];
},
// 更改Qos 自定义方法
async changeQosFunction(param) {
let thiz = this;
var _this = this;
if (this.subscribeInfo.qos >= 2) {
this.subscribeInfo.qos = 0;
this.logs.unshift({ option: 'Qos：', log: this.subscribeInfo.qos });
this.startSubscribe();
} else {
this.subscribeInfo.qos += 1;
this.logs.unshift({ option: 'Qos：', log: this.subscribeInfo.qos });
this.startSubscribe();
}
},
changeFormSwitched(evt) {},
initResetform() {
this.initform = JSON.stringify(this.form);
},
resetForm() {
this.form = JSON.parse(this.initform);
},
async submitForm(e) {
this.$refs.formRef?.setRules(this.formRules);
this.$nextTick(async () => {
let valid = await this.$refs.formRef.validate();
if (valid) {
//保存数据
let param = this.form;
let header = {};
let url = '';
if (!url) {
this.showToast('请先配置表单提交地址', 'none');
return false;
}
let res = await this.$http.post(url, param, header, 'json');
if (res.code == 200) {
this.showToast(res.msg, 'success');
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
},
changeSubscribeInfoQos(evt) {},
initResetsubscribeInfo() {
this.initsubscribeInfo = JSON.stringify(this.subscribeInfo);
},
resetSubscribeInfo() {
this.subscribeInfo = JSON.parse(this.initsubscribeInfo);
},
async submitSubscribeInfo(e) {
this.$refs.subscribeInfoRef?.setRules(this.subscribeInfoRules);
this.$nextTick(async () => {
let valid = await this.$refs.subscribeInfoRef.validate();
if (valid) {
//保存数据
let param = this.subscribeInfo;
let header = {};
let url = '';
if (!url) {
this.showToast('请先配置表单提交地址', 'none');
return false;
}
let res = await this.$http.post(url, param, header, 'json');
if (res.code == 200) {
this.showToast(res.msg, 'success');
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
},
initResetpublishInfo() {
this.initpublishInfo = JSON.stringify(this.publishInfo);
},
resetPublishInfo() {
this.publishInfo = JSON.parse(this.initpublishInfo);
},
async submitPublishInfo(e) {
this.$refs.publishInfoRef?.setRules(this.publishInfoRules);
this.$nextTick(async () => {
let valid = await this.$refs.publishInfoRef.validate();
if (valid) {
//保存数据
let param = this.publishInfo;
let header = {};
let url = '';
if (!url) {
this.showToast('请先配置表单提交地址', 'none');
return false;
}
let res = await this.$http.post(url, param, header, 'json');
if (res.code == 200) {
this.showToast(res.msg, 'success');
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
}
}
};
</script>
<style lang="scss" scoped>
.button-button-clz {
margin: 6rpx !important;
}
.flex4-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex3-clz {
padding-top: 10rpx;
font-weight: bold;
flex: 1;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.text-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex2-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text1-clz {
padding-top: 10rpx;
font-weight: bold;
flex: 1;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.button3-button-clz {
margin: 6rpx !important;
}
.flex1-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text3-clz {
padding-top: 10rpx;
font-weight: bold;
flex: 1;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.button2-button-clz {
margin: 6rpx !important;
}
.container30157 {
padding-left: 0px;
padding-right: 0px;
}
.container30157 {
}
</style>
