Integrating AWS Amplify with Eclipse Mosquitto for MQTT Messaging

Testing AWS Amplify's PubSub module against a local Eclipse Mosquitto broker before pointing it at AWS IoT Core.

Takahiro Iwasa

2020-04-25

2 min read

Eclipse Mosquitto can serve as a local MQTT broker for testing AWS Amplify’s PubSub module before pointing it at a managed endpoint like AWS IoT Core.

Setting Up Eclipse Mosquitto

Create a docker/docker-compose.yml file with the following content:

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

Create a docker/mosquitto/mosquitto.conf file with the following content:

1
listener 1883
2
listener 9001
3
protocol websockets

Start the Mosquitto container:

docker-compose up -d

Building an Angular Application

Create a new Angular application and install the necessary dependencies:

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

Update src/polyfills.ts:

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

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

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

Edit src/app/app.component.html:

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

Edit 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
}

Testing the Application

Install mqtt with the following command:

npm i --save-dev mqtt

Publish MQTT messages to the local Mosquitto broker:

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

The Angular application should display the received message in real time.

Conclusion

Running a local Mosquitto broker with docker-compose and connecting it to an Angular application through Amplify’s PubSub module allows MQTT messages to be tested end to end without provisioning AWS IoT Core resources. The MqttOverWSProvider interface works with MQTT-over-WebSocket brokers, so the window.global polyfill and PubSub.subscribe('test-topic') call remain the same whether the application connects to Mosquitto at localhost:9001 or to AWS IoT Core.

Before moving beyond local testing, remove aws_appsync_dangerously_connect_to_http_endpoint_for_testing. This option permits the insecure connection used in the example and should not be enabled in production.

Back to posts