EMQX Platform

日本語

简体中文
English

日本語

简体中文
English

Appearance

お問い合わせ

JavaScriptでMQTT.js SDKを使ってデプロイメントに接続する方法 ​

本記事では、JavaScriptのMQTT.jsを使用して、クライアントとMQTTブローカー間の接続、サブスクライブ、メッセージ送受信、サブスクライブ解除などの機能を実装する方法を紹介します。

前提条件 ​

MQTTブローカーのデプロイ ​

  • EMQXが提供する無料のパブリックMQTTブローカーを利用できます。このサービスはEMQXプラットフォームを基に構築されています。ブローカーへのアクセス情報は以下の通りです。

    • アドレス：broker.emqx.io
    • WebSocketポート：8083
    • TLS/SSL対応WebSocketポート：8084

  • また、独自のMQTTブローカーを作成することも可能です。デプロイメントが稼働状態になったら、デプロイメント概要ページで接続情報を確認できます。後のクライアント接続段階で必要となるユーザー名とパスワードは、認証を参照し、アクセス制御 -> 認証で設定してください。

依存関係のインストール ​

MQTT.jsはJavaScriptで書かれたMQTTプロトコルの完全オープンソースクライアントライブラリで、Node.jsやブラウザで利用可能です。MQTT.jsの詳細や使い方はMQTT.js GitHubを参照してください。

MQTT.jsはNPMやYarnでインストールできるほか、CDNや相対パスからインポートも可能です。本例ではCDN経由でMQTT.jsをインポートします。

  • NPMまたはYarnを使う場合：

    MQTT.jsをインストールします。

    shell
    # NPM
npm install mqtt
# または Yarn
yarn add mqtt

    インストール後、MQTT.jsをインポートする必要があります。

    js
    import * as mqtt from 'mqtt/dist/mqtt.min'

  • CDNからMQTT.jsを利用する場合：

    html
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

  • プロジェクトにダウンロードして配置し、相対パスでインポートする場合：

    html
    <script src="/your/path/to/mqtt.min.js"></script>

WebSocketポートで接続する ​

MQTT-WebSocketは接続パスに/pathを指定する必要があり、EMQXブローカーは/mqttを使用しています。

クライアントID、ユーザー名、パスワードは以下のように設定できます。クライアントIDは一意である必要があります。

js
const clientId = 'emqx_test_' + Math.random().toString(16).substring(2, 8)
const username = 'emqx_test'
const password = 'emqx_test'

以下のコードでクライアントとMQTTブローカー間の接続を確立できます。

js
const client = mqtt.connect('ws://broker.emqx.io:8083/mqtt', {
  clientId,
  username,
  password,
  // ...その他のオプション
})

WebSocketセキュアポートで接続する ​

TLS/SSL暗号化が有効な場合、接続のパラメーターオプションはWebSocketポート接続時と同じですが、プロトコルをwssに変更し、ポート番号を正しく指定する必要があります。

以下のコードでクライアントとMQTTブローカー間の接続を確立できます。

js
const client = mqtt.connect('wss://broker.emqx.io:8084/mqtt', {
  clientId,
  username,
  password,
  // ...その他のオプション
})

サブスクライブとパブリッシュ ​

トピックのサブスクライブ ​

サブスクライブするトピックと対応するQoSレベルを指定します。

js
const topic = '/WebSocket/mqtt'
const qos = 0

client.subscribe(topic, { qos }, (error) => {
  if (error) {
    console.log('subscribe error:', error)
    return
  }
  console.log(`トピック '${topic}' をサブスクライブしました`)
})

トピックのサブスクライブ解除 ​

以下のコードでトピックと対応するQoSレベルを指定してサブスクライブ解除できます。

js
const topic = '/WebSocket/mqtt'
const qos = 0
client.unsubscribe(topic, { qos }, (error) => {
  if (error) {
    console.log('unsubscribe error:', error)
    return
  }
  console.log(`トピック '${topic}' のサブスクライブを解除しました`)
})

メッセージのパブリッシュ ​

メッセージをパブリッシュする際は、MQTTブローカーに対象のトピックとメッセージ内容を指定する必要があります。

js
// パブリッシュするトピック、メッセージ、QoSを設定
const topic = '/WebSocket/mqtt'
const payload = 'WebSocket mqtt test'
const qos = 0

client.publish(topic, payload, { qos }, (error) => {
  if (error) {
    console.error(error)
  }
})

メッセージの受信 ​

以下のコードはメッセージイベントを監視し、メッセージ受信時に受信したメッセージとトピックをコンソールに出力します。

js
client.on('message', (topic, payload) => {
  console.log(
    '受信メッセージ: ' + payload.toString() + '\nトピック: ' + topic
  )
})

MQTTブローカーからの切断 ​

クライアントをブローカーから切断するには、以下のコードを使用します。

js
if (client.connected) {
  try {
    client.end(false, () => {
      console.log('正常に切断されました')
    })
  } catch (error) {
    console.log('切断エラー:', error)
  }
}

上記は主要なコードスニペットのみを示しています。完全なプロジェクトコードはMQTT-Client-WebSocketを参照してください。ダウンロードして実際に試すことができます。

接続テスト ​

デモ結果を確認するには、HTMLファイルをブラウザで開き、コンソールを以下のように確認してください。

js_connection.png

クライアントが正常にMQTTブローカーに接続し、トピックをサブスクライブし、メッセージの受信とパブリッシュが成功していることがわかります。ここで、別のクライアントとしてMQTT 5.0クライアントツール - MQTTXを使い、メッセージの送受信テストを行います。

mqttx_pub.png

MQTTXから送信されたメッセージがコンソールに表示されていることが確認できます。

js_receive.png

FAQ ​

  1. 自己署名証明書の使い方は？双方向TLS/SSL認証はどうやって使うの？

    ブラウザの制限により、現時点ではサポートされていません。詳細はMQTT.jsのIssueをご参照ください：ブラウザでTLS/SSL双方向認証接続を使うには？ および Node.jsでは双方向認証可能だがブラウザでは非対応。

まとめ ​

以上で、JavaScriptでMQTT接続を作成し、クライアントとMQTTサーバー間でのサブスクライブ、メッセージパブリッシュ、サブスクライブ解除、切断のシナリオをシミュレートしました。完全なサンプルコードはMQTT-Client-WebSocketページからダウンロード可能です。また、MQTTクライアントの例ページでは他の言語のデモ例も多数公開していますので、ぜひご覧ください。