微信小程序使用MQTT的小例子-战狼源码网

本文章大部分内容来自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;}

编译运行之后显示如下界面：