javascript - MQTT Connection with Ionic 3 - Stack Overflow

admin管理员组

文章数量:1325079

I need to use publish Subscribe methods in my Ionic 3 application.

I followed this page.

Is there any way we can link MQTT with our Ionic 3 application? If yes, how so? How exactly do I need to go about it for a successful connection?

I installed ng2-mqtt service using

npm install ng2-mqtt --save

This is my code:

index.html

<script src="cordova.js"></script>
<script src="node_modules/ng2-mqtt/mqttws31.js" type="text/javascript"></script>

home.ts

import {Paho} from 'mqttws31'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

      private _client: Paho.MQTT.Client;

      constructor(public paho: Paho) {

      }
         this._client = new Paho.MQTT.Client("52.66.30.178", 1883, "path", "someclient_id");

        this._client.onConnectionLost = (responseObject: Object) => {
          console.log('Connection lost.');
        this.getServerMessage();

         this._client.onMessageArrived = (message: Paho.MQTT.Message) => {
      console.log('Message arrived.');
    };

    this._client.connect({ onSuccess: this.onConnected.bind(this); });
  }

Still I can't get it to work.

Any suggestions and changes will help me. I'm stuck please do.

I need to use publish Subscribe methods in my Ionic 3 application.

I followed this page.

Is there any way we can link MQTT with our Ionic 3 application? If yes, how so? How exactly do I need to go about it for a successful connection?

I installed ng2-mqtt service using

npm install ng2-mqtt --save

This is my code:

index.html

<script src="cordova.js"></script>
<script src="node_modules/ng2-mqtt/mqttws31.js" type="text/javascript"></script>

home.ts

import {Paho} from 'mqttws31'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

      private _client: Paho.MQTT.Client;

      constructor(public paho: Paho) {

      }
         this._client = new Paho.MQTT.Client("52.66.30.178", 1883, "path", "someclient_id");

        this._client.onConnectionLost = (responseObject: Object) => {
          console.log('Connection lost.');
        this.getServerMessage();

         this._client.onMessageArrived = (message: Paho.MQTT.Message) => {
      console.log('Message arrived.');
    };

    this._client.connect({ onSuccess: this.onConnected.bind(this); });
  }

Still I can't get it to work.

Any suggestions and changes will help me. I'm stuck please do.

• javascript
• angular
• typescript
• ionic3
• mqtt

Share Follow edited Feb 10, 2018 at 15:50 stefanobaghino 12.8k44 gold badges4343 silver badges6666 bronze badges asked Feb 9, 2018 at 9:27 CodeMineCodeMine 17933 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

After searching and trying out different things for a while, I found this solution, you can use this library if you want to use MQTT in your project.

Install it using npm install ngx-mqtt --save

Usage: app.module.ts

import { Observable } from 'rxjs/Observable';
import {
  IMqttMessage,
  MqttModule,
  MqttService
} from 'ngx-mqtt';

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

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

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

And then you can use it in your page like: (ex: home.ts file)

import { IMqttMessage, MqttModule, MqttService } from 'ngx-mqtt';
import { Observable } from 'rxjs/Observable';

export class HomePage  {

constructor( private _mqttService: MqttService)
{
   this._mqttService.observe('home/door').subscribe((message: MqttMessage) => 
   {
   this.sensor1 = message.payload.toString();
   console.log(this.sensor1);
   });
}

 publishMessage()
 {
  this._mqttService.unsafePublish("home/button", "on", {qos: 0, retain: false});
 }

For more information about this library: https://github./sclausen/ngx-mqtt

本文标签： javascriptMQTT Connection with Ionic 3Stack Overflow