Giter VIP home page Giter VIP logo

ngx-mqtt's Introduction

ngx-mqtt npm version

This library isn't just a wrapper around MQTT.js for angular >= 2. It uses observables and takes care of subscription handling and message routing.

Description

ngx-mqtt is well suited for applications with many components and many subscribers. The problem is, if you regulary subscribe to mqtt with client libraries like MQTT.js, still every message is handled with an on-message-eventhandler, so you have to dispatch the received messages for yourself. So, if you have multiple components using mqtt in your code, you just want to only receive the messages for your local filter. Furthermore, if you destroy a component, you want to unsubscribe from mqtt, but only if no other component uses the same filter.

This library exposes a method observe(filter), which returns an Observable. If you subscribe to this observable, the actual mqtt subscription is executed. The topic filter is used to only add matching mqtt messages to the observable. Every other execution of observe(filter) with an already used filter will return the same observable. The observable keeps track of the subscribers and executes an mqtt unsubscribe method, if all subscribers have unsubscribed from the observable.

Installation

Simply install it from npm:

npm install ngx-mqtt --save

Usage

import { Observable } from 'rxjs/Observable';

import {
  MqttMessage,
  MqttModule,
  MqttService
} from 'ngx-mqtt';

export const MQTT_SERVICE_OPTIONS = {
  hostname: 'localhost',
  port: 9001,
  path: '/mqtt'
};

export function mqttServiceFactory() {
  return new MqttService(MQTT_SERVICE_OPTIONS);
}

@NgModule({
  imports: [
    ...
    MqttModule.forRoot({
      provide: MqttService,
      useFactory: mqttServiceFactory
    })
  ]
  ...
})

export class AppModule { }

@Component({
  template: `
    <h1>{{mesage}}</h1>
    <h1>{{(myOtherMessage$ | async)?.payload.toString()}}</h1>
  `
})
export class ExampleComponent {
  public myOtherMessage$: Observable<MqttMessage>;

  constructor(private _mqttService: MqttService) { 
    this._mqttService.observe('my/topic').subscribe((message: MqttMessage) => {
      this.myMessage = message.payload.toString();
    });
    this.myOtherMessage$ = this._mqttService.observe('my/other/topic');
  }

  public unsafePublish(topic: string, message: string): void {
    this._mqttService.unsafePublish(topic, message, {qos: 1, retain: true});
  }
}

For further usage use this module, see demo.module.ts and index.html. To see the demo in action use

npm install && npm run start

Test

$ npm test

ngx-mqtt's People

Contributors

sclausen avatar trojanc avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.