本文章大部分内容来自MQTT官方教程,有需要的可以去MQTT官网查看,这里只分享一下自己的使用过程。谢谢大家观看!
首先我们使用微信开发者工具创建一个空项目。
不使用云开发,不使用模板。
然后我们去MQTT网址,或者下方链接下载mqtt.mini.js
这个可以下载mqtt.mini.jshttps://unpkg.com/mqtt@4.2.1/dist/mqtt.min.js
在项目根目录下新建 utils 文件夹,有的话就不用新建了,将下载好的对应版本的 mqtt.min.js 文件放入该文件夹中,在 index.js 中通过如下方式引入 mqtt:
import mqtt from "../../utils/mqtt.min.js";
然后再pages目录中找到index文件夹,里面有四个文件:
在index.js中输入如下代码:
index.js
import mqtt from "../../utils/mqtt.min.js";
Page({
data: {
client: null,
conenctBtnText: "连接",
host: "mqtt-server.lierxun.com.cn",
subTopic: "testtopic",
pubTopic: "testtopic",
pubMsg: "Hello! I am from WeChat miniprogram",
receivedMsg: "",
mqttOptions: {
username: "",
password: "",
reconnectPeriod: 1000, // 1000毫秒,设置为 0 禁用自动重连,两次重新连接之间的间隔时间
connectTimeout: 30 * 1000, // 30秒,连接超时时间
// 更多参数请参阅 MQTT.js 官网文档:https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
// 更多 EMQ 相关 MQTT 使用教程可在 EMQ 官方博客中进行搜索:https://www.emqx.com/zh/blog
},
},
setValue(key, value) {
this.setData({
[key]: value,
});
},
setHost(e) {
this.setValue("host", e.detail.value);
},
setSubTopic(e) {
this.setValue("subTopic", e.detail.value);
},
setPubTopic(e) {
this.setValue("pubTopic", e.detail.value);
},
setPubMsg(e) {
this.setValue("pubMsg", e.detail.value);
},
setRecMsg(msg) {
this.setValue("receivedMsg", msg);
},
connect() {
// MQTT-WebSocket 统一使用 /path 作为连接路径,连接时需指明,但在 EMQX Cloud 部署上使用的路径为 /mqtt
// 因此不要忘了带上这个 /mqtt !!!
// 微信小程序中需要将 wss 协议写为 wxs,且由于微信小程序出于安全限制,不支持 ws 协议
try {
this.setValue("conenctBtnText", "连接中...");
const clientId = new Date().getTime();
this.data.client = mqtt.connect(`wxs://${this.data.host}:8084/mqtt`, {
...this.data.mqttOptions,
clientId,
});
this.data.client.on("connect", () => {
wx.showToast({
title: "连接成功",
});
this.setValue("conenctBtnText", "连接成功");
this.data.client.on("message", (topic, payload) => {
wx.showModal({
content: `收到消息 - Topic: ${topic},Payload: ${payload}`,
showCancel: false,
});
const currMsg = this.data.receivedMsg ? `<br/>${payload}` : payload;
this.setValue("receivedMsg", this.data.receivedMsg.concat(currMsg));
});
this.data.client.on("error", (error) => {
this.setValue("conenctBtnText", "连接");
console.log("onError", error);
});
this.data.client.on("reconnect", () => {
this.setValue("conenctBtnText", "连接");
console.log("reconnecting...");
});
this.data.client.on("offline", () => {
this.setValue("conenctBtnText", "连接");
console.log("onOffline");
});
// 更多 MQTT.js 相关 API 请参阅 https://github.com/mqttjs/MQTT.js#api
});
} catch (error) {
this.setValue("conenctBtnText", "连接");
console.log("mqtt.connect error", error);
}
},
subscribe() {
if (this.data.client) {
this.data.client.subscribe(this.data.subTopic);
wx.showModal({
content: `成功订阅主题:${this.data.subTopic}`,
showCancel: false,
});
return;
}
wx.showToast({
title: "请先点击连接",
icon: "error",
});
},
unsubscribe() {
if (this.data.client) {
this.data.client.unsubscribe(this.data.subTopic);
wx.showModal({
content: `成功取消订阅主题:${this.data.subTopic}`,
showCancel: false,
});
return;
}
wx.showToast({
title: "请先点击连接",
icon: "error",
});
},
publish() {
if (this.data.client) {
this.data.client.publish(this.data.pubTopic, this.data.pubMsg);
return;
}
wx.showToast({
title: "请先点击连接",
icon: "error",
});
},
disconnect() {
this.data.client.end();
this.data.client = null;
this.setValue("conenctBtnText", "连接");
wx.showToast({
title: "成功断开连接",
});
},
});
在index.wxml中输入如下代码:
<view class="container">
<view class="label">连接地址(域名):</view>
<input bindinput="setHost" value="{{ host }}" />
<view class="is-flex">
<button type="primary" bindtap="connect">{{ conenctBtnText }}</button>
<button type="warn" disabled="{{ conenctBtnText === '连接' }}" bindtap="disconnect">断开连接</button>
</view>
<view class="label">订阅主题:</view>
<input bindinput="setSubTopic" value="{{ subTopic }}" />
<view class="is-flex">
<button type="primary" bindtap="subscribe">订阅</button>
<button type="warn" bindtap="unsubscribe">取消订阅</button>
</view>
<view class="label">发布主题:</view>
<input bindinput="setPubTopic" value="{{ pubTopic }}" />
<view class="label">发布消息:</view>
<input bindinput="setPubMsg" value="{{ pubMsg }}"></input>
<view class="is-flex">
<button type="primary" bindtap="publish">发布</button>
</view>
<view class="label">收到的消息:</view>
<view class="received-msg-box">
<rich-text nodes="{{receivedMsg }}"></rich-text>
</view>
</view>
在index.css中输入如下代码:
/* pages/user/index.wxss */
.container {
padding-top: 26px;
overflow-x: hidden;
z-index: 1;
}
.user-avatar {
margin: 10px 0 10px 30px;
}
.user-avatar-shadow {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 6px 15px 0 rgba(0, 0, 0, 0.22);
}
.user-nickname {
padding: 27px 0 0 10px;
font-size: 18px;
width: 300px;
}
.user-menu {
padding-top: 25px;
}
.user-load {
width: calc(100% - 32px);
padding: 20px 16px;
border-radius: 20px;
overflow: hidden;
}
.user-load-notic {
padding: 0 0 20px 15px;
}
.user-load-title {
font-size: 13px;
padding-bottom: 10px;
}
.user-load-list {
font-size: 12px;
color: gray;
padding: 0 0 5px 2px;
}
.user-load-button {
width: calc(100% - 48px);
padding-left: 24px;
}
编译运行之后显示如下界面:
然后我们再打开MQTTX,官方提供的工具,点我可以下载
添加一个主题,我这里随便写一个主题名字:
然后我们在小程序里面输入同一个服务器,同一个主题名,然后点击连接,订阅。
就可以发布消息试试了,MQTT客户端也可以收到,也可以发送
文章来源:https://www.toymoban.com/news/detail-849351.html
以上就是本文章内容,更详细的内容,可以去官方链接(点击就可以),祝大家早日财富自由!文章来源地址https://www.toymoban.com/news/detail-849351.html
到了这里,关于微信小程序使用MQTT的小例子的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!