物联网+mqtt+微信小程序（ESP8266+OneNET+小程序）
原创物联网+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服务
- 需要准备一些内容：
- 在公网IP上搭建MQTT服务器，并且这个IP还配置了域名，且这个域名进行过ICP备案
- 能够连接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`;这些都完成了之后呢，只需要继续做完功能就可以了
作为一个物联网小白，目前就了解这些，如果有不正确的内容，请各位大佬指正，也请你们轻点喷，呜呜呜……
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。