物联网+mqtt+微信小程序（ESP8266+OneNET+小程序） |
您所在的位置：网站首页 › 微信小程序websocket数据解析 › 物联网+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/[email protected]/dist/mqtt.min.js 点开这个连接之后会看到一大串类似于乱码的内容。但这实际上不是乱码，其实是一个被压缩过的一个js文件。 我们需要复制这整个文件，到代码中的utils下面新建一个mqtt.js文件，这样，我们的文件就有mqtt这样的一个库了。 我们直接调用这个mqtt文件：const { connect } = require("../../utils/mqtt");在data里面存在页面数据中代码语言：js复制Page({ data: { client: null }, })在onShow生命周期中进行连接代码语言：js复制onShow(){ const that = this that.setData({ client: connect('wxs://broker.emqx.io:8084/mqtt') }) }注意：这里的wxs就是wsswss实际上就是拥有SSL加密通信的websocket协议//broker.emqx.io:8084这里要指定域名和端口，这里直接用的OneNET云平台，都是硬件设置的在EMQ的官网中，我们WebSocketSecure端口就是8084端口，这里和硬件指定的端口是不一样的，涉及到一些加密的内容没怎么详细研究，只知道这么用在这里我直接上完整代码了代码语言：js复制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() } }) }在这里，直接提取的路径和端口之类的内容，还是为了方便维护吧 代码语言：js复制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`;这些都完成了之后呢，只需要继续做完功能就可以了 作为一个物联网小白，目前就了解这些，如果有不正确的内容，请各位大佬指正，也请你们轻点喷，呜呜呜…… |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |