init

README.md

@@ -1,27 +1,102 @@
-# NgxMqttClient
+# NgxSocialLogin 
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.
+This is a MQTT.js wrapper which provides reactive and strongly typed api for mqtt.
 
-## Development server
+## Getting started
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+### Install via npm/yarn 
 
-## Code scaffolding
+```sh
+npm install --save ngx-mqtt-client
+```
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+```sh
+yarn add ngx-social-login
+```
 
-## Build
+### Import the module
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+Import `NgxMqttClientModule` into your `Module`.
+You can provide any configuration that is supported by MQTT.js.
 
-## Running unit tests
+```javascript
+@NgModule({
+    declarations: [ ... ],
+    imports: [
+        ...
+        NgxMqttClientModule.forRoot({
+            host: 'broker.hivemq.com',
+            protocol: 'ws',
+            port: 8000,
+            path: '/mqtt'
+        })
+        ...
+    ],
+    providers: [ ... ]
+})
+export class AppModule {
+}
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+### How to use
 
-## Running end-to-end tests
+```javascript
+export interface Foo {
+    bar: string;
+}
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnDestroy {
 
-## Further help
+    messages: Array<Foo> = [];
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+    constructor(private _mqttService: MqttService) {
+    }
+
+    /**
+     * Subscribes to fooBar topic.
+     * This subscription will only emit new value if someone publish into the fooBar topic.
+     * */
+    subscribe(): void {
+        this._mqttService.subscribeTo<Foo>('fooBar')
+            .subscribe((msg: Foo) => {
+                this.messages.push(msg)
+            });
+    }
+
+
+    /**
+     * Sends message to fooBar topic.
+     */
+    sendMsg(): void {
+        this._mqttService.publishTo<Foo>('fooBar', {bar: 'foo'}).subscribe({
+            next: () => console.log('message sent'),
+            error: () => console.error('oopsie something went wrong')
+        });
+    }
+
+    /**
+     * Unsubscribe from fooBar topic.
+     */
+    unsubscribe(): void {
+        this._mqttService.unsubscribeFrom('fooBar').subscribe({
+            next: () => this.messages.push('Successfully unsubscribed!' as any),
+            error: () =>this.messages.push('oopsie something went wrong' as any)
+        })
+    }
+
+    /**
+     * 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();
+    }
+
+}
+
+```

karma.conf.js

@@ -1,33 +1,34 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
+process.env.CHROME_BIN = require('puppeteer').executablePath();
 module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    angularCli: {
-      environment: 'dev'
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular/cli'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('@angular/cli/plugins/karma')
+        ],
+        client: {
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageIstanbulReporter: {
+            reports: ['html', 'lcovonly'],
+            fixWebpackSourcePaths: true
+        },
+        angularCli: {
+            environment: 'dev'
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['ChromeHeadless'],
+        singleRun: false
+    });
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mqtt-client",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -10,8 +10,16 @@
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
-  "private": true,
+  "peerDependencies": {
+    "@angular/core": ">2.0.0",
+    "rxjs": ">5.5.0",
+    "typescript": ">2.4.0",
+    "mqtt": "^2.16.0"
+  },
   "dependencies": {
+    "mqtt": "^2.16.0"
+  },
+  "devDependencies": {
     "@angular/animations": "^5.2.0",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
@@ -22,11 +30,8 @@
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
-    "mqtt": "^2.16.0",
     "rxjs": "^5.5.6",
-    "zone.js": "^0.8.19"
-  },
-  "devDependencies": {
+    "zone.js": "^0.8.19",
     "@angular/cli": "~1.7.3",
     "@angular/compiler-cli": "^5.2.0",
     "@angular/language-service": "^5.2.0",
@@ -35,15 +40,40 @@
     "@types/node": "~6.0.60",
     "codelyzer": "^4.0.1",
     "jasmine-core": "~2.8.0",
+    "jasmine-marbles": "^0.2.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~2.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "ng-packagr": "^2.2.0",
     "protractor": "~5.1.2",
+    "puppeteer": "^1.2.0",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
     "typescript": "~2.5.3"
-  }
+  },
+  "description": "Strongly typed reactive mqtt client.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wermerb/ngx-mqtt-client.git"
+  },
+  "keywords": [
+    "angular",
+    "angular2",
+    "angular4",
+    "angular5",
+    "angular-mqtt",
+    "mqtt",
+    "mqtt-client",
+    "ngx-mqtt",
+    "mqtt angular",
+    "angular mqtt"
+  ],
+  "author": "Balázs Wermer <[email protected]>",
+  "bugs": {
+    "url": "https://github.com/wermerb/ngx-mqtt-client/issues"
+  },
+  "homepage": "https://github.com/wermerb/ngx-mqtt-client#readme"
 }

src/app/app.component.html

@@ -1,20 +1,9 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<button (click)="subscribe()">SUBSCRIBE TO TEST TOPIC</button>
+<button (click)="unsubscribe()">UNSUBSCRIBE FROM TEST TOPIC</button>
+<button (click)="sendMsg()">SEND TEST MESSAGE</button>
 
+<div>
+    <div *ngFor="let message of messages">
+        {{message | json}}
+    </div>
+</div>

src/app/app.component.ts

@@ -1,10 +1,63 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
+import {MqttService} from './ngx-mqtt-client/services/mqtt.service';
+
+export interface Foo {
+    bar: string;
+}
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnDestroy {
+
+    messages: Array<Foo> = [];
+
+    constructor(private _mqttService: MqttService) {
+    }
+
+    /**
+     * Subscribes to fooBar topic.
+     * This subscription will only emit new value if someone publish into the fooBar topic.
+     * */
+    subscribe(): void {
+        this._mqttService.subscribeTo<Foo>('fooBar')
+            .subscribe((msg: Foo) => {
+                this.messages.push(msg)
+            });
+
+
+        this.messages.push('Successfully subscribed!' as any);
+    }
+
+
+    /**
+     * Sends message to fooBar topic.
+     */
+    sendMsg(): void {
+        this._mqttService.publishTo<Foo>('fooBar', {bar: 'foo'}).subscribe({
+            next: () => console.log('message sent'),
+            error: () => console.error('oopsie something went wrong')
+        });
+    }
+
+    /**
+     * Unsubscribe from fooBar topic.
+     */
+    unsubscribe(): void {
+        this._mqttService.unsubscribeFrom('fooBar').subscribe({
+            next: () => this.messages.push('Successfully unsubscribed!' as any),
+            error: () =>this.messages.push('oopsie something went wrong' as any)
+        })
+    }
+
+    /**
+     * 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();
+    }
+
 }