Vue 3 と Vite を活用した MQTT による IoT デバイス接続監視システムの実装

mosquitto

まず、 mosquitto をダウンロードしてインストールします。

インストール完了後、PowerShell またはコマンドプロンプト（CMD）で正常にインストールされていることを確認します：

cd "C:\Program Files\mosquitto"

.\mosquitto.exe -h

バージョン情報およびコマンドラインオプションの説明が表示されれば、インストールは正常に完了しています。

MQTTX

次に、 MQTTX をダウンロードしてインストールします。

インストール完了後、MQTTX を起動し、Connections の「＋」をクリックして New Connection を選択し、新しい接続を作成します。

以下の内容を入力し、Client ID は指定せず、そのまま Connect をクリックします：

Vue3 Vite

ブラウザでは WebSocket 接続が必要なため、例えば以下のように設定します：

ws://localhost:9001

そのため、Mosquitto のインストールディレクトリに戻り、mosquitto.conf ファイルを探します。

WebSocket リスナーを追加するため、以下の設定を追記します：

listener 1883
protocol mqtt

listener 9001
protocol websockets

allow_anonymous true

次に、タスクマネージャーを開き、Mosquitto サービスを再起動します。

Vue 3 + TypeScript のコードを以下のように作成します:

<template>
  <h3>接收到的訊息：{{ receiveMessage }}</h3>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import mqtt, { type MqttClient } from 'mqtt';

const receiveMessage = ref();

const client: MqttClient = mqtt.connect('ws://localhost:9001');

client.on('connect', () => {
  console.log('MQTT connected');

  client.subscribe('factory/machine01/data');
});

client.on('message', (topic, message) => {
  receiveMessage.value = message.toString();
  console.log(topic, message.toString());
});
</script>

MQTTX の Published を選択し、以下の図のように入力します：

Web ページでは、下図のようにメッセージを受信できます：

このようにして、IoT デバイスのネットワーク接続監視をシミュレートすることができます。さらに、高度な IoT 設備向けダッシュボードのイメージは以下のとおりです：

ご興味をお持ちいただけましたら、ぜひ下記の連絡先までお気軽にお問い合わせください。お客様の課題やご要望に合わせて、ソリューションのデモンストレーションおよび詳細なご説明をさせていただきますAIoT スマートコネクテッドネットワーク 。

お問い合わせ