Skip to content
This repository has been archived by the owner on Aug 24, 2020. It is now read-only.
/ ngx-mqtt-client Public archive

Easy to use reactive MQTT.js wrapper

License

Notifications You must be signed in to change notification settings

wermerb/ngx-mqtt-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

773461d · Jul 17, 2018

History

56 Commits
Mar 24, 2018
May 21, 2018
Mar 22, 2018
Mar 22, 2018
Mar 26, 2018
Jul 17, 2018
Mar 22, 2018
May 21, 2018
Mar 24, 2018
Mar 22, 2018
Mar 22, 2018
May 21, 2018

Repository files navigation

NgxMqttClient npm version coverage bitHound Code

This is a MQTT.js wrapper which provides reactive and strongly typed api for mqtt.

Getting started

Install via npm/yarn

npm install --save ngx-mqtt-client
yarn add  ngx-mqtt-client

Import the module

Import NgxMqttClientModule into your Module.

It is also possible to import into multiple modules if you need multiple mqtt connections.

@NgModule({
    declarations: [ ... ],
    imports: [
        ...
        /**
        * You can provide any configuration that is supported by MQTT.js. 
        */
        NgxMqttClientModule.withOptions({
            manageConnectionManually: true, //this flag will prevent the service to connection automatically
            host: 'broker.hivemq.com',
            protocol: 'ws',
            port: 8000,
            path: '/mqtt'
        })
        ...
    ],
    providers: [ ... ]
})
export class AppModule {
}

How to use

export interface Foo {
    bar: string;
}

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

    messages: Array<Foo> = [];

    status: Array<string> = [];

    constructor(private _mqttService: MqttService) {

        /**
         * Tracks connection status.
         */
        this._mqttService.status().subscribe((s: ConnectionStatus) => {
            const status = s === ConnectionStatus.CONNECTED ? 'CONNECTED' : 'DISCONNECTED';
            this.status.push(`Mqtt client connection status: ${status}`);
        });
    }
    
     /**
     * Manages connection manually.
     * If there is an active connection this will forcefully disconnect that first.
     * @param {IClientOptions} config
     */
    connect(config: IClientOptions): void {
       this._mqttService.connect(config);
    }

    /**
     * Subscribes to fooBar topic.
     * The first emitted value will be a {@see SubscriptionGrant} to confirm your subscription was successful.
     * After that the subscription will only emit new value if someone publishes into the fooBar topic.
     * */
    subscribe(): void {
        this._mqttService.subscribeTo<Foo>('fooBar')
            .subscribe({
                next: (msg: SubscriptionGrant | Foo) => {
                    if (msg instanceof SubscriptionGrant) {
                        this.status.push('Subscribed to fooBar topic!');
                    } else {
                        this.messages.push(msg);
                    }
                },
                error: (error: Error) => {
                    this.status.push(`Something went wrong: ${error.message}`);
                }
            });
    }


    /**
     * Sends message to fooBar topic.
     */
    sendMsg(): void {
        this._mqttService.publishTo<Foo>('fooBar', {bar: 'foo'}).subscribe({
            next: () => {
                this.status.push('Message sent to fooBar topic');
            },
            error: (error: Error) => {
                this.status.push(`Something went wrong: ${error.message}`);
            }
        });
    }

    /**
     * Unsubscribe from fooBar topic.
     */
    unsubscribe(): void {
        this._mqttService.unsubscribeFrom('fooBar').subscribe({
            next: () => {
                this.status.push('Unsubscribe from fooBar topic');
            },
            error: (error: Error) => {
                this.status.push(`Something went wrong: ${error.message}`);
            }
        });
    }

    /**
     * The purpose of this is, when the user leave the app we should cleanup our subscriptions
     * and close the connection with the broker
     */
    ngOnDestroy(): void {
        this._mqttService.end();
    }

}

Demo

git clone https://github.com/wermerb/ngx-mqtt-client.git
cd ngx-mqtt-client
yarn / npm install
ng serve