MQTT - 使用 Let's Encrypt SSL + EMQ X 建構 SSL WebSocket

原理

網站的證書和 MQTT (WebSocket) 的證書必須一致
Let's Encrypt 證書檔案必須讓 emqx 帳號有讀取權限

編輯emqx.conf

# vi /etc/emqx/emqx.conf

1	# vi /etc/emqx/emqx.conf

listener.ssl.external.keyfile = /etc/letsencrypt/live/{web url}/privkey.pem
listener.ssl.external.certfile = /etc/letsencrypt/live/{web url}/cert.pem
listener.ssl.external.cacertfile = /etc/letsencrypt/live/{web url}/fullchain.pem

listener.wss.external.keyfile = /etc/letsencrypt/live/{web url}/privkey.pem
listener.wss.external.certfile = /etc/letsencrypt/live/{web url}/cert.pem
listener.wss.external.cacertfile = /etc/letsencrypt/live/{web url}/fullchain.pem

listener.ssl.external.keyfile = /etc/letsencrypt/live/{web url}/privkey.pem

listener.ssl.external.certfile = /etc/letsencrypt/live/{web url}/cert.pem

listener.ssl.external.cacertfile = /etc/letsencrypt/live/{web url}/fullchain.pem

listener.wss.external.keyfile = /etc/letsencrypt/live/{web url}/privkey.pem

listener.wss.external.certfile = /etc/letsencrypt/live/{web url}/cert.pem

listener.wss.external.cacertfile = /etc/letsencrypt/live/{web url}/fullchain.pem

請自行替換 {web url} 為你的網域
.ssl. 是 MQTT使用；.wss. 是 WebSocket 使用

Let's Encrypt 證書檔案權限

要讓 emqx 可以讀取 Let's Encrypt 產生的證書，最大的問題就是目錄和檔案的讀取權限。

預設的權限大多是只有 root 使用者可以讀，最方便的方式是將 /etc/letsencrypt 的 archive & live 的其他人讀取開放

# chmod 664 -R /etc/letsencrypt/archive
# chmod 664 -R /etc/letsencrypt/live

1 2	# chmod 664 -R /etc/letsencrypt/archive # chmod 664 -R /etc/letsencrypt/live

可以使用一般使用者讀取證書檔案測試，如果沒問題就可以重啟 emqx 服務

# emqx restart

1	# emqx restart

HTML

在使用上和沒有 SSL 差別不到，注意 mqtt.connect() 的通訊協定是 wss:// 以及 port 的設定即可。

網路上可能會找到有關 MQTT.js 證書相關的設定，不過那些設定並沒有什麼卵用，因為當網站是 https:// 時瀏覽器就會檢查如果是同網站就需要使用相同證書，不同網站就會發生跨網站的相關錯誤，當然現在也是不能和 http 混用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSL MQTT</title>
    <script src="/3rd/jquery-1.11.3.min.js"></script>
    <script src="/3rdParty/mqtt.min.js"></script>
</head>
<body>

<script>
    var mqtt_broker = '{MQTT Broker}';
    var options = {
        clientId: 'mqtt_' + Math.random().toString(16).substr(2, 8),
        username: '{Username}',
        password: '{Password}'
    };

    var user = 'hoyo';
    var mqtt_client = mqtt.connect("wss://" + mqtt_broker + ":8084/mqtt", options);

    //建立连接
    mqtt_client.on('connect', function (){
        mqtt_client.subscribe('DAE/Light/Send/', function ( err ){
            if ( !err ) {
                console.log("subscribe success!");
            }
        });
    });

    //如果连接错误，打印错误
    mqtt_client.on('error', function ( err ){
        alert(err);
        mqtt_client.end();
    });

    //
    mqtt_client.on('disconnect', function (){
        console.log('disconnect', user);
        mqtt_client.publish('leave', user);
    });

    $(window).bind('beforeunload', function (){
        mqtt_client.publish('leave', user);
    });
</script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

var mqtt_broker = '{MQTT Broker}';

var options = {

clientId: 'mqtt_' + Math.random().toString(16).substr(2, 8),

username: '{Username}',

password: '{Password}'

};

var user = 'hoyo';

var mqtt_client = mqtt.connect("wss://" + mqtt_broker + ":8084/mqtt", options);

//建立连接

mqtt_client.on('connect', function (){

mqtt_client.subscribe('DAE/Light/Send/', function ( err ){

if ( !err ) {

console.log("subscribe success!");

}

});

//如果连接错误，打印错误

mqtt_client.on('error', function ( err ){

alert(err);

mqtt_client.end();

});

mqtt_client.on('disconnect', function (){

console.log('disconnect', user);

mqtt_client.publish('leave', user);

});

$(window).bind('beforeunload', function (){

mqtt_client.publish('leave', user);

});

</script>

</body>

</html>

在 F12 console 下如果沒有看到錯誤恭喜已經成功了。

5,123 total views, 3 views today

MQTT - 使用 Let's Encrypt SSL + EMQ X 建構 SSL WebSocket

原理

編輯emqx.conf

Let's Encrypt 證書檔案權限

HTML

Related Post

發佈留言

MQTT - 使用 Let's Encrypt SSL + EMQ X 建構 SSL WebSocket

原理

編輯emqx.conf

Let's Encrypt 證書檔案權限

HTML

Related Post

AI 問掛 - Windows 10 修復 .iso 檔案右鍵沒有燒錄光碟錯誤

網頁的前、後端如何區分

PWA 漸進式網路應用程式 - 3. 桌面版瀏覽網頁通知

發佈留言