EMQX Platform

日本語

简体中文
English

日本語

简体中文
English

Appearance

お問い合わせ

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

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

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

前提条件 ​

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

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

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

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

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

js
const clientId = "emqx_vue3_" + 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
// トピックと 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 レベルのサブスクライブを解除できます。

js
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 ブローカーに対して対象のトピックとメッセージ内容を指定する必要があります。

js
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}`);
  });
};

メッセージの受信 ​

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

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

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

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

js
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 で確認できます。

vueui.png

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

vuemqttx.png

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

FAQ ​

  1. 自己署名証明書の使い方は？双方向 TLS/SSL 認証は使えますか？

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

まとめ ​

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