Vue.js と MQTT.js SDK を使ったデプロイメントへの接続

本記事では、Vue 3 フレームワーク上に構築された Web アプリケーションで MQTT.js を使用し、クライアントと MQTT ブローカー間の接続、サブスクライブ、メッセージ送受信、サブスクリプション解除などの機能を実装する方法を主に紹介します。

この記事では Vue 3 を使用したコード例を示しています。Vue 2 を使用している場合は、Vue 2 MQTT 接続デモをご参照ください。

前提条件

Vue.js クライアントを使って EMQX Cloud に接続する前に、以下の前提条件を満たしていることを確認してください。

MQTT ブローカーのデプロイ
Vue アプリケーションの作成

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ポートガイドをご覧ください。

Vue アプリケーションの作成

Vue アプリケーションの作成方法については、Vue ドキュメントのVue アプリケーションの作成を参照してください。本例では Node 16.16.0 を使用しています。

依存関係のインストール

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

MQTT.js は NPM や Yarn でインストールできるほか、CDN や相対パス経由でのインポートも可能です。本例では NPM コマンドによるインストール方法を紹介します。CDN 経由で Vue を使うプロジェクトには、直接ファイルをインポートする方法が適しています。

NPM または Yarn を使用する場合：
MQTT.js をインストールします。
shell
```
# NPM
npm install mqtt
# または Yarn
yarn add mqtt
```
インストール後は MQTT.js をインポートする必要があります。詳細は Vite Support を参照してください。
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 ポートでの接続

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

const clientId = "emqx_vue3_" + 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（サービス品質）レベルを指定します。

// トピックと QoS
const subscription = ref({
  topic: "topic/mqttx",
  qos: 0 as mqtt.QoS,
});

const doSubscribe = () => {
  const { topic, qos } = subscription.value;
  client.subscribe(
    topic,
    { qos },
    (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
      if (error) {
        console.log("subscribe error:", error);
        return;
      }
      console.log("subscribe successfully:", granted);
    }
  );
};

トピックのサブスクリプション解除

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

const doUnSubscribe = () => {
  const { topic, qos } = subscription.value;
  client.unsubscribe(topic, { qos }, (error) => {
    if (error) {
      console.log("unsubscribe error:", error);
      return;
    }
    console.log(`unsubscribed topic: ${topic}`);
  });
};

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

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

const publish = ref({
  topic: "topic/browser",
  payload: '{ "msg": "Hello, I am browser." }',
  qos: 0 as mqtt.QoS,
});

const doPublish = () => {
  const { topic, qos, payload } = publish.value;
  client.publish(topic, payload, { qos }, (error) => {
    if (error) {
      console.log("publish error:", error);
      return;
    }
    console.log(`published message: ${payload}`);
  });
};

メッセージの受信

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

client.on("message", (topic: string, message) => {
  console.log(`received message: ${message} from topic: ${topic}`);
});

MQTT ブローカーからの切断

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

const destroyConnection = () => {
  if (client.connected) {
    try {
      client.end(false, () => {
        console.log("disconnected successfully");
      });
    } catch (error) {
      console.log("disconnect error:", error);
    }
  }
};

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

接続のテスト

Vue 3 を使って、接続の作成、トピックのサブスクライブ、メッセージの送受信、サブスクリプション解除、切断などの機能を備えたシンプルな MQTT クライアントを作成しました。完全なコードは MQTT Client Vue3で確認できます。

別のクライアントとして MQTT 5.0 クライアントツール - MQTTX を使用し、メッセージの送受信をテストできます。

ブラウザ側でサブスクリプションを解除すると、MQTTX が2回目のメッセージを送信する前に、ブラウザは以降の MQTTX からのメッセージを受信しなくなります。

FAQ

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

まとめ

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

専用フレックス

VPC ピアリング接続

PrivateLink の設定

拡張認証

拡張認可

ルール

LLM ベースの MQTT データ処理

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

Vue.js と MQTT.js SDK を使ったデプロイメントへの接続 ​

前提条件 ​

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

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

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

Vue アプリケーションの作成 ​

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

WebSocket ポートでの接続 ​

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

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

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

トピックのサブスクリプション解除 ​

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

メッセージの受信 ​

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

接続のテスト ​

FAQ ​

まとめ ​