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

时间  2020-07-22 标签 微信小程序控制硬件① 全网 首发 借助 emq 消息 服务器 如何 搭建 微信 程序 mqtt 轻松 控制 智能 硬件

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

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

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

【微信小程序控制硬件第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，谈谈微信生态那些事。nginx

腾讯物联开发平台c++

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

在这里插入图片描述

文章目录

1、前言；

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

  • 但愿你能够静心看看本篇文章，能够帮助你跳过搭建微信小程序的mqtt服务器的坑，无论你是用emq做为服务器，仍是其余的服务器程序代码！web

  • 本文搭建好了以后，就能够在微信小程序上实现控制智能硬件，即为链接mqtt服務器。像如今最为流行的esp8266，esp32！废话很少说，Let us go !面试

  • 本博文才有的 emq 版本是 2.3 ！！正则表达式

2、准备材料；

  • 【必要具有】一个备案成功的域名 + 配置的 SSL证书！ 证书能够是免费的，或者您是老板能够买个收费的！

  • 【必要具有】一个服務器，能够是腾讯服务器，或者是阿里云服务器，而本文用的是阿里云服务器！由于双十一刚刚搞活动，一百多块买了一年服务器！呵呵！

  • 【必要具有】关于微信小程序的源码，下篇就会开源免费赠送给你们！！

  • 【其余】 SecureCRT远程命令链接工具！固然还有微信小程序开发工具，这些本身去下载吧！

3、实现的过程和原理；

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、服务器配置；

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

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

  • 添加模块openSSL和headers-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_certificate和ssl_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

  • 从新加载配置文件！

3、小程序端链接效果；

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

在这里插入图片描述

另外，不要把个人博客做为学习标准，个人只是笔记，难有疏忽之处，若是有，请指出来，也欢迎留言哈！

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

在这里插入图片描述

联系我们 沪ICP备13005482号-10