一、前言；

• 從去年開始自學前端，到今年的伺服器的學習，也算是自己的一大進步了！這幾天開始搭建小程式的伺服器，琢磨了三天的Nginx中間訊息外掛，期間也是不睡午覺！也許入門Nginx，和大家一樣期間踩了很多坑！微信小程式也僅僅只有websocket協議的說明，但是已經不維護了！

• 希望你可以靜心看看本篇文章，可以幫助你跳過搭建微信小程式的mqtt伺服器的坑，不管你是用emq作為伺服器，還是其他的伺服器程式程式碼！

• 本文搭建好了之後，就可以在微信小程式上實現控制智慧硬體，即為連線mqtt伺服器。像現在最為流行的esp8266，esp32！廢話不多說，Let us go !

二、準備材料；

• 【必要具備】一個備案成功的域名 + 配置的 SSL證書！ 證書可以是免費的，或者您是老闆可以買個收費的！

• 【必要具備】一個伺服器，可以是騰訊伺服器，或者是阿里雲伺服器，而本文用的是阿里雲伺服器！因為雙十一剛剛搞活動，一百多塊買了一年伺服器！呵呵！

• 【必要具備】關於微信小程式的原始碼，下篇就會開源免費贈送給大家！！

• 【其他】 SecureCRT遠端命令連線工具！當然還有微信小程式開發工具，這些自己去下載吧！

三、實現的過程和原理；

• 總所周知，小程式的架構是用基本前端程式碼實現的，就是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協議頭的庫，這裡也下載吧；本博文不會用到，但是大家可能會用到！

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

• 重新載入配置檔案！

三、小程式端連線效果；

• 下篇將介紹怎麼配置小程式端的程式碼！歡迎收藏本頁面哦！

• 很多人怎麼聯絡我一起學習進步，下面打個小小公告和乾貨無償分享：