Eclipse Mosquitto with AWS Amplify

Eclipse Mosquitto with AWS Amplify

Takahiro Iwasa
(岩佐 孝浩)
Takahiro Iwasa (岩佐 孝浩)
2 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.

Prerequisites

This post was tested with the following software.

SoftwareVersion
Node.js12.13.1
Angular9.0.7
aws-amplify3.0.9
aws-amplify-angular5.0.9
mqtt3.0.0

Creating Angular Application

Directory Structure

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

Creating Project

Create a new Angular application project with the following command.

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

Creating Mosquitto Container

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

Writing Angular Code

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);
    });
  }
}

Testing

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.

Takahiro Iwasa
(岩佐 孝浩)

Takahiro Iwasa (岩佐 孝浩)

Software Developer at iret, Inc.
Architecting and developing cloud native applications mainly with AWS. Japan AWS Top Engineers 2020-2023