WebSocketクライアントを使ってMQTTサーバを接続する

9066 ワード
エリンランド
https://www.jianshu.com/p/4fd95cae1a9c
https://github.com/mqttjs/MQTT.js/tree/master/examples
 
firecat注：
私たちはemq自身のDashboardプラグインを使用して、websocketのデバッグを行い、Googleブラウザを開いてURLを入力します。192.168.3.128はemqのあるIPアドレスです。
http://192.168.83.128:18083/#/websocket
ユーザ名：admin、パスワード：public
WebSocket URI:ws(s):/192.168.8.3.128:8083/mqtt
TCP URI：tcp://192.168.83.128:1883
 
概要
近年では、Webの急速な発展に伴って、ブラウザの新機能が次々と現れ、ブラウザの端やブラウザのレンダリングエンジンによって実現できるアプリケーションが増えてきました。Webアプリケーションのインスタント通信方式WebSocketは、広く応用されています。
WebSocketは単一のTCP接続上で全二重通信を行うプロトコルである。WebSocket通信プロトコルは2011年にIETFによって標準RFC 6455に定められ、RFC 7936によって規範を補充する。WebSocket APIもW 3 Cに標準化されています。
WebSocketは、クライアントとサーバとの間のデータ交換をより簡単にし、サービス端末がクライアントにデータを積極的に転送することを可能にする。WebSocket APIでは、ブラウザとサーバは握手を一度だけ行う必要があり、両者の間には持続的な接続を直接作成し、双方向のデータ伝送を行うことができる。ウィキペディアWebSocketから
MQTTプロトコル第6章では、MQTTがWebSocket[RFC 6455]に接続して送信するために必要な条件を詳細に約束しました。プロトコル内容EMQはここで疲れません。プロトコルの詳細がより複雑なため、本明細書ではよく使われるJavaScript MQTTクライアントを2つ選んで接続テストを行う。
二つのクライアントの比較
Paho.mqtt.js
PahoはEclipseのMQTTクライアントプロジェクトであり、Paho JavaScript Cientはブラウザベースのライブラリであり、それはWebSocketsを使ってMQTTサーバに接続されている。他のJavaScript接続ライブラリに比べて機能が少なく、使用を推奨しません。
MQTT.js
MQTT.js MQTTプロトコルのクライアントライブラリは、JavaScriptで作成され、Node.jsとブラウザに使用できます。Node.jsでは、グローバルインストールによりコマンドライン接続が可能であり、MQTT、MQTT TLS証明書接続もサポートされています。言及に値するのはMQTT.jsで、微信小プログラムに対してもいい支持があります。
EMQ君はMQTT.jsライブラリで接続解説を行います。
MQTT.jsの取り付け
読者機器にNode.jsの稼働環境がある場合は、npm命令でMQTT.jsをインストールすることができます。
現在のディレクトリにインストール
npm i mqtt
グローバルインストール
登録mqtt mqtt_pub mqtt_subを現在のユーザに命じる。ここでは、iot.eclipse.orgを介してコマンドラインの使用について説明する。
#     
npm i mqtt -g

#        
$ mqtt sub -t 'hello' -h 'iot.eclipse.org' -v
> hello 09860

#                hello,           


#               
mqtt pub -t 'hello' -h 'iot.eclipse.org' -m 'from MQTT.js'

#           ->    ->        ，           ，       hello      

> hello from MQTT.js
npmは現在のディレクトリにインストールしても使えます。module/.bin/mqttコマンドは以上の操作を実行します。
CDN参照
MQTT.jsパッケージは通過できます。http://unpkg.com 獲得する



    //           mqtt   
    console.log(mqtt)
MQTTサーバに接続
いくつかの共通のWebSocketテスト接続サーバ：
  • test.mosquitto.org-ポート8080を使用して暗号化されていません。8081はSSL上のWebSocketに使用されます。
  • iot.eclipse.org-ポート80を使用して暗号化されておらず、443はSSL上のWebSocketに使用される。
  • brook er.hivemq.com-ポートを使って8000暗号化されていません。SSL上のWebSocketはサポートされていません。
    • クライアント認証の一部の内容を示す必要があるので、上記サーバはクライアント認証サービスを提供していません。筆者はActorCloudプラットフォームを通じて一つの装置を登録して接続します。
    EMQは8083ポートを使用して一般的な接続に用い、8084はSSL上のWebSocket接続に用いられる。
    // 
// const mqtt = require('mqtt')
import mqtt from 'mqtt'

//     
const options = {
      connectTimeout: 4000, //     
      //     
      clientId: 'emqx-connect-via-websocket',
      username: 'emqx-connect-via-websocket',
      password: 'emqx-connect-via-websocket',
}

const client = mqtt.connect('wss://iot.actorcloud.io:8084/mqtt', options)

client.on('reconnect', (error) => {
    console.log('    :', error)
})

client.on('error', (error) => {
    console.log('    :', error)
})

    の な アドレスは、wss:/iot.actorcloud.io：8084 /mqtt / . ： / は のようなエラーが やすいです。
  • アドレスが されていないプロトコル：WebSocketは、プロトコル としてws（ ）、wss（SSL ）を する プロトコルとして する。MQTT.jsクライアントは のプロトコルをサポートしています。 アドレスはプロトコルのタイプを する があります。
  • アドレスが されていないポート：MQTTはWebSocketアクセスポートに されていません。EMQでは、デフォルトでは8083 8084を 、 ポートとして しています。WebSocketプロトコルのデフォルトポートはHTTPと しています（80/443）、ポートを しないとWebSocketを ったデフォルトポート が されます。 MQTT を する は、MQTT.jsなどのポートを する はなく、Node.js でmqtt://localhostを して MQTT 8083ポートに することができ、 アドレスがmqtts://localhostである は8884ポートに する。
  • アドレスにパスがない：MQTT-WebSoketは に/pathを として し、 に が である。
  • プロトコルはポートと していません。wssを した が8083ポートに されています。
  • HTTPSで WebSocket を する：Googleなどの はHTTPSを すると に、ブラウザ によってセキュリティ を っている。つまりHTTPS では、ブラウザは に wsプロトコルを して を することを する。
  • は アドレスと していません。 が いので、 は のEMQでSSL/TLS が です。
    • のオプション
    のコードの で、optionsはクライアント のオプションです。 は なパラメータの です。https://www.npmjs.com/package/mqtt#connect。
  • keepalive： 、デフォルトでは60 、0を に します。
  • clientId：クライアントID、デフォルトは'mqttjs_' + Math.random().toString(16).substr(2, 8)によってランダムに されます。
  • username： ユーザ （あれば）
  • password： パスワード（あれば）
  • clean：trueはfalseに され、オフライン にQoS 1および2メッセージを する。
  • reconnectPeriod：デフォルトでは1000ミリ 、2 の の の 、クライアントIDの 、 などのクライアントが されます。
  • connectTimeout：デフォルトでは30×1000ミリ 、CONNAACKを する に つ 、すなわち のタイムアウト 。
    • /キャンセル
    が してから することができます。また、 のテーマはMQTT のテーマ に していなければなりません。
    JavaScriptの ブロッキング は、クライアントが に したかどうか、またはclient.connectedによって が したかどうかを することができる：
    //     
client.on('connect', handleConnect)
client.subscribe('hello')
client.publish('hello', 'Hello EMQ')

//     

client.on('connect', (e) => {
    console.log('       ')
    
    //       
    client.subscribe('hello', { qos: 1 }, (error) => {
        if (!error) {
            cosnole.log('    ')
            client.publish('hello', 'Hello EMQ', { qos: 1, rein: false }, (error) => {
                cosnole.log(error || '    ')
            })
        }
    })
    
    //       
    client.subscribe(['hello', 'one/two/three/#', '#'], { qos: 1 },  onSubscribeSuccess)
    
    //      qos      
    client.subscribe(
        [
            { hello: 1 }, 
            { 'one/two/three': 2 }, 
            { '#': 0 }
        ], 
        onSubscribeSuccess,
    )
})

//     
client.unubscribe(
    // topic, topic Array, topic Array-Onject
    'hello',
    onUnubscribeSuccess,
)
    メッセージの /
    あるテーマにメッセージを ります。 されたテーマはMQTTのテーマルールに していなければなりません。リリース にこのテーマを する はありませんが、クライアントが に したことを します。
    //         
client.on('message', (topic, message) => {
    console.log('    ', topic, '   ', message.toString())
})

//     
if (!client.connected) {
    console.log('      ')
    return
}

client.publish('hello', 'hello EMQ', (error) => {
    console.log(error || '      ')
})
    WeChatアプレット
    MQTT.jsライブラリは、WeChatウィジェットに して な を い、wxsプロトコル を する。 ウィジェット では、 された が です。 アドレスはwxs://iot.actorcloud.io:8084/mqttと じです。
    EMQはSSL/TLS を にします。
    EMQは を しており、デフォルトではすでに されたWebSocket が していますが、ほとんどのブラウザは の エラーを します。 えばnet::ERR_CERT_COMMON_NAME_INVALID（Chrome、360などwebkitカーネルブラウザは モードで、Cosoneタブはほとんどの エラーを できます。）。

    この のhttpsの れと の で の を しく しました。EMQ がSSL/TLS をまとめるには な は の りです。
  • ドメイン をEMQサーバのパブリックネットワークアドレスに び けます。CA が した の はドメイン に するものです。
  • を する：CA にドメイン の を し、 できるCA を し、 はドメイン とホスト を しなければならない。
  • は を する wssプロトコルを し、ドメイン を する：ドメイン - を けた 、IPアドレスではなくドメイン を して しなければならない。このようにブラウザはドメイン によって を し、 した に を することができる。
    • EMQに するetc/emqx.confプロファイルを き、 の を します。
    # wss     
listener.wss.external = 8084

#         
listener.wss.external.keyfile = etc/certs/cert.key

#         
listener.wss.external.certfile = etc/certs/cert.pem
    EMQを すればいいです。
    あなたの を って ファイルと にETC/certs/ に き えることができます。
    インバースプロキシと の
    nginxを して、 エージェントを して、WebSocketを することで、EMQサーバの を し、ドメイン を しながら、nginxの によって のバックエンドサービスエンティティを り てることができる。
    
#    WebSocket      443   
listen 443, 8084;
server_name example.com;

ssl on;

ssl_certificate /etc/cert.crt;  #     
ssl_certificate_key /etc/cert.key; #     


# upstream      
upstream emq_server {
    server 10.10.1.1:8883 weight=1;
    server 10.10.1.2:8883 weight=1;
    server 10.10.1.3:8883 weight=1;
}

#       
location / {
    root www;
    index index.html;
}

#       EMQ     WebSocket
location / {
    proxy_redirect off;
    # upstream
    proxy_pass http://emq_server;
    
    proxy_set_header Host $host;
    #            
    proxy_set_header X-Real_IP $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
    # WebSocket      
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection “upgrade”;
}
    その の
    MQTT.jsの の は、 な と の コードを しています。 は に くことができます。
    EMQ DashboardのWebSocketツール、ActorCloudテストツール->MQTTクライアント（ActorCloudショッピングセンター が ）は、MQTT.jsを って されています。 は を することができます。
    ：EMQリンク：https://www.jianshu.com/p/4fd95cae1a9c ： の は の になります。いかなる の も に して を て、 を してください。
     
    -----
    Vueベースのmqttws 31.js mqttサーバ（WebSocket）
    phpは配列をURLパラメータに変換します。
    JavaシミュレーションHTTPのGetとPost要求（拡張）