物联网+mqtt+微信小程序（ESP8266+OneNET+小程序）

这篇文章主要了解ESP8266物联网小程序MQTT远程操控相关内容（ESP8266+OneNET+小程序）

MQTT通信

MQTT 是一种基于客户端服务端架构的发布/订阅模式的消息传输协议。它的设计思想是轻巧、开放、 简单、规范，易于实现。这些特点使得它对很多场景来说都是很好的选择。

mqtt有很多的关键词，这个我们只需要了解一部分就可以了

• subscribe：订阅某个主题，未来这个主题收到的消息都会发给你
• publish：发送消息给某个主题，只要是订阅了这个主题的客户端，都会收到这条消息
• Payload：发送的数据，一般数据格式为string、hex(16进制字符串)、json，这个由前后端商定
• QoS： 分为三个等级，0:最多交付一次， 1:至少交付一次， 2:只交付一次 其中，使用 QoS 0 可能丢失消息，使用 QoS 1 可以保证收到消息，但消息可能重复，使用 QoS 2 可以保证消息既不丢失也不重复。QoS 等级从低到高，不仅意味着消息可靠性的提升，也意味着传输复杂程度的提升。
• Retain：遗嘱消息，客户端订阅某个主题后，会将这个主题之前最近一次的消息发送过来。 适用场景：比如某个温度传感器，设置的每隔1个小时发送一次温度数据，刚好某个app要展示这个温度传感器数据，打开app的时候，刚好错过温度传感器上次一发送数据，正常情况下需要再等待1个小时，但是如果设置消息为Retain，app打开之后，依旧可以收到温度传感器上一次发送的数据

在管理MQTT连接方面我采用的是MQTTX，这里注意我们设置的属性名和代码中指定的符合就行了

小程序开发

想要开发微信小程序，首先要有一些基础知识：html、css、js、json等，小程序的框架和前端大体相同，一个页面包括js、json、wxml、wxss格式的文件。如果你有前端的一些经验或者是 jsp “全栈” ，那你对这方面的入门会很快很快的哦！

由于我之前没有接触过小程序开发，我将会一步步的剖析如何使用微信小程序通过MQTT服务器连接设备。使用微信开发者工具进行代码的编写，刚创建好的小程序目录是很简洁的。

• JS 脚本逻辑文件，通常是用来处理这个页面和用户的交互，比如数据的定义，功能函数的实现等
• JSON配置文件，在小程序中json扮演的静态配置的角色，最经常用的文件是app.json，用来对全局配置
• wxml文件用来描述当前这个页面的结构，比如第一个组件是按钮，第二个组件是文本框等
• wxss文件用来描述页面的样式，比如位置大小排版等

配置MQTT服务

• 需要准备一些内容：
  1. 在公网IP上搭建MQTT服务器，并且这个IP还配置了域名，且这个域名进行过ICP备案
  2. 能够连接MQTT服务器的设备

这样配置看起来有些麻烦，我们可以使用OneNET来实现数据的上传和存储。

OneNET API介绍

OneNET是中国移动旗下的物联网平台，它提供了强大的数据存储和管理能力，支持各类物联网设备的接入。通过OneNET，设备可以实现数据的上传与存储，开发者也可以利用提供的API来获取这些数据进行分析或显示，亦或是发送控制指令到远端设备。

OneNET的API基于RESTful架构，支持标准的HTTP/HTTPS协议，使得各种平台和设备都能方便地集成和使用。通过API，开发者可以实现如下功能：

• 数据上传：物联网设备可以通过API将采集到的数据上传到OneNET平台，例如温度、湿度、光照强度等传感器数据。
• 指令下发：开发者可以使用API发送指令到设备，实现远程控制，如开关灯、开关门等。

对于微信小程序开发者而言，这意味着可以通过发送HTTPS请求来与OneNET平台进行交互，无需搭建独立的服务器。小程序中的每一个用户界面，都可以嵌入对API的调用，实现数据的动态更新和设备的即时控制。

使用MQTTx客户端创建设备

• 下载连接：https://mqttx.app/zh
  • 安装完MQTTx后准备对服务器进行连接
• 配置MQTT设备参数
  • 名称可以随便填，ClientID和用户名必须填上面的设备ID
• 连接MQTT服务器
  • 我们定义了主题，向服务端发送了消息以后，服务器将消息转发给订阅了该主题的设备，包括本设备，说明MQTT连接成功

安装MQTT的客户端库

小程序是通过js开发的，因此可以使用MQTT.js作为MQTT客户端库

MQTT.js CDN地址：https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js

点开这个连接之后会看到一大串类似于乱码的内容。但这实际上不是乱码，其实是一个被压缩过的一个js文件。

我们需要复制这整个文件，到代码中的utils下面新建一个mqtt.js文件，这样，我们的文件就有mqtt这样的一个库了。

• 我们直接调用这个mqtt文件：const { connect } = require("../../utils/mqtt");
• 在data里面存在页面数据中

• Page({
  	data: {
  		client: null
  	},
  
  })

• 在onShow生命周期中进行连接

• onShow(){
  	const that = this
  	that.setData({
  		client: connect('wxs://broker.emqx.io:8084/mqtt')
  	})
  }

• 注意：
  • 这里的wxs就是wss
  • wss实际上就是拥有SSL加密通信的websocket协议
  • //broker.emqx.io:8084这里要指定域名和端口，这里直接用的OneNET云平台，都是硬件设置的
• 在EMQ的官网中，我们WebSocketSecure端口就是8084端口，这里和硬件指定的端口是不一样的，涉及到一些加密的内容没怎么详细研究，只知道这么用
• 在这里我直接上完整代码了

• onShow() {
      var that = this;
      wx.showToast({
        title: "连接服务器....",
        icon: "loading",
        duration: 10000,
        mask: true,
      });
      let second = 10;
      var toastTimer = setInterval(() => {
        second--;
        if (second) {
          wx.showToast({
            title: `连接服务器...${second}`,
            icon: "loading",
            duration: 1000,
            mask: true,
          });
        } else {
          clearInterval(toastTimer);
          wx.showToast({
            title: "连接失败",
            icon: "error",
            mask: true,
          });
        }
      }, 1000);
      that.setData({
        client: connect(mqttUrl)
      })
  
      that.data.client.on("connect", function () {
        console.log("成功连接mqtt服务器！");
        clearInterval(toastTimer);
        wx.showToast({
          title: "连接成功",
          icon: "success",
          mask: true,
        });
        // 一秒后订阅主题
        setTimeout(() => {
          that.data.client.subscribe(mpSubTopic, function (err) {
            if (!err) {
              console.log("成功订阅设备上行数据Topic!");
              wx.showToast({
                title: "订阅成功",
                icon: "success",
                mask: true,
              });
            }
          });
        }, 1000);
      });
      that.data.client.on("message", function (topic, message) {
        console.log(topic);
        // message是16进制的Buffer字节流
        let dataFromDev = {};
        // 尝试进行JSON解析
        try {
          dataFromDev = JSON.parse(message);
          console.log(dataFromDev);
          that.setData({
            //这里要写一些需要解析json的数据，就是硬件和云平台传过来的那些东西
            Hum: dataFromDev.Hum
          })
        } catch (error) {
          // 解析失败错误捕获并打印（错误捕获之后不会影响程序继续运行）
          console.group(`[${formatTime(new Date)}][消息解析失败]`)
          console.log('[错误消息]', message.toString());
          console.log('上报数据JSON格式不正确', error);
          console.groupEnd()
        }
      })
    }

  在这里，直接提取的路径和端口之类的内容，还是为了方便维护吧

• const { connect } = require("../../utils/mqtt");
  
  const mqttHost = "broker.emqx.io"; //mqtt 服务器域名/IP
  const mqttPort = 8084; //mqtt 服务器域名/IP
  
  const hefengVIP = false;
  
  const deviceSubTopic = "/myhome/sub"; //  设备订阅topic（小程序发布命令topic）
  const devicePubTopic = "/myhome/pub"; //  设备发布topic（小程序订阅数据topic）
  
  const mpSubTopic = devicePubTopic;
  const mpPubTopic = deviceSubTopic;
  
  const mqttUrl = `wxs://${mqttHost}:${mqttPort}/mqtt`;

  这些都完成了之后呢，只需要继续做完功能就可以了

  作为一个物联网小白，目前就了解这些，如果有不正确的内容，请各位大佬指正，也请你们轻点喷，呜呜呜……