mqtt client service as provider

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { MqttclientService } from './mqttclient.service'
 
 import { AppComponent } from './app.component';
 import { LedindicatorComponent } from './ledindicator/ledindicator.component';
@@ -14,7 +14,9 @@ import { LedindicatorComponent } from './ledindicator/ledindicator.component';
   imports: [
     BrowserModule
   ],
-  providers: [],
+  providers: [
+    MqttclientService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/ledindicator/ledindicator.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
-import * as Mqtt from 'mqtt'
+import { Component, Input, OnInit } from '@angular/core'
+import { MqttclientService } from '../mqttclient.service'
 
 @Component({
   selector: 'app-ledindicator',
@@ -16,27 +16,21 @@ export class LedindicatorComponent implements OnInit {
   @Input() ledId : string = 'invalid'
   color : string = 'red'
 
-  private mqttClient : Mqtt.MqttClient
 
-  constructor() { 
-    this.mqttClient = Mqtt.connect('ws://localhost:9001')
-    this.mqttClient.on('connect', () => {
-      this.mqttClient.subscribe(this.topic)
-    })
-    this.mqttClient.on('message', (topic: string, messageBuf: Buffer) => {
-      let message : string  = messageBuf.toString('UTF-8')
+  constructor(private mqttclientService : MqttclientService) { 
+  }
+
+  ngOnInit() {
+    this.mqttclientService.register(this.topic, (message: string) => {
       if (message == 'ON') {
         this.color = 'green'
       } else if (message == 'OFF') {
         this.color = 'red'
       } else {
-        this.color = 'blue'
+        this.color = 'lightgrey'
       }
     })
   }
 
-  ngOnInit() {
-  }
-
 }
 

src/app/mqttclient.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MqttclientService } from './mqttclient.service';
+
+describe('MqttclientService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MqttclientService]
+    });
+  });
+
+  it('should be created', inject([MqttclientService], (service: MqttclientService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/mqttclient.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import * as Mqtt from 'mqtt'
+
+type callbackFunc = (message: string) => void
+
+@Injectable()
+export class MqttclientService {
+  private mqttClient : Mqtt.MqttClient
+  private callbacks : Map<string, callbackFunc> = new Map()
+
+  constructor() { 
+    this.mqttClient = Mqtt.connect('ws://localhost:9001')
+    this.mqttClient.on('connect', () => {
+      console.log('MQTT connected')
+      this.callbacks.forEach((value: callbackFunc, key: string) => {
+        this.mqttClient.subscribe(key)
+        console.log(`${key} subscribed`)
+      })
+    })
+    this.mqttClient.on('message', (topic: string, messageBuf: Buffer) => {
+      if (this.callbacks.has(topic)) {
+        let message : string  = messageBuf.toString('UTF-8')
+        console.log(`Providing ${message} to callback for ${topic}`)
+        this.callbacks.get(topic)(message)
+      }
+    })
+  }
+
+  register(topic: string, cb: callbackFunc) {
+    this.callbacks.set(topic, cb)
+    this.mqttClient.subscribe(topic)
+  }
+}