微信小程序使用MQTT的小例子

这篇具有很好参考价值的文章主要介绍了微信小程序使用MQTT的小例子。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文章大部分内容来自MQTT官方教程,有需要的可以去MQTT官网查看,这里只分享一下自己的使用过程。谢谢大家观看!

首先我们使用微信开发者工具创建一个空项目。

微信小程序mqtt,微信小程序,notepad++,小程序

不使用云开发,不使用模板。

然后我们去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";

微信小程序mqtt,微信小程序,notepad++,小程序

然后再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;
}

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

微信小程序mqtt,微信小程序,notepad++,小程序

然后我们再打开MQTTX,官方提供的工具,点我可以下载

微信小程序mqtt,微信小程序,notepad++,小程序

添加一个主题,我这里随便写一个主题名字:微信小程序mqtt,微信小程序,notepad++,小程序

然后我们在小程序里面输入同一个服务器,同一个主题名,然后点击连接,订阅。

微信小程序mqtt,微信小程序,notepad++,小程序

就可以发布消息试试了,MQTT客户端也可以收到,也可以发送

微信小程序mqtt,微信小程序,notepad++,小程序

微信小程序mqtt,微信小程序,notepad++,小程序

以上就是本文章内容,更详细的内容,可以去官方链接(点击就可以),祝大家早日财富自由!文章来源地址https://www.toymoban.com/news/detail-849351.html

到了这里,关于微信小程序使用MQTT的小例子的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包