Eclipse Mosquitto を AWS Amplify + Angular で使用する方法

2020年04月25日
投稿者:岩佐 孝浩
カテゴリ:Amazon Web Services, Amplify, Angular タグ:
Eclipse Mosquitto

Eclipse Mosquitto を AWS Amplify + Angular で使用する方法

鈴木商店の岩佐です。
センサーから特定の AWS IoT Topic に Publish されたのち、 Topic Rules を使用して Kinesis Data Stream や Kinesis Firehose, SQS, WEB にデータを流すシステムを構築していました。
WEB は、Cognito + AWS Amplify + Angular で AWS IoT に MQTT over WebSocket で接続していましたが、メッセージ受信時の動作をローカルで手早く確認したい場面があり、 タイトルのとおり、Eclipse Mosquitto (Docker) をメッセージブローカーにしてみました。

https://mosquitto.org/
https://hub.docker.com/_/eclipse-mosquitto

データは以下のように流れます。
mqtt client (publish) -> Mosquitto (localhost) -> WEB (subscribe)

備忘録も兼ねて残しておきます。

準備

前提

以下を事前にインストールしておいて下さい。
– Docker
– docker-compose
– Node.js
– Angular

Version について

以下を使用しました。
– Node.js: 12.13.1
– Angular: 9.0.7
– aws-amplify: 3.0.9
– aws-amplify-angular: 5.0.9
– mqtt: 3.0.0

ディレクトリ構成について

セットアップ

Angular Application

docker/docker-compose.yml

docker/mosquitto/mosquitto.conf

Mosquitto (Message Broker) 起動

Angular ソースコード

src/polyfills.ts

src/app/app.component.html

src/app/app.component.ts

動作確認

MQTT Publish

Angular Application

Angular Mosquitto Sample

まとめ

AWS IoT Topic Rules に色々なターゲットを設定している場合等、気軽にデータを Publish しにくい場面があると思います。
そのような時に、 Amplify PubSub をローカルの MQTT Message Broker (Mosquitto) に接続すると、手早く動作確認したい時に役立つのではないでしょうか。
以上、お役に立てれば幸いです。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です