微信小程序连接MQTT服务器实现控制Esp8266LED灯

上一篇文章已实现Esp8266开发板与MQTT服务器连接实现控制LED灯

这篇文章记录继上篇的功能接入微信小程序实现LED灯的控制

先理解一个概念:微信小程序订阅MQTT服务器一个主题,Esp8266订阅相同的主题时,

微信小程序发送给MQTT服务器的消息,Esp8266同样会接受到,意思就是微信小程序发送给MQTT服务器灯打开的命令

MQTT服务器会转发给Esp8266灯打开的命令(有点啰嗦了哈)

1.先配置服务器nginx,代码如下:

location = /mqtt {
      
        # 8083就是我们的emq的websocket的端口号
        proxy_pass http://www.域名.cn:8083;
        proxy_redirect off;
        proxy_set_header Host www.域名.cn:8083;

        proxy_set_header Sec-WebSocket-Protocol mqtt;
        
        # 这个是与你的 js客户端的库有关系,本博文的不需要,为了兼顾以后小伙伴,我这里注释了下! 
        #more_clear_headers Sec-WebSocket-Protocol;

        # 这些都是 websocket必须要配置的
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

放到80端口内即可,修改域名,其他不用改,然后重启nginx

nginx -s reload    或cd到nginx文件夹下    ./nginx -s reload

服务器放行443端口(可能不需要,有备无患。。。)

到这里微信小程序服务器这里就准备好了

2.下载微信小程序代码,地址:https://github.com/daichaodeyu/WeChat_Esp8266

下载下来后用微信开发者工具打开,先修改app.js中的域名及主题

上一篇文章中Esp8266开发板中订阅的主题是  /test/onoff/  ,app.js中也设置为  /test/onoff/  ,如图所示:微信小程序连接MQTT服务器实现控制Esp8266LED灯

保存编译小程序后,先点击连接MQTT服务器,然后点击订阅都会有相应的提示

Esp8266开发板通上电,参照上篇文章连接LED灯后即可实现LED灯的打开与关闭

参考博文:半颗心脏   https://blog.csdn.net/xh870189248/article/details/84070944

参考B站视频:https://www.bilibili.com/video/av39598869?from=search&seid=1068408118905110158

微信小程序连接MQTT服务器实现控制Esp8266LED灯

上一篇:01 Taro_Mall 开源多端小程序框架设计


下一篇:小程序开发技巧(三)-- 云开发时效数据刷新和存储 (access_token等)