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

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

Takahiro Iwasa

2020-04-25

3 min read

Eclipse Mosquitto をローカルの MQTT ブローカーとして使うと、AWS Amplify の PubSub モジュールを AWS IoT Core へ接続する前に動作を確認できます。

CLI から Mosquitto へ MQTT で送信し、Amplify PubSub を使った Angular アプリが WebSocket 経由で受信する構成

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 aws-amplify@3.0.9 aws-amplify-angular@5.0.9 mqtt@3.0.0

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 メッセージの送受信を確認できます。MqttOverWSProvider は MQTT over WebSocket に対応するブローカーで利用できるため、接続先が localhost:9001 の Mosquitto でも AWS IoT Core でも、window.global のポリフィルと PubSub.subscribe('test-topic') の呼び出しは変わりません。

ローカルテストを終えたら、aws_appsync_dangerously_connect_to_http_endpoint_for_testing を削除してください。このオプションは例で使用する非セキュアな接続を許可するものであり、本番環境では有効にしないでください。

記事一覧に戻る