ngx-mqtt-client
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.4 • Public • Published

    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-social-login

    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 {
        barstring;
    }
     
    @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

    Install

    npm i ngx-mqtt-client

    DownloadsWeekly Downloads

    95

    Version

    1.3.4

    License

    MIT

    Unpacked Size

    114 kB

    Total Files

    24

    Last publish

    Collaborators

    • wermerb