This is a simple ionic wrapper of paho-mqtt. For more detail of paho-mqtt, please refer to this paho-mqtt github page.
npm install ionic-mqtt --save
// inside your app.module.ts
...
import { IonicMqttModule, MQTTService } from 'ionic-mqtt';
@NgModule({
...,
imports: [
...,
IonicMqttModule
],
providers: [
...,
MQTTService
],
});
export class AppModule {}
// inside your component
import { MQTTService } from 'ionic-mqtt';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private _mqttClient: any;
private MQTT_CONFIG: {
host: string,
port: number,
clientId: string,
} = {
host: "test.mosquitto.org",
port: 8081,
clientId: "mqtt",
};
private TOPIC: string[] = [];
constructor(private mqttService: MQTTService) {
}
ngOnInit() {
this._mqttClient = this.mqttService.loadingMqtt(this._onConnectionLost, this._onMessageArrived, this.TOPIC, this.MQTT_CONFIG);
}
private _onConnectionLost(responseObject) {
// connection listener
// ...do actions when connection lost
console.log('_onConnectionLost', responseObject);
}
private _onMessageArrived(message) {
// message listener
// ...do actions with arriving message
console.log('message', message);
}
...
// public function for sending and publishing mqtt messages
public sendMessage() {
console.log('sendMessage')
this._mqttService.sendMessage(TOPIC, MESSAGE);
}
public publishMessage() {
console.log('publishMessage')
this._mqttService.publishMessage(TOPIC, MESSAGE);
}
...
}
// inside your component html
<ion-content padding>
...
<button (click)="sendMessage()">Send Message</button>
<button (click)="publishMessage()">Publish Message</button>
...
</ion-content>
The above example uses the Mosquitto broder/server, if you want to run your own localhost MQTT broker, you can use Mosquitto or Mosca, to launch your own broker. Remember to change the host, port and clientId to your localhost server respectively.
callback function
(response) {}
called when a connection has been lost. after a connect() method has succeeded. Establish the call back used when a connection has been lost. A single response object parameter is passed to the onConnectionLost callback containing the following fields:
- errorCode
- errorMessage
callback function
(message) {}
called when a message has arrived. Parameters passed to the onMessageArrived callback are:
- Paho.MQTT.Message
string[]
mandatory the array of the topics in string to which the message is to be published.
host: string
the address of the messaging server, as a fully qualified WebSocket URI, as a DNS name or dotted decimal IP address.
port: number
the port number to connect to - only required if host is not a URI.
path?: string
the path on the host to connect to - only used if host is not a URI. Default: '/mqtt'.
clientId: string
the Messaging client identifier, between 1 and 23 characters in length.
Publish a message to the consumers of the destination in the Message. Synonym for Paho.Mqtt.Client#send
topic: string
mandatory the name of the topic to which the message is to be published.
playload: string
The message data to be published.
qos?: number
The Quality of Service used to deliver the message. 0 Best effort (default).
- At least once.
- Exactly once.
retained?: boolean
If true, the message is to be retained by the server and delivered to both current and future subscriptions. If false the server only delivers the message to current subscribers, this is the default for new Messages.
Before you can begin using these mqtt service with your project, you need to make sure your project meets a few of these requirements:
"typescript" >= 3.4.3
"@ionic-angular" >= 4.7.1
"@angular/core" >= 8.1.2
This ionic-mqtt wrapper is an Open Source Package. So it is open to any contributors.
MIT