天天看點
傳回

微信小程式使用mqtt連接配接及配置nginx的https

原生小程式開發中需求使用mqtt進行即使通訊，下面介紹小程式中使用mqttjs 進行網絡通訊連接配接 在華為雲中部署nginx使用https/wss方式連接配接Apache-activemq。

1、雲服務域名

1、在雲服務中部署項目首先要有個域名，domain 映射到雲服務機子的ip,這樣通路http://domaintest 才會通路到 部署服務的機子。

2、部署mqtt 服務

​ 官網下載下傳位址：http://activemq.apache.org/activemq-5140-release.html

​ 下載下傳 linux 版：apache-activemq-5.15.10-bin.tar.gz

2.1 部署mqtt 服務

​ 1、gz檔案拷貝到linux目錄

​ 2、解壓啟動

​ 解壓 tar -zxvf apache-activemq-5.14.0-bin.tar.gz

​ 進入apache-activemq-5.15.10/bin 目錄 啟動服務 ./activemq start

​ 啟動完成 打開管理界面 http://ip:8161/admin 預設使用者名密碼 admin/admin，在管理界面中可看到服務中有哪些topic/subscriber 相關資訊。

​ 3.mqtt配置檔案

​ 在conf 目錄下的 activemq.xml 檔案中可以 檢視tcp/amqp/stomp/mqtt/ws等的mqtt 連接配接位址端口

<transportConnectors>
            <transportConnector name="openwire" uri="tcp://0.0.0.0:61616?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
            <transportConnector name="amqp" uri="amqp://0.0.0.0:5672?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
            <transportConnector name="stomp" uri="stomp://0.0.0.0:61613?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
            <transportConnector name="mqtt" uri="mqtt://0.0.0.0:1883?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
   <transportConnector name="ws" uri="ws://0.0.0.0:61614?		maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
</transportConnectors>

​ 4.測試部署

這裡使用node.js 進行測試。node server.js /client.js

連接配接mqtt的端口位址根據mqtt的配置檔案選擇

server端釋出
var mqtt = require('mqtt')//nodejs 中導入mqtt包
var client  = mqtt.connect('mqtt://domaintest:1883')
client.publish('test1', '{"message":"message1"}')

           
client端接收messages
var mqtt = require('mqtt')
var client  = mqtt.connect('mqtt://domaintest:1883')
client.on('connect', function () {
	// 訂閱釋出的主題test1
  client.subscribe('test1', function (err) {
  })
})
client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

3.部署nginx 及配置https

3.1 nginx的部署

​ 1、ubuntu 下 指令安裝 apt install nginx

​ 安裝完成後位置 /etc/nginx

​ 2、啟動指令 systemctl start nginx.service/systemctl start nginx

​ 設定開機自啟動 systemctl enable nginx.service

​ 停止服務指令 systemctl stop nginx.service/nginx

3.2 nginx的配置

​ 這裡配置主要配置為/etc/nginx/nginx.conf 檔案

這裡配置位置為
http{}中配置 server,這裡可以配置多個server[http、https],一個server中也可以監聽多個端口
http {
	#http server
	server { 
		listen 8080;   
    	server_name  domaintest;
	    location /mqtt {
	        proxy_set_header Host $http_host;
			proxy_pass http://localhost:61614;
		    proxy_http_version 1.1;
			proxy_read_timeout 300s; # 預設是60秒，可設定
	    }   
	}
    
    #https server 需要配置htts的證書 ，想強制跳轉https，隻監聽443端口
	server {
		listen 443 ssl;#https預設監聽443端口 
		ssl on;
	    ssl_certificate /etc/letsencrypt/live/domaintest/fullchain.pem;  #配置證書 
	    ssl_certificate_key /etc/letsencrypt/live/domaintest/privkey.pem; #配置證書
	    ssl_session_timeout 5m;
	    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	    ssl_ciphers ECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!aNULL:!eNULL;
	    ssl_prefer_server_ciphers on;	
	    
	    listen       61615;
    	server_name  domaintest; #配置服務域名
    	#通路位址對應http://domain:ip/mqtt
	    location /mqtt {
	        proxy_set_header Host $http_host;
			proxy_pass http://localhost:61614; #服務端部署的服務通路路徑（mqtt中的配置路徑）
		    proxy_http_version 1.1;
			proxy_set_header X-Client-IP $remote_addr;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
			proxy_read_timeout 300s; # 預設是60秒，可設定
	    }   
	}
    
}

3.3 生成域名domaintest的證書

通過Certbot擷取免費https證書，為網站配置https通路

安裝
wget https://dl.eff.org/certbot-auto

授權
chmod a+x certbot-auto
    
為域名生成證書 主要這時将nginx服務停止
./certbot-auto certonly --standalone -d  domiantest   #domiantest為你想要配置https的域名
或./certbot-auto certonly --standalone --email [email protected].com --agree-tos -d domiantest
安裝提示進行操作生成證書

生成後檢視證書指令及證書位置
ls /etc/letsencrypt/live/ 将證書配置到https的server中
    
注意免費申請的證書時效隻有90天，我們需要設定自動更新的功能，幫我們自動更新證書的時效。

crontab -e    #編輯crontab
添加腳本
30 2 * * 1 安裝目錄/certbot-auto renew --pre-hook "systemctl stop nginx" --post-hook "systemctl start nginx" >> /安裝目錄/le-renew.log 2>&1 &

4、原生微信小程式中配置mqtt連接配接

這裡我們首先需要将mqtt.js檔案下載下傳保持到項目中。

https://unpkg.com/[email protected]/dist/mqtt.min.js 複制儲存檔案為mqtt2.18.8.min.js。

在項目中使用

var mqtt = require('../../utils/mqtt2.18.8.min.js')
/**小程式中隻能用wxs://開頭請求位址
* 在調試時可以在項目開發工具 中 詳情->本地設定-> 勾選 不校驗合法域名，這樣可以友善調試。
* 當進行域名合法性校驗時，下面domaintest域名必須是該小程式對應appID的賬号下的開發中配置的域名，這樣才不 * 會出現 不合法的域名不在服務中
*/
var client = mqtt.connect('wxs://domaintest/mqtt', {
  clientId: "clientUserId"
});
Page({
  data: {
    "exectors": []
  },
  initMqtt: function () {  
    client.on('connect', function () {
      console.log('連接配接成功');
      //訂閱
      client.subscribe('test1');
    })
	// 接收消息
    client.on('message', function (topic, payload) {
      console.log(payload)
    })
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    this.initMqtt()
  },
  /**
   * 生命周期函數--監聽頁面解除安裝
   */
  onUnload: function () {
    // 關閉連接配接
    client.end();
  },
  onPub:function(){
    client.publish("test2", "傳回");
  } 
})
           
注意：
當進行域名合法性校驗時，下面domaintest域名必須是該小程式對應appID的賬号下的開發中配置的域名，這樣才不會出現不合法的域名不在服務中的錯誤。

ion () {

// 關閉連接配接

client.end();

},

onPub:function(){

client.publish(“test2”, “傳回”);

}

})

注意：

當進行域名合法性校驗時，下面domaintest域名必須是該小程式對應appID的賬号下的開發中配置的域名，這樣才不會出現不合法的域名不在服務中的錯誤。

前端 MQTT 小程式
上一篇: VS2013 編譯x264
下一篇: VS2013安裝

繼續閱讀