Integrating AWS Amplify with Eclipse Mosquitto for MQTT Messaging

Takahiro Iwasa

4/25/2020

2 min read

Amplify Angular

This note describes how to integrate AWS Amplify with Eclipse Mosquitto as an MQTT message broker.

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 Angular Application

Run the following commands to create a new Angular application and install 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.