Integrating AWS Amplify with Eclipse Mosquitto for MQTT Messaging

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

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

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

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

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

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
}