【微信小程序控制硬件①】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件!

      微信物联网生态主要分在微信硬件开发平台腾讯物联开发平台,前者已经停止维护,但依然有着很大的学习价值,而后者作为主推的平台,集成很多功能,包括从微信小程序实现配网到控制;

      为了兼顾更多的朋友和自己的学习笔记,我将会一直更新此专题笔记,欢迎关注本人CSDN半颗心脏,带你走进前沿领域,学习前沿技术!

自搭微信服务器&&微信硬件开发平台

微信小程序控制硬件第1篇 】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件!
微信小程序控制硬件第2篇 】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证和通讯于服务器!
微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目,自定义通讯协议,为面试职位和比赛项目加分!
微信小程序控制硬件第4篇 】 深度剖析微信公众号配网 Airkiss 原理与过程,esp8266如何自定义回调参数给微信,实现绑定设备第一步!
微信小程序控制硬件第5篇 】理清接下来必须走的架构思想,学习下 JavaScript 的观察者模式,在微信小程序多页面同时接收到设备推送事件!
微信小程序控制硬件第6篇 】服务器如何集成七牛云存储SDK,把用户自定义设备图片存储在第三方服务器!
微信小程序控制硬件第7篇 】动起来做一个微信小程序Mqtt协议控制智能硬件的框架,为自己心里全栈工程师梦想浇水!!
微信小程序控制硬件第8篇 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器,封装起来使用就是这么简单!
微信小程序控制硬件第9篇 】巧借阿里云物联网平台的免费连接,从微信小程序颜色采集控制 esp8266 输出七彩灯效果,中秋节来个直播如何?!
微信公众号控制硬件 第10篇 】如何在微信公众号网页实现连接mqtt服务器教程!!
微信小程序控制硬件 第11篇 】全网首发,微信小程序ble蓝牙控制esp32,实现无需网络也可以控制亮度开关。
微信小程序控制硬件 第12篇 】微信小程序蓝牙控制硬件应如何开发?为您全面解析微信小程序蓝牙API的使用。
微信小程序控制硬件 第13篇 】安信可B站直播学习总结,微信小程序MQTT远程控制ESP8266 NodeMCU,谈谈微信生态那些事。

腾讯物联开发平台

腾讯连连 - 腾讯物联开发平台 第1篇 】腾讯官方静鸡鸡发布的“腾讯连连”终于来了,按照官方教程教你在微信小程序实现配网、控制 ESP8266啦!
腾讯连连 - 腾讯物联开发平台 第2篇 】深度解析微信小程序smartconfig配网原理,安信可ESP-12S直连腾讯物联开发平台!!

在这里插入图片描述


一、前言;

  • 从去年开始自学前端,到今年的服务器的学习,也算是自己的一大进步了!这几天开始搭建小程序的服务器,琢磨了三天的Nginx中间消息插件,期间也是不睡午觉!也许入门Nginx,和大家一样期间踩了很多坑!微信小程序也仅仅只有websocket协议的说明,但是已经不维护了!

  • 希望你可以静心看看本篇文章,可以帮助你跳过搭建微信小程序的mqtt服务器的坑,不管你是用emq作为服务器,还是其他的服务器程序代码!

  • 本文搭建好了之后,就可以在微信小程序上实现控制智能硬件,即为连接mqtt服務器。像现在最为流行的esp8266esp32!废话不多说,Let us go !

  • 本博文才有的 emq 版本是 2.3 !!


二、准备材料;


  • 【必要具备】一个备案成功的域名 + 配置的 SSL证书! 证书可以是免费的,或者您是老板可以买个收费的!

  • 【必要具备】一个服務器,可以是腾讯服务器,或者是阿里云服务器,而本文用的是阿里云服务器!因为双十一刚刚搞活动,一百多块买了一年服务器!呵呵!

  • 【必要具备】关于微信小程序的源码,下篇就会开源免费赠送给大家!!

  • 【其他】 SecureCRT远程命令连接工具!当然还有微信小程序开发工具,这些自己去下载吧!


三、实现的过程和原理;


Created with Raphaël 2.2.0 Nginx环境搭建 mqtt服务器搭建 Nginx监听443端口,代理到mqtt服务器!
  • 总所周知,小程序的架构是用基本前端代码实现的,就是wxml+wcss+js+json,而我们的在js上面实现Mqtt协议通讯,那么就离不开webSocket,微信对于webSocket的连接定义,我总结了一下:

① 连接的端口号必须是443,也就是https的访问端口;
② 连接时候,不能携带端口号,就是不能在URL中注明443端口!比如正确的写法是wss://www.xuhong.com,而不能是wss://www.xuhong.com:443!!切记!


  • 关于Nginx的知识,我也是刚刚入门,如果大家想深入学,可以去慕课网有一门实战专门讲解Nginx这个强大的消息中间件!下面列下常见的命令和知识!
    • 源码安装Nginx的 配置文件默认在 /usr/local/nginx/conf 里面的 nginx.conf文件!
    • ./nginx - t : 表示检测 nginx.conf文件的语法是否有问题!
    • ./nginx - s reload : 表示重新加载 nginx.conf文件!
    • ./nginx - s quit : 表示强制或正常退出 Nginx 服务!
    • ./nginx : 表示开启 Nginx 服务!

四、服务器配置;


  • 下面是服务器配置的详细步骤,千万不要眨眼!!注意每个标题是个命令!

4.1 yum update

  • 更新我们的 yum 源!

4.2 yum -y install gcc automake autoconf libtool make

  • 安装 make工具 ,成功如下;

在这里插入图片描述


4.3 yum install gcc gcc-c++

  • 安装g++ ,成功如下;

在这里插入图片描述


4.4 yum install pcre pcre-devel

  • 安装pcre正则表达式,因为nginx的rewrite模块和http核心模块都是使用它 ,成功如下;

在这里插入图片描述


4.5 wget http://nginx.org/download/nginx-1.9.9.tar.gz

  • 获取 nginx,成功如下;

在这里插入图片描述


4.6 tar -vzxf nginx-1.9.9.tar.gz

  • 解压 nginx

4.7 cd nginx-1.9.9.tar.gz && ./configure

  • 先使配置文件nginx生效;

在这里插入图片描述


4.8 yum install zlib zlib-devel

  • zlib提供压缩算法,nginx很多地方都会用到;
    在这里插入图片描述

4.9 yum install openssl openssl-devel

  • 用到安全页面,所以需要 OpenSSL库;

在这里插入图片描述


4.10 wget https://codeload.github.com/openresty/headers-more-nginx-module/tar.gz/v0.33

  • 据说这个可以适配某些JS的webSocket协议头的库,这里也下载吧;本博文不会用到,但是大家可能会用到!之后注意解压:tar -vzxf headers-more-nginx-module-0.33.tar.gz

在这里插入图片描述


4.11 ./configure --prefix=/usr/local/nginx --add-module=/root/nginx-1.9.9/headers-more-nginx-module-0.33 --with-http_stub_status_module --with-http_ssl_module

  • 添加模块openSSLheaders-more-nginx-module-0.33

在这里插入图片描述


4.12 make && make install

  • 开始编译nginx代码;

在这里插入图片描述


4.13 cd /usr/local/nginx/sbin && ./nginx -V

  • 编译nginx代码后会有/usr/local/nginx目录,我们查看当前编译后有哪些模块生效了;看到下面有2个模块执行成功了!

在这里插入图片描述


4.14 wget https://www.emqx.io/static/brokers/emqttd-centos7-v2.3.11.zip --no-check-certificate

  • 无校验方式获取emq压缩包,如果不加--no-check-certificate可能是失败!

在这里插入图片描述


4.15 yum install unzip -y

  • 新增zip的解压工具,用来解压emq的压缩包!

在这里插入图片描述


4.16 unzip emqttd-centos7-v2.3.11.zip

  • 解压压缩包emq

在这里插入图片描述


4.17 cd /root/emq/emqttd/bin && ./emqttd console

  • 执行服务器emq

4.18 cd /root/emq/emqttd/bin && ./emqttd start

  • 守护进程开始emq

在这里插入图片描述


4.19 cd /usr/local/nginx/conf && vim nginx.conf

  • 修改nginx的配置文件!根据你的实际情况来定,添加如下代码!
  • 其中www.domain.com是您的备案后域名, ssl_certificatessl_certificate_key对应的文件位置根据你的实际而定,注意这个是你配置域名的证书的信息!这个向证书生产方索取!!!
server {
    listen 443;
    server_name www.domain.com; 
    
    ssl on;
    ssl_certificate /root/myCert/cert/cert.crt;
    ssl_certificate_key /root/myCert/cert/cert.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    location / {
        root   html; 
        index  index.html index.htm;
    }

    location = /mqtt {
      
        # 8083就是我们的emq的websocket的端口号
        proxy_pass http://www.domain.com:8083;
        proxy_redirect off;
        proxy_set_header Host www.domain.com: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";
        }
}

在这里插入图片描述


4.20 cd /usr/local/nginx/sbin&& ./nginx -t

  • 查看配置文件语法有问题?

在这里插入图片描述


4.20 cd /usr/local/nginx/sbin&& ./nginx -s reload

  • 重新加载配置文件!

三、小程序端连接效果;


  • 下篇将介绍怎么配置小程序端的代码!欢迎收藏本页面哦!

在这里插入图片描述

另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈!

  • 玩转esp8266带你飞、加群QQ群,不喜的朋友勿喷勿加:434878850
  • 个人邮箱:xuhongv@yeah.net 24小时在线,有发必回复!
  • esp8266源代码学习汇总(持续更新,欢迎star):https://github.com/xuhongv/StudyInEsp8266
  • esp32源代码学习汇总(持续更新,欢迎star):https://github.com/xuhongv/StudyInEsp32
  • 关注下面微信公众号二维码,干货多多,第一时间推送!

在这里插入图片描述

  • 66
    点赞
  • 313
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 23
    评论
要在微信小程序中连接到MQTT服务器控制ESP8266 LED灯,需要进行以下几个步骤: 1. 搭建MQTT服务器 可以选择自己搭建一台MQTT服务器,或者使用第三方的MQTT服务器提供商,例如EMQ X, HiveMQ等。在这里我们以EMQ X为例,按照官方文档进行安装和配置。 2. 在小程序中引入MQTT.js 使用MQTT.js库实现与MQTT服务器的连接和数据通信。可以通过npm或者直接下载在项目中使用。 3. 连接MQTT服务器 使用MQTT.js库提供的mqtt.connect()方法连接到MQTT服务器,需要指定MQTT服务器的IP地址和端口号。例如: ```javascript var mqtt = require('mqtt') var client = mqtt.connect('mqtt://localhost:1883') ``` 4. 发布消息 使用MQTT.js库提供的client.publish()方法向MQTT服务器发布消息。例如: ```javascript client.publish('topic', 'hello world') ``` 在这里,‘topic’是消息的主题,‘hello world’是消息的内容。 5. 订阅主题 使用MQTT.js库提供的client.subscribe()方法订阅MQTT服务器上的特定主题。例如: ```javascript client.subscribe('topic') ``` 6. 接收消息 使用MQTT.js库提供的client.on()方法监听MQTT服务器发送过来的消息。例如: ```javascript client.on('message', function (topic, message) { // message is Buffer console.log(message.toString()) client.end() }) ``` 7. 控制ESP8266 LED灯 在ESP8266上运行一个MQTT客户端程序,订阅特定的主题,可以接收来自MQTT服务器发布的消息。根据接收到的消息控制LED灯的开关状态。例如: ```c++ #include <PubSubClient.h> #include <WiFiClient.h> const char* ssid = "your_SSID"; const char* password = "your_PASSWORD"; const char* mqtt_server = "mqtt_server_IP_address"; const char* clientID = "ESP8266Client"; const char* topic = "led"; int led = 2; WiFiClient espClient; PubSubClient client(espClient); void setup() { pinMode(led, OUTPUT); Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); client.setServer(mqtt_server, 1883); client.setCallback(callback); while (!client.connected()) { Serial.println("Connecting to MQTT Broker..."); if (client.connect(clientID)) { Serial.println("Connected to MQTT Broker"); client.subscribe(topic); } else { Serial.print("MQTT connection failed with state "); Serial.println(client.state()); delay(2000); } } } void callback(char* topic, byte* payload, unsigned int length) { Serial.print("Message arrived ["); Serial.print(topic); Serial.print("] "); for (int i = 0; i < length; i++) { Serial.print((char)payload[i]); } Serial.println(); if ((char)payload[0] == '1') { digitalWrite(led, HIGH); } else if ((char)payload[0] == '0') { digitalWrite(led, LOW); } } void loop() { if (!client.connected()) { reconnect(); } client.loop(); } void reconnect() { while (!client.connected()) { Serial.println("Connecting to MQTT Broker..."); if (client.connect(clientID)) { Serial.println("Connected to MQTT Broker"); client.subscribe(topic); } else { Serial.print("MQTT connection failed with state "); Serial.println(client.state()); delay(2000); } } } ``` 在上面的代码中,订阅了一个名为‘led’的主题,当接收到‘1’时,将LED灯打开;当接收到‘0’时,将LED灯关闭。 8. 在小程序控制LED灯 在小程序中使用MQTT.js库实现向MQTT服务器发布消息控制ESP8266 LED灯的开关状态。例如: ```javascript // 打开LED灯 client.publish('led', '1') // 关闭LED灯 client.publish('led', '0') ``` 以上就是在微信小程序中连接MQTT服务器实现控制ESP8266 LED灯的全部步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半颗心脏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值