stm32连接服务器端
本章所用到的器件如下：
/ m) B. w: X7 g# \+ t: m4 e  SSTM32F103ZET6最小系统板
9 S# }1 G- H* E/ d: ]ESP8266-01S模块
( ?2 z7 S) Z6 D  F& CUSB转microUSB数据线
四根杜邦线
% T& \" _0 g7 \% p  E7 k  d$ L8 ?连接如下：
- h3 ~* Z0 b8 p' n* t32板3.3v----------->ESP8266的3.3v
32板GND---------->ESP8266的GND
: w+ n  H' I- Z, K% v$ _32板的PC10-------->ESP8266的RX
32板的PC11-------->ESP8266的TX

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

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

( ?( i+ V. x* ~2 ?

! l2 [2 l$ D* I; i2 s

3 X* h1 R7 _+ ^+ M" A" t) S​  既然用到了MQTT协议，少不了要用到cJSON格式的一个文件，将cJSON.c和cJSON.h文件导入到stm32程序所在的文件夹下，接着在程序中onenet.c文件里面包含头文件cJSON.h，方便我们下面对接收到的cJSON格式的数据进行解析。
- y4 {0 z; n' x  N& s

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

; K* I- R% v& |! C$ {& ~7 s

- _- l8 a* a+ H2 M9 f, n
5 q( n. C8 V% B) k4 o​  最后，需要设置一下主题的发布和订阅，对于公有服务器来说，是没有主题前缀的，而对于私有服务器来说，他有平台自带的主题前缀。 此项目中连接的是EMQX的服务器，是不需要主题前缀的，所以这里我随便写了一个发布主题和订阅主题(同时这两个主题也可用于我创建的私有服务器的设备相对应的主题)。
; P3 W$ ]) f7 t

6 F& b, z; n- W( e2 p2 ^0 W- q- G1 o. U​  至此，stm32部分的程序已经搞好了，接下来进行小程序部分的制作。

; V% b; J# ]2 N) \4 t$ E小程序连接服务器
3 a4 ]) G& M2 O& Q% M​  先上小程序的效果展示图
1 P+ a$ |9 q$ ]  Z# {2 W" R2 f; {1 C; K: y

& @% l$ |' b6 [8 t+ u

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

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

1. weahterdata:function(){
   & n9 i( C: q# U$ `2 F
2.     var that=this
   1 n4 K9 z0 \  R* C- Z
3.     wx.getLocation({//获取位置(经纬度)API
   
4.       type: 'wgs84',
   
5.       success (res) {
   
6.         const latitude = res.latitude
   ; k0 ]$ H  \5 V+ Q( L! ^2 v
7.         const longitude = res.longitude
   
8.         const key="432a8840589546338cae4c5a825f47db"//和风天气开发平台上控制台创建的应用得到的KEY，只有得到这个，才能获取各种数据
   
9.         wx.request({//网络请求API
   
10.           //下面使用模板字符串
    
11.           //获取天气数据的API接口地址
    2 ~- F. i( u; [' [7 {: T
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) {
    7 s4 M8 C, f  z, v2 P* ]
14.             const weather_data=res.data.now
    
15.             const weather=weather_data.text //解构赋值
    
16.             that.setData({
    " b$ @* g/ a/ h9 {1 q
17.               weather
    ( R: V1 J' k( Y- G: S0 S: @0 o
18.             })
    
19.           }
    + |0 X2 |" h. d7 Z
20.         })
    
21.         wx.request({
    
22.           //获取地点的API接口地址
      {6 A: E) Q7 F3 @( b
23.           url: ,
    
24.           success (res) {
    ' P$ q+ ?% _5 @& T5 l4 W2 @6 l6 f' [$ S
25.             const location=res.data.location[0]  
    % Z7 k6 A. [9 j4 Q, Z- P
26.             const {adm2, name}=location     //解构赋值
    
27.             that.setData({
    
28.               city:adm2,
    
29.               area:name
    
30.             })
    & @  W1 b: U) X, W
31.           }
    
32.         })
    6 {$ v3 W' T4 S3 [8 X2 t8 {8 Y
33.         wx.request({
    , K& ]  H1 B/ l
34.           //获取空气质量的API接口地址
    # e/ @( X# O4 o* J& V
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}`,
    9 N9 ~8 D& h# E& F& Z  W9 L
36.           success (res) {
    
37.             const air=res.data.now  
    ' e+ f8 U+ z1 N7 z
38.             const {aqi, category}=air       //解构赋值
    1 p' a! I% j$ M$ m5 W# H
39.             that.setData({
    
40.               aqi,
    + N6 J# c3 |# S" K6 X( Z3 Z4 \  b
41.               airText:category
    4 a4 x# K  o+ o3 N- M
42.             })
    5 @& F$ l9 @. J+ T0 ~: m
43.           }
    
44.         })
    ( h+ D3 @2 U# |
45. 
    
46.         wx.request({
    
47.           //获取生活质量的API接口地址
    
48.           url:<a href="https://devapi.qweather.com/v7/indices/1d?type=3&location=" target="_blank">type=3&location=</a>${longitude},${latitude}&key=${key}`,
    ) S$ w2 X+ d6 T8 j
49.           success (res) {
    
50.             const {text}=res.data.daily[0]  //解构赋值
    
51.             that.setData({
    4 H/ D/ t9 z- |; l
52.               weatherAdvice:text
    9 ~" k- [8 V1 B6 V
53.             })
    " p3 T4 I$ ~! ]- n* L, a/ j7 X
54.           }
    
55.         })
    * R8 o# @* J+ ^" I& B' X2 h
56.       }
    
57.      })
      t+ O8 c! A- J3 T( b
58.   }

复制代码

  T& f; R/ j1 X( F- I( B​  接下来是小程序端的MQTT连接部分，首先需要导入一个连接服务器的库，这个库叫mqtt.min.js。该库的地址如下：mqtt.min.js文件
: a  e0 O8 q' B' B; e! E4 U% h# V6 _​  下载后，直接在小程序中建一个文件夹存放解压出来的文件，其中有两个文件分别为mqtt.js、mqtt.min.js，在小程序的js文件中只需引用mqtt.min.js文件即可，详细的引用代码及具体的自定义函数如下所示：(如果连接的是私有服务器需要多修改设备ID和密码，否则只需修改连接的服务器地址及端口号)：

1. var mqtt=require("../../utils/mqtt.min.js")
   ! E3 h! {' C  o" |% v! @
2. var client=null
   # ?* G+ f9 q& y: x- u# d
3. Page({
   4 I2 Q5 i" t0 Q
4.   /**
   . T4 j$ S7 D. y' }+ I
5.    * 页面的初始数据
   3 q% v/ L# ^4 u) l+ k/ f
6.    */
   ) ~6 L) \4 Q4 e
7.   data: {
   9 c& F+ D$ F8 Y! d
8. 
   + Y2 G& A5 ]6 j8 c# n
9.   },
   , X$ b$ N0 O1 Y7 j! Y
10. 
    
11.   onLoad(){
    
12.     this.connectmqtt()
    
13.   },
    6 N8 P/ _5 y8 }. l
14. 
    5 p. I# |& b# a8 U( b+ g3 ~& |
15.   connectmqtt:function(){
    
16.     var that=this;//this是指外层的对象，如果在这里进行提取，后面进入函数后，他的this就是connectmqtt函数的对象
    
17.     /*杰叔叔、EMQX专用*/
    
18.     const options={
    % u& @# l# U, P4 `& M& f
19.       connectTimeout:4000,
    & X7 m; H- H* C3 Y5 e8 E, C! r1 n, b, U
20.       clientId:"zsd", //此变量随便写
    5 @1 g' V  C4 a+ \6 ]( i4 s, h
21.       port:8084,
    
22.       //杰叔叔的服务器是私有，所以需要账号和密码，而EMQX的免费服务器不需要账号密码
    
23.       username:"f6d61178afa1003ac5d41dc9ae10f0c6",
    2 \# D$ w! C- H+ _
24.       password:"123123"
    
25.     }
    4 b+ z. V7 ^/ S$ \8 a( ?3 w5 e
26.     /*腾讯云MQTT服务器专用*/
    + z9 P( g/ ~+ H2 V  `* x) I
27.     /*  const options={
    % ]8 F! f; z& ^0 M+ c
28.       connectTimeout:4000,
    : k9 T! q4 y1 l2 u5 a, Q
29.       clientId:"zsd", //此变量随便写
    5 V/ y: K: e6 }1 }: H& m6 A
30.       port:80,
    $ w% K! m, S! W/ b. \
31.       username:"S2ME0J3F8Xtest1;12010126;bee9c;1656302400000",
    , |+ v9 ^# a4 B3 |! c2 H( Z# d/ P
32.       password:"d58ce11e6725c4de9549c61d564f8bc0c7211707642ae92c63dd94b27943f85e;hmacsha256"
    
33.     }*/
    6 Z: J( G1 v; c$ O) t0 r
34.     /*百度云MQTT服务器专用*/
    8 d: `; E9 u6 s( z4 x
35.     /*  const options={
    
36.       connectTimeout:4000,
      Y7 b2 O' [, X" P
37.       clientId:"zsd", //此变量随便写
    4 {8 H) ?3 o" Y" F  R5 t& T
38.       port:443,
    
39.       username:"thingidp@acwbepc|test2|0|SHA256",
    
40.       password:"6fac92df9ce9cb5839cf95da0c0d8f60e3d5d333fff8b7d85bcaf5b5e71d8517"
    
41.     }*/
    ' ]) r2 @0 u  H, o; U- A8 M0 }3 r! [% o
42.           /*小程序连接远程服务器时，用wxs(wss)加密连接出去，其他客户端工具，
    / Q  p# y+ t9 Q& A
43.                   例如emqx在线测试工具可以使用wss协议连接服务器一；mqttbox软件也可以使用mqtt/tcp协议连接服务器一
    6 e5 \0 @0 l$ j( G9 x! u. W" Z
44.                   原因是因为服务器支持这些协议，本质上wss、mqtt都是基于tcp进行封装的
    ( v) B2 k! X  G' c; C1 d. g
45.                   实际上下面借助wxs协议连接服务器一，而其他工具也是借助服务器支持的协议进行连接，然后就可以进行数据的传输
    
46.             如果连接的协议是ws或wss，需要在服务器地址后面加上/mqtt,如果不是前面这两个协议的地址，则直接连接服务器地址即可*/
    
47.     //client=mqtt.connect("wxs://t.yoyolife.fun/mqtt", options)杰叔叔的服务器地址(wss协议需加上mqtt路径)
    : ]/ j! U  q2 ?' o1 C
48.     client=mqtt.connect("wxs://broker-cn.emqx.io/mqtt", options)//EMQX的服务器地址(wss协议需加上mqtt路径)
    
49.     //client=mqtt.connect("wxs://broker.emqx.io/mqtt", options)//EMQX的服务器地址(wss协议需加上mqtt路径)
    
50.     //client=mqtt.connect("wxs://S2ME0J3F8X.ap-guangzhou.iothub.tencentdevices.com/mqtt", options)//腾讯云服务器地址(wss协议需加上mqtt路径)
    
51.     //client=mqtt.connect("wxs://acwbepc.iot.gz.baidubce.com/mqtt", options)//百度云服务器地址(wss协议需加上mqtt路径)
    
52.     client.on("connect",(e)=>{
    : ~4 w5 }7 |% k+ c/ T, ?7 A
53.       console.log("服务器连接成功");
    ! ?" Y- b6 U/ A# E8 @. N
54.       client.subscribe("/iot/1009/zsd2", {qos:0}, function(err){//杰叔叔的服务器需要主题前缀、EMQX服务器不需要主题前缀
    
55.         if(!err){
    
56.           console.log("订阅成功");
    - N& _' O0 L- l, c+ y
57.         }
    
58.       })
    6 g6 h6 `8 ?; Q- E; }
59.     /*  client.subscribe("S2ME0J3F8X/test1/data", {qos:0}, function(err){//腾讯云服务器需要主题前缀
    
60.         if(!err){
    
61.           console.log("订阅成功");
    
62.         }
    # N2 O( F9 e0 S# M/ g' c
63.       })*/
    1 e) D. t0 q, |- y5 T, Y
64.     /*  client.subscribe("$iot/test2/user/test2", {qos:0}, function(err){//百度云服务器需要主题前缀
    5 _: t+ f% C% s% m- M; }3 K. d/ Q
65.         if(!err){
    
66.           console.log("订阅成功");
    4 c3 o$ m. ]) i# ~' I3 \$ e7 U
67.         }
    9 x* l/ C. L" r2 [. Q& O6 F
68.       })*/
    
69.     })
    6 C) @/ n" V5 {9 |3 s
70.     //信息监听事件
    
71.     client.on("message", function(topic, message){
    7 {- ^6 H4 [* G4 k
72.       let tem=JSON.parse(message)
    
73.       console.log(tem);
    ; Q" ^/ U- }5 t4 D8 d
74.       that.setData({
    
75.         temp:tem.a,
    6 s/ S2 r/ \7 b9 f  G0 g( h6 V
76.         humi:tem.b
    
77.       })
    8 N2 R/ Y& B5 Z* m4 p8 z
78.       console.log("收到"+message.toString());
    . r/ `& H. I! {7 l* J& m9 K1 G
79.     })
    ) g' w4 n. a5 O. T
80.     //发送reconnect类型给服务器，一旦连接中断，就会触发重新连接
    # N: F& _# t& \
81.     client.on("reconnect", (err)=>{
    
82.       console.log("正在重新连接",err);
    7 L7 N3 x5 l! v1 D% b7 N
83.     })
    
84.     client.on("error", (err)=>{
    
85.       console.log("连接失败",err);
    : R4 I+ K9 P4 v4 ]7 Y8 {& v5 S
86.     })
    
87.   }
    
88. 
    
89. })
    * o) N0 l: I) f0 O

复制代码

​  至此，小程序部分的天气数据获取和MQTT连接已经基本完成，至于界面的优化，那就需要各位去学习小程序的界面优化啦。
3 H0 O4 P, Z. k————————————————
版权声明：i土豆
% T5 w+ s; ?4 o+ R) T* B! N
  A" ], F3 s/ K# N1 d) C9 [
7 j/ w9 v3 v# y9 u; W$ r4 A+ J