Eclipse Mosquitto with AWS Amplify

Takahiro Iwasa

Apr 25, 2020

3 min read

Amplify Angular

AWS Amplify users can utilize Eclipse Mosquitto as an MQTT message broker in their local environment. It also offers Docker image. When developing an application connecting to AWS IoT Core, running Mosquitto locally helps you confirm the application behavior without publishing messages to other subscribers.

This post was tested with the following software.

/
|-- docker/
|   |-- mosquitto/
|   |   `-- mosquitto.conf
|   `-- docker-compose.yml
|-- src/
|   |-- app/
|   |   |-- app.component.html
|   |   |-- app.component.ts
|   |   `-- ...
|   `-- ...
|-- package.json
`-- ...

Create a new Angular application project with the following command.

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

Create docker/docker-compose.yml with the following content.

version: '3.4'

services:
  mosquitto:
    image: eclipse-mosquitto:1.6.9
    ports:
      - 1883:1883 # MQTT
      - 9001:9001 # WebSocket
    volumes:
      - ./mosquitto:/mosquitto/config

Create docker/mosquitto/mosquitto.conf with the following content.

listener 1883
listener 9001
protocol websockets

Start the Mosquitto container to serve as a message broker.

docker-compose up -d

Edit src/polyfills.ts and add (window as any).global = window;.

/**
 * ...
 */

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

// Add
(window as any).global = window;

Edit src/app/app.component.html like the following content.

<h1>Received messages</h1>
<hr/>
<div *ngFor="let message of messages">
  {{message}}
</div>

Edit src/app/app.component.ts like the following code. AWS Amplify offers PubSub and MqttOverWSProvider.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  messages = [];

  ngOnInit() {
    PubSub.addPluggable(new MqttOverWSProvider({
      aws_pubsub_endpoint: 'ws://localhost:9001/',
      // Do not use SSL
      aws_appsync_dangerously_connect_to_http_endpoint_for_testing: true,
    }));

    PubSub.subscribe('test-topic').subscribe(payload => {
      console.log(payload);
      this.messages.push(payload.value.message);
    });
  }
}

Publish mqtt messages to the local Mosquitto message broker with the following command.

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

Then, you should see the Angular application receiving the message.

When developing applications which are interacted with a backend through MQTT protocol, Eclipse Mosquitto can help you test your applications locally.

I hope you will find this post useful.