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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xuhong.blog.csdn.net/article/details/84070944

【微信小程序控制硬件①】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件!
【微信小程序控制硬件②】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证和通讯于服务器!
【微信小程序控制硬件③】 从软件到硬件搭建一个微信小程序控制esp8266的项目,自定义通讯协议,为面试职位和比赛项目加分!
【微信小程序控制硬件④】 深度剖析微信公众号配网 Airkiss 原理与过程,esp8266如何自定义回调参数给微信,实现绑定设备第一步!
【微信小程序控制硬件⑤ 进阶篇 】理清接下来必须走的架构思想,学习下 JavaScript 的观察者模式,在微信小程序多页面同时接收到设备推送事件!
【微信小程序控制硬件⑥ 进阶篇 】服务器如何集成七牛云存储SDK,把用户自定义设备图片存储在第三方服务器!



一、前言;

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

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

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


二、准备材料;


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

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

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

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


三、实现的过程和原理;


Created with Raphaël 2.2.0Nginx环境搭建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
esp8266源代码免费学习汇总(持续更新,欢迎star):https://github.com/xuhongv/StudyInEsp8266
esp32源代码免费学习汇总(持续更新,欢迎star):https://github.com/xuhongv/StudyInEsp32

展开阅读全文

没有更多推荐了,返回首页