MQTT協議通訊

 

簡述：

           使用MQTT協議實現後臺推送、及時通訊等功能。本案例實現了web-js端、微信小程式端、Java client端、Java server端

軟體版本：

           Nginx:openresty-1.13.6.1-win32

http://openresty.org/cn/

           Activemq:apache-activemq-5.15.2

           http://activemq.apache.org/download.html

小程式端Mqtt.js:github上牛人在原eclipse開源的mqtt31.js上修改符合小程式使用的

https://github.com/tennessine/paho.mqtt.wxapp

https://unpkg.com/[email protected]/target/paho-mqtt.js

微信小程式：github上的微信客戶端：

https://github.com/sqwsummerwind/mqtt-wechat-applet-client

JS端、Java client端、Java Server 端、安卓端等：

http://www.eclipse.org/paho/downloads.php

案例執行環境：

           Windows7、jdk 8、小程式工具V1.02.1804120、Springboot-1.5.10

環境安裝：

           一、Jdk8 安裝

                     省略，自行安裝

           二、apache-activemq-5.15.2

                     1.下載windows版：http://activemq.apache.org/activemq-5152-release.html

2.解壓

3.配置修改(建議不做修改)

${active-home}\conf\activemq.xml支援的協議：

tips:wss為後來驗證所加，內部nginx跳轉僅連線ws即可

4.啟動

${active-home}\bin\win64目錄執行activemq.bat指令碼即可

啟動資訊：

tips:可以看到啟動支援的一些協議連線url

5.網頁端請求，預設埠8161：

http://localhost:8161/

登入：admin/admin

檢視連線資訊：

至此，ACTIVEMQ完成

三、Nginx安裝（主要適應微信小程式使用mqtt連線，js和java端可無需該支援）

本案例使用openresty，集成了各種外掛，特別是對於Lua的支援。普通的nginx不在本文考慮範圍內

1.下載，選擇win版本

http://openresty.org/cn/download.html

2.解壓到目錄：

可以看到擴充套件了很多東東，集成了openssl(本案例重點)，還支援了lua指令碼(接觸重點)

3.證書生成(有證書忽略本節)

3.1 windows openssl 下載，選擇對應的win版本

http://slproweb.com/products/Win32OpenSSL.html

3.2環境變數配置：

變數名：OPENSSL_HOME

變數值：openssl安裝地址 如：C:\OpenSSL-Win64\bin

Path新增配置：%OPENSSL_HOME%

3.3生成證書（證書名稱自定義）

進入任何目錄，如${openresty}\conf，進入CMD命令視窗

3.3.1 建立私鑰

openssl genrsa -des3 -out mqtt.key 1024

輸入兩次密碼：123456

3.3.2 建立csr證書

openssl req -new -key mqtt.key -out mqtt.csr

執行完以上步驟後，生成檔案如下：

3.3.3 免密操作

tips: 在載入SSL支援的Nginx並使用上述私鑰時除去必須的口令，否則會在啟動nginx的時候需要輸入密碼

重新命名mqtt.key檔案為mqtt.key.org

                     去除口令：

                     opensslrsa -in mqtt.key.org -out mqtt.key

                    

                     3.3.4生成crt證書

                     opensslx509 -req -days 365 -in mqtt.csr -signkey mqtt.key -out mqtt.crt

最終生成檔案如下：

4.nginx ssl配置

拷貝上一步生成的證書生成的crt和key檔案到 ${openresty-home}\conf目錄下

4.1 修改${openresty-home}\conf\nginx.conf檔案，新增如下內容：

events {

  worker_connections  1024; ## Default: 1024

}

尾部新增

include ${openresty-home}\conf\wss.conf;# 這裡我們將反向代理新建一個檔案引入進來

client_max_body_size    3m;# 上傳大小單位M 微信小程式上傳大圖片時可能需要設定

4.2 在${openresty-home}\conf\wss.conf目錄下新增wss.conf配置檔案內容如下：

#主要是配置原來的ws 和 http 介面

upstream websocket {

# 遠端websocket伺服器地址，此處配置連線activemqws連線

server 172.16.80.194:61614;

}

#upstream web{

#    server www.xxx.com;# 遠端http介面

#}

# 通過下面的反向代理到上面的介面去

server {

    listen 443;#預設https和wss協議埠

    ssl on;

    ssl_certificateD:\developer\openresty-1.13.6.1-win32\conf\mqtt.crt;#你的上傳到伺服器的證書位置

    ssl_certificate_keyD:\developer\openresty-1.13.6.1-win32\conf\mqtt.key;#你的上傳到伺服器的證書位置

    ssl_session_timeout 5m;

    ssl_session_cacheshared:SSL:50m;

    ssl_protocols SSLv3 SSLv2TLSv1 TLSv1.1 TLSv1.2;

    ssl_ciphersALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;

    underscores_in_headerson;#開啟自定義頭資訊的下劃線

    #wss協議轉發 小程式裡面要訪問的連結

    location /mqtt {

        proxy_passhttp://websocket;#代理到上面的地址去

        proxy_http_version1.1;

        proxy_set_headerUpgrade $http_upgrade;

        proxy_set_headerConnection "Upgrade";

                    

                     proxy_redirectoff;

                    

                     #重要配置，解決小程式連線 Sec-WebSocket-Protocol錯誤提示

                     proxy_set_headerSec-WebSocket-Protocol mqtt;

        more_clear_headersSec-WebSocket-Protocol;

    }

    #https協議轉發 小程式裡面要訪問的連結

    #location /{

    #         proxy_pass http://web;#代理到原有的http的地址去

           #        proxy_set_header   X-Real-IP        $remote_addr;

    #   proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

           #        add_header Access-Control-Allow-Origin*;#跨域訪問設定

    #}

}

5.測試&啟動

Cmd命令，進入openresty根目錄

執行 nginx.exe -t測試配置檔案是否正確

tips:如有錯誤請做相應的修改

測試通過後直接雙擊nginx.exe啟動nginx

訪問：

http://localhost:8090/

至此nginx ssl成功。

四、web服務js端，java服務端，java Client端操作：

                     Maven+Springboot+jsp實現

1.pom配置：

2. application.yml配置(使用web工程，使用JSP作為檢視端)

3.JAVA服務端普通JMS傳送

4.JAVA mqtt client連線

Callback

5.springboot web jsp伺服器

5.1 主入口

5.2 JSP相關配置

5.3 Jsp頁面JS連線mqtt

 

以上為部分虛擬碼，案列DEMO工程目錄結構：

原始碼：

五、微信小程式端mqtt

                     參考工程：

                    

六、效果演示：

           6.1啟動服務端TopicProducerTest：

連線的是tcp 61616埠  activemq openwire協議，往主題PTP.test傳送訊息

  6.2 啟動java client端MqttTestClient

 

                連線的是：tcp://localhost:1883  activemq matt協議，訂閱PTP/test主題

   6.3 啟動web服務 MqttServiceApp

訪問jsp: http://localhost:8089/jsp/mqtt_client.jsp

JS端連線的是 ws協議埠即：

ws://localhost:61614/mqtt。使用mqtt31.js僅需指定埠Ip 即可

6.4 連線微信小程式端：

tips:此處連線的是nginx443埠，微信預設使用wss協議連線，通過nginx跳轉ws到 activemq上，微信小程式目前還暫不支援mqtt協議，開發的僅是websocket協議

連線成功後：

訂閱主題：PTP/test

6.5 服務端傳送訊息

 Java client 接受訊息：

網頁端：

小程式端：

Tips案例的message需要手動點選才會看到訊息，暫為做自動顯示

6.6 activemq連線情況

7、參考連線：

           http://www.wxappclub.com/topic/842

           https://github.com/sqwsummerwind/mqtt-wechat-applet-client

           https://blog.csdn.net/oufua/article/details/54375609

           https://zhuanlan.zhihu.com/p/24823848

 8、相關程式碼資源下載：

https://github.com/Xlinlin/spring-cloud-demo

有道雲分享地址，圖文結合完整版：

http://note.youdao.com/noteshare?id=6d66481f9261b0b952726ed7be84f172