微信小程序MQTT客戶端的坑

前方：
微信小程序界面之類的，若是功能不是很複雜的話，開發起來其實仍是挺簡單的，可是比較坑的是他的安全機制。首先你須要有本身的域名，你的域名須要備案，備案的話通常要20天左右，並且你本身的服務器要支持https。因此，我要騰訊雲買了域名，買了服務器，備案等等搞了20多天，錢卻是花了很多，這還只是第一坑。

小程序MQTT客戶端：
小程序的MQTT客戶端支持使用的是paho-mqtt.js，能夠在github上面找到源碼，怎麼使用的話能夠查看源碼裏面包含的例子，總的來講並非很複雜。可是弄好以後，界面以下：

用過MQTT的知道能夠選擇端口和服務器地址，還有用戶名密碼認證是可選的。因此我填好以後。鏈接錯誤以下：

按照提示說，個人域名沒有在合法域名列表中，可是我肯定是已經配置好了的，並且小程序項目也已經刷新了，仍是會提示這個錯誤。

解決方法：
由於小程序是使用wss進行通訊，默認使用的是443端口，不用本身指定端口，可使用下面圖片中最下方的方式進行訪問。

用過EMQ的應該知道，tcp端口爲1883，ssl端口爲8883，ws端口爲8083，wss端口爲8084，可是如今不能使用這些端口進行訪問。以下所示：

EMQ服務器搭建：

EMQ服務的搭建其實並不複雜，能夠參照官方文檔進行安裝，我使用的是Linux的通用版本，這裏要注意的是SSL證書的設置，個人一個問題有提到，有興趣的能夠看看。

要解決上面的問題，這裏使用Nginx進行反向代理。Nginx的安裝也不是很複雜，可是使用源碼安裝的話，安裝以前要安裝好依賴庫，能夠參照： ubuntu16.04 nginx安裝。另外，還要添加一個 more_clear_headers 模塊，能夠參照：openresty/headers-more-nginx-module

接下來是Nginx的配置，主要配置SSL和反向代理，進行以下配置：

server {
    listen 443;
    server_name www.domain.com; #填寫綁定證書的域名
    
    ssl on;
    ssl_certificate certs/1_www.domain.com_bundle.crt;
    ssl_certificate_key certs/2_www.domain.com.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 {
        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;
        more_clear_headers Sec-WebSocket-Protocol;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        }
}

上面域名和證書之類的替換爲你本身的域名和證書，注意證書的路徑。另外，新測8084端口(wss)和8083端(ws)均可以，不過上面用8084端口時要用https。如今已經能夠完成小程序MQTT客戶端與EMQ服務器的通訊了。
感謝wxapp做者的交流指導。

參考：
https://github.com/tennessine...
http://emqtt.com/docs/v2/inst...
http://www.cnblogs.com/badboy...
http://www.cnblogs.com/badboy...
https://github.com/openresty/...
https://zhuanlan.zhihu.com/p/...