在小程序端，我使用的是这个MQTTJS库，这个库可以应用于浏览器，NPM，还可以应用到微信小程序，支付宝小程序。

我在小程序中实际用的版本是mqttv4.2.1.js，将文件下载后，保存为mqtt.js文件，并放入到小程序的utils目录中。然后在具体的MQTT页面中，引入该文件。

import mqtt from "../../utils/mqtt.js";

然后，在小程序页面的js文件中，设置如下变量和方法，这是一个示例，请根据实际情况进行调整。

下面是一些核心关键代码片段：

data: {
    isConn: false,
    isSub: false,
    client: null,
    host: "",
    username: "",
    password: "",
    subTopic: "",
    pubTopic: "",
    pubMsg: "",
    recvMsg: "",
  },
  
  

MQTT连接方法，请注意，这里的连接地址格式为wxs://yourdomain.com/mqtt/ws ：

connect() {
    const that = this;
    if (utils.isEmpty(that.data.host)) {
      wx.showToast({
        title: '连接地址为空',
      })
      return
    }
  
    // 微信小程序中需要将 wss 协议写为 wxs，且由于微信小程序出于安全限制，不支持 ws 协议
    try {
      wx.showLoading({
        title: '连接中',
      })
      const options = {
        keepalive: 30,
        //protocolVersion: 4, //MQTT V3.1.1
        connectTimeout: 3000,
        reconnectPeriod: 0, // 1000毫秒，设置为 0 禁用自动重连，两次重新连接之间的间隔时间
        clientId: 'mqttmp_' + Math.random().toString(16).substr(2, 8), //这个地方最好用一个随机字符串方法生成
        port: 443,
        username: `${this.data.username}`,
        password: `${this.data.password}`,
      }
      this.data.client = mqtt.connect(`${this.data.host}`, options);
      this.data.client.on("connect", () => {
        wx.hideLoading({
          success: (res) => {},
        })
        that.setData({
          isConn: true,
        })
        wx.showToast({
          title: "连接成功",
        });

        this.data.client.on("message", (topic, payload) => {
          wx.showModal({
            content: `收到消息 - Topic: ${topic}，Payload: ${payload}`,
            showCancel: false,
          });

        });

      });
    } catch (error) {
      wx.hideLoading({
        success: (res) => {},
      })
      that.setData({
        isConn: false,
      })
      wx.showToast({
        title: "连接失败",
      });
      console.log("mqtt.connect error", error);
    }
  },

断开连接方法：

  disconnect() {
    this.data.client.unsubscribe(this.data.subTopic);
    this.data.client.end();
    this.data.client = null;
    this.setData({
      isSub: false,
      isConn: false,
    })
    wx.showToast({
      title: "成功断开连接",
    });
  },

发布主题方法：

publish() {
    if (this.data.client) {
      this.data.client.publish(this.data.pubTopic, this.data.pubMsg);
      return;
    }
    wx.showToast({
      title: "请先点击连接",
      icon: "error",
    });
  },

订阅主题方法：

 subscribe() {
    if (this.data.client) {
      this.data.client.subscribe(this.data.subTopic);
      this.setData({
        isSub: true,
      })
      wx.showModal({
        content: `成功订阅主题：${this.data.subTopic}`,
        showCancel: false,
      });
      return;
    }
    wx.showToast({
      title: "请先点击连接",
      icon: "error",
    });
  },