mqtt client service as provider
This commit is contained in:
parent
908c554c8c
commit
c00af42ae5
16
package-lock.json
generated
16
package-lock.json
generated
@ -68,14 +68,6 @@
|
||||
"tslib": "1.9.3"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.0.tgz",
|
||||
"integrity": "sha512-L1NM2hU8xvb35mDKIw+SR9UZGZtbSQl6fmd9X/tedaNYjIvyQ7SIX7iDJ+LqD0xUQopB+SeuhDL7D6IwGMV2bQ==",
|
||||
"requires": {
|
||||
"tslib": "1.9.3"
|
||||
}
|
||||
},
|
||||
"@angular/cli": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.7.4.tgz",
|
||||
@ -209,14 +201,6 @@
|
||||
"integrity": "sha512-tgnFAhwBmUs1W0dmcmlBmUlMaOgkoyuSdrcF23lz8W5+nSLb+LnbH5a3blU2NVqA4ESvLKQkPW5dpKa/LuhrPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.0.tgz",
|
||||
"integrity": "sha512-asSzdfLkDDbQEyM/GKUxrlvuj8OvO5DqrNJ3e3uvi0OmZDpaO50yubQvrJ26nbqgwgRo+qwiGNN6XcFwYTRVPQ==",
|
||||
"requires": {
|
||||
"tslib": "1.9.3"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "5.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.11.tgz",
|
||||
|
@ -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 { }
|
||||
|
@ -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() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
15
src/app/mqttclient.service.spec.ts
Normal file
15
src/app/mqttclient.service.spec.ts
Normal file
@ -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();
|
||||
}));
|
||||
});
|
33
src/app/mqttclient.service.ts
Normal file
33
src/app/mqttclient.service.ts
Normal file
@ -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)
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user