AWS Amplify と Eclipse Mosquitto を連携させた MQTT メッセージング

AWS Amplify の PubSub モジュールを AWS IoT Core に接続する前に、ローカルの Eclipse Mosquitto ブローカーでテストする方法。

Takahiro Iwasa

2020-04-25

3 min read

Eclipse Mosquitto は、AWS Amplify の PubSub モジュールを AWS IoT Core のようなマネージドエンドポイントに接続する前に、ローカルの MQTT ブローカーとしてテストに利用できます。

Eclipse Mosquitto のセットアップ

以下の内容で docker/docker-compose.yml ファイルを作成します。

1
version: '3.4'
2

3
services:
4
  mosquitto:
5
    image: eclipse-mosquitto:1.6.9
6
    ports:
7
      - 1883:1883 # MQTT
8
      - 9001:9001 # WebSocket
9
    volumes:
10
      - ./mosquitto:/mosquitto/config

以下の内容で docker/mosquitto/mosquitto.conf ファイルを作成します。

1
listener 1883
2
listener 9001
3
protocol websockets

Mosquitto コンテナを起動します。

docker-compose up -d

Angular アプリケーションの構築

新しい Angular アプリケーションを作成し、必要な依存関係をインストールします。

ng new angular-mosquitto-sample
npm i --save [email protected] [email protected] [email protected]

src/polyfills.ts を更新します。

1
/**
2
 * ...
3
 */
4

5
/***************************************************************************************************
6
 * APPLICATION IMPORTS
7
 */
8

9
// Add the following:
10
(window as any).global = window;

src/app/app.component.html を編集します。

1
<h1>Received messages</h1>
2
<hr/>
3
<div *ngFor="let message of messages">
4
  {{ message }}
5
</div>

src/app/app.component.ts を編集します。

1
import { Component, OnInit } from '@angular/core';
2
import { PubSub } from 'aws-amplify';
3
import { MqttOverWSProvider } from '@aws-amplify/pubsub/lib/Providers';
4

5
@Component({
6
  selector: 'app-root',
7
  templateUrl: './app.component.html',
8
  styleUrls: ['./app.component.scss']
9
})
10
export class AppComponent implements OnInit {
11
  messages = [];
12

13
  ngOnInit() {
14
    PubSub.addPluggable(new MqttOverWSProvider({
15
      aws_pubsub_endpoint: 'ws://localhost:9001/',
16
      // Do not use SSL
17
      aws_appsync_dangerously_connect_to_http_endpoint_for_testing: true,
18
    }));
19

20
    PubSub.subscribe('test-topic').subscribe(payload => {
21
      console.log(payload);
22
      this.messages.push(payload.value.message);
23
    });
24
  }
25
}

アプリケーションのテスト

以下のコマンドで mqtt をインストールします。

npm i --save-dev mqtt

ローカルの Mosquitto ブローカーに MQTT メッセージを送信します。

mqtt pub \
  -t 'test-topic' \
  -h localhost \
  -p 1883 \
  -m '{"message": "Hello World"}'

Angular アプリケーションには、受信したメッセージがリアルタイムに表示されるはずです。

まとめ

docker-compose でローカルの Mosquitto ブローカーを起動し、Amplify の PubSub モジュールを介して Angular アプリに組み込むことで、AWS IoT Core のリソースを一切作らずに MQTT メッセージの送受信をエンドツーエンドで確認できました。PubSub は同じ MqttOverWSProvider インターフェースを通じて MQTT over WebSocket に対応する任意のブローカーと通信できるため、Angular 側はブローカーの違いをほとんど意識する必要がありません。window.global の polyfill も PubSub.subscribe('test-topic') の呼び出しも、ブローカーが localhost:9001 の Mosquitto であっても IoT Core であっても変わりません。ローカルテストから先に進む前に必ず確認しておくべきフラグが aws_appsync_dangerously_connect_to_http_endpoint_for_testing です。その名前自体が、本番構成には存在してはならないものだという、かなり直接的な警告になっています。