你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

stm32利用mqtt与小程序通信

[复制链接]
STMCU小助手 发布时间:2022-10-16 22:09
stm32连接服务器端
本章所用到的器件如下:
STM32F103ZET6最小系统板
ESP8266-01S模块
USB转microUSB数据线
四根杜邦线
连接如下:
32板3.3v----------->ESP8266的3.3v
32板GND---------->ESP8266的GND
32板的PC10-------->ESP8266的RX
32板的PC11-------->ESP8266的TX

  在这里说明一下,由于本项目是用在其他项目上的,所以在编写此项目时,是基于另一个项目还未被使用到的串口资源进行设计的,所以我这里用了串口4。各位需根据自己硬件已有的串口资源,自行手动修改串口4初始化的函数。

  ​本项目程序是参考onenet平台上的源码进行二次开发的,onenet平台上源码的位置如下:进入onenet官网后,登录账号,在上方有一个社区->论坛,里面就有源码,点进去后就有一个链接是百度网盘的,这里我用的是OneNET标准板中的裸机基础教程->EDP例程。

3eaa322c7ba340d098d5e65c9a79ef86.png


6cde9575277f4238b6a7eae9d6c5019d.png


453801fdbcc24fb58c01654c6d1759d3.png


​  既然用到了MQTT协议,少不了要用到cJSON格式的一个文件,将cJSON.c和cJSON.h文件导入到stm32程序所在的文件夹下,接着在程序中onenet.c文件里面包含头文件cJSON.h,方便我们下面对接收到的cJSON格式的数据进行解析。

60a454561882413c9e135d241e0b90da.png


​  接下来,我们需要修改的是esp8266.c文件中的ESP8266_WIFI_INFO及ESP8266_ONENET_INFO,他们分别表示的是ESP8266需要连接的WIFI及服务器地址(修改成自己的WIFI名称、密码和服务器地址、端口号),本项目中给出了五个MQTT服务器地址,其中EMQX服务器是公有服务器,可以直接连接,至于其他三个服务器是自己在其他平台创建的私有服务器,需要用到onenet.c文件中的设备ID和密码。EMQX服务器连接的时候不需要用到设备ID和密码,所以设备ID和密码可以随便写。

2ea29e4152434a6d9ac4e7a2acae9341.png


959f20157eb240dc8a77746f1df9108d.png


​  最后,需要设置一下主题的发布和订阅,对于公有服务器来说,是没有主题前缀的,而对于私有服务器来说,他有平台自带的主题前缀。 此项目中连接的是EMQX的服务器,是不需要主题前缀的,所以这里我随便写了一个发布主题和订阅主题(同时这两个主题也可用于我创建的私有服务器的设备相对应的主题)。

31c485dd56364a24b3ee2e80c96f1222.png


​  至此,stm32部分的程序已经搞好了,接下来进行小程序部分的制作。

小程序连接服务器
​  先上小程序的效果展示图
ef03ad84687344d0bef3551db07d271a.png



​  此项目的小程序我没有用过任何框架,都是使用微信原生框架进行开发,其中首页涉及到天气数据的获取,这里请求的天气数据API接口采用的是和风天气开发平台上的Web API接口,其链接如下:和风天气开发平台
​​  要请求该平台上面的API接口,需要在该平台上登录账号,然后进入控制台,在上面创建一个应用(目的是获取到一个KEY),如下所示:

fcd7d662c2014fd3ac4489f303b2ca14.png


​  接着到该平台的开发文档->天气数据Web API开发文档中去找对应的请求地址,上面清楚的写了该地址的格式及请求的参数等信息,下面是小程序端的获取天气数据的自定义函数:

  1. weahterdata:function(){
  2.     var that=this
  3.     wx.getLocation({//获取位置(经纬度)API
  4.       type: 'wgs84',
  5.       success (res) {
  6.         const latitude = res.latitude
  7.         const longitude = res.longitude
  8.         const key="432a8840589546338cae4c5a825f47db"//和风天气开发平台上控制台创建的应用得到的KEY,只有得到这个,才能获取各种数据
  9.         wx.request({//网络请求API
  10.           //下面使用模板字符串
  11.           //获取天气数据的API接口地址
  12.           url: `<a href="https://devapi.qweather.com/v7/weather/now?location=" target="_blank">https://devapi.qweather.com/v7/weather/now?location=</a>${longitude},${latitude}&key=${key}`,
  13.           success (res) {
  14.             const weather_data=res.data.now
  15.             const weather=weather_data.text //解构赋值
  16.             that.setData({
  17.               weather
  18.             })
  19.           }
  20.         })
  21.         wx.request({
  22.           //获取地点的API接口地址
  23.           url: ,
  24.           success (res) {
  25.             const location=res.data.location[0]  
  26.             const {adm2, name}=location     //解构赋值
  27.             that.setData({
  28.               city:adm2,
  29.               area:name
  30.             })
  31.           }
  32.         })
  33.         wx.request({
  34.           //获取空气质量的API接口地址
  35.           url: `<a href="https://devapi.qweather.com/v7/air/now?location=" target="_blank">https://devapi.qweather.com/v7/air/now?location=</a>${longitude},${latitude}&key=${key}`,
  36.           success (res) {
  37.             const air=res.data.now  
  38.             const {aqi, category}=air       //解构赋值
  39.             that.setData({
  40.               aqi,
  41.               airText:category
  42.             })
  43.           }
  44.         })

  45.         wx.request({
  46.           //获取生活质量的API接口地址
  47.           url:<a href="https://devapi.qweather.com/v7/indices/1d?type=3&location=" target="_blank">type=3&location=</a>${longitude},${latitude}&key=${key}`,
  48.           success (res) {
  49.             const {text}=res.data.daily[0]  //解构赋值
  50.             that.setData({
  51.               weatherAdvice:text
  52.             })
  53.           }
  54.         })
  55.       }
  56.      })
  57.   }
复制代码

​  接下来是小程序端的MQTT连接部分,首先需要导入一个连接服务器的库,这个库叫mqtt.min.js。该库的地址如下:mqtt.min.js文件
​  下载后,直接在小程序中建一个文件夹存放解压出来的文件,其中有两个文件分别为mqtt.js、mqtt.min.js,在小程序的js文件中只需引用mqtt.min.js文件即可,详细的引用代码及具体的自定义函数如下所示:(如果连接的是私有服务器需要多修改设备ID和密码,否则只需修改连接的服务器地址及端口号):

  1. var mqtt=require("../../utils/mqtt.min.js")
  2. var client=null
  3. Page({
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {

  8.   },

  9.   onLoad(){
  10.     this.connectmqtt()
  11.   },

  12.   connectmqtt:function(){
  13.     var that=this;//this是指外层的对象,如果在这里进行提取,后面进入函数后,他的this就是connectmqtt函数的对象
  14.     /*杰叔叔、EMQX专用*/
  15.     const options={
  16.       connectTimeout:4000,
  17.       clientId:"zsd", //此变量随便写
  18.       port:8084,
  19.       //杰叔叔的服务器是私有,所以需要账号和密码,而EMQX的免费服务器不需要账号密码
  20.       username:"f6d61178afa1003ac5d41dc9ae10f0c6",
  21.       password:"123123"
  22.     }
  23.     /*腾讯云MQTT服务器专用*/
  24.     /*  const options={
  25.       connectTimeout:4000,
  26.       clientId:"zsd", //此变量随便写
  27.       port:80,
  28.       username:"S2ME0J3F8Xtest1;12010126;bee9c;1656302400000",
  29.       password:"d58ce11e6725c4de9549c61d564f8bc0c7211707642ae92c63dd94b27943f85e;hmacsha256"
  30.     }*/
  31.     /*百度云MQTT服务器专用*/
  32.     /*  const options={
  33.       connectTimeout:4000,
  34.       clientId:"zsd", //此变量随便写
  35.       port:443,
  36.       username:"thingidp@acwbepc|test2|0|SHA256",
  37.       password:"6fac92df9ce9cb5839cf95da0c0d8f60e3d5d333fff8b7d85bcaf5b5e71d8517"
  38.     }*/
  39.           /*小程序连接远程服务器时,用wxs(wss)加密连接出去,其他客户端工具,
  40.                   例如emqx在线测试工具可以使用wss协议连接服务器一;mqttbox软件也可以使用mqtt/tcp协议连接服务器一
  41.                   原因是因为服务器支持这些协议,本质上wss、mqtt都是基于tcp进行封装的
  42.                   实际上下面借助wxs协议连接服务器一,而其他工具也是借助服务器支持的协议进行连接,然后就可以进行数据的传输
  43.             如果连接的协议是ws或wss,需要在服务器地址后面加上/mqtt,如果不是前面这两个协议的地址,则直接连接服务器地址即可*/
  44.     //client=mqtt.connect("wxs://t.yoyolife.fun/mqtt", options)杰叔叔的服务器地址(wss协议需加上mqtt路径)
  45.     client=mqtt.connect("wxs://broker-cn.emqx.io/mqtt", options)//EMQX的服务器地址(wss协议需加上mqtt路径)
  46.     //client=mqtt.connect("wxs://broker.emqx.io/mqtt", options)//EMQX的服务器地址(wss协议需加上mqtt路径)
  47.     //client=mqtt.connect("wxs://S2ME0J3F8X.ap-guangzhou.iothub.tencentdevices.com/mqtt", options)//腾讯云服务器地址(wss协议需加上mqtt路径)
  48.     //client=mqtt.connect("wxs://acwbepc.iot.gz.baidubce.com/mqtt", options)//百度云服务器地址(wss协议需加上mqtt路径)
  49.     client.on("connect",(e)=>{
  50.       console.log("服务器连接成功");
  51.       client.subscribe("/iot/1009/zsd2", {qos:0}, function(err){//杰叔叔的服务器需要主题前缀、EMQX服务器不需要主题前缀
  52.         if(!err){
  53.           console.log("订阅成功");
  54.         }
  55.       })
  56.     /*  client.subscribe("S2ME0J3F8X/test1/data", {qos:0}, function(err){//腾讯云服务器需要主题前缀
  57.         if(!err){
  58.           console.log("订阅成功");
  59.         }
  60.       })*/
  61.     /*  client.subscribe("$iot/test2/user/test2", {qos:0}, function(err){//百度云服务器需要主题前缀
  62.         if(!err){
  63.           console.log("订阅成功");
  64.         }
  65.       })*/
  66.     })
  67.     //信息监听事件
  68.     client.on("message", function(topic, message){
  69.       let tem=JSON.parse(message)
  70.       console.log(tem);
  71.       that.setData({
  72.         temp:tem.a,
  73.         humi:tem.b
  74.       })
  75.       console.log("收到"+message.toString());
  76.     })
  77.     //发送reconnect类型给服务器,一旦连接中断,就会触发重新连接
  78.     client.on("reconnect", (err)=>{
  79.       console.log("正在重新连接",err);
  80.     })
  81.     client.on("error", (err)=>{
  82.       console.log("连接失败",err);
  83.     })
  84.   }

  85. })
复制代码

​  至此,小程序部分的天气数据获取和MQTT连接已经基本完成,至于界面的优化,那就需要各位去学习小程序的界面优化啦。
————————————————
版权声明:i土豆


收藏 评论0 发布时间:2022-10-16 22:09

举报

0个回答

所属标签

相似分享

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版