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

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

前提条件

JavaScript クライアントを使用して EMQX Cloud に接続する前に、MQTT ブローカーがデプロイされていることを確認してください。

MQTT ブローカーのデプロイ

アプリケーションをEMQX Cloudに接続するには、デプロイメントを作成して設定する必要があります。

サーバレスデプロイメント

EMQX Cloudコンソールでサーバレスデプロイメントを作成します。
デプロイメントが作成されて稼働したら、デプロイメントの概要ページに移動し、以下を含むMQTT接続情報を確認します。
- ブローカーアドレス
- ポート番号（サーバレスではTLSポートのみ対応）
サーバレスデプロイメントはTLS接続が必須です。概要ページからCA証明書をダウンロードし、TLS用のポート8883を使用してください。
デプロイメントのアクセス制御 -> クライアント認証で、デフォルト認証（ユーザー名／パスワード）を設定します。

詳細はサーバレスポートガイドを参照してください。

Dedicated Flex または BYOC デプロイメント

EMQX CloudコンソールでDedicated FlexまたはBYOCのデプロイメントを作成できます。
作成後、デプロイメントの概要ページに移動し、以下を含むMQTT接続情報を取得します。
- ブローカーアドレス
- MQTTおよびWebSocket用のTCPおよびTLSポート番号（TCPおよびTLS接続の両方に対応）
デプロイメントのアクセス制御 -> クライアント認証で、デフォルト認証（ユーザー名／パスワード）を設定します。

詳細なポート設定については、Dedicated & BYOCポートガイドをご覧ください。

依存関係のインストール

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 は一意である必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メッセージの受信

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

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

MQTT ブローカーからの切断

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

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

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

接続テスト

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

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

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

FAQ

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

まとめ

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

専用フレックス

VPC ピアリング接続

PrivateLink の設定

拡張認証

拡張認可

ルール

LLM ベースの MQTT データ処理

サーバレスデプロイメント API

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

前提条件 ​

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

サーバレスデプロイメント ​

Dedicated Flex または BYOC デプロイメント ​

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

WebSocket ポートで接続する ​

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

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

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

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

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

メッセージの受信 ​

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

接続テスト ​

FAQ ​

まとめ ​