Closed kabaluyot closed 5 years ago
edusperoni
commented
5 years ago Please post the rest of the code. But from what I gather, it seems you're forgetting to create the client:
mqtt_client: MQTTClient = new MQTTClient(this.mqtt_clientOptions);
kabaluyot
commented
5 years ago //$router.push('/counter')
import {Vue,Component} from 'vue-property-decorator'
import {exit} from 'nativescript-exit';
import * as dialogs from "tns-core-modules/ui/dialogs";
import {MQTTClient, ClientOptions} from "nativescript-mqtt";
import {Message} from "nativescript-mqtt/common";
@Component
export default class Home extends Vue {
//region data
mqtt_host: string = "m15.cloudmqtt.com";
mqtt_port: number = 30811;
mqtt_useSSL: boolean = false;
mqtt_path: string = "/mqtt";
mqtt_username: string = "wtbqjojw";
mqtt_password: string = "UE2yE1qKE_ed";
mqtt_topic: string = "test-topic";
mqtt_clientOptions: ClientOptions = {
host: this.mqtt_host,
port: this.mqtt_port,
useSSL: this.mqtt_useSSL,
path: this.mqtt_path
};
mqtt_client: MQTTClient = new MQTTClient(this.mqtt_clientOptions);
//end region data
constructor() {
super();
this.setupHandlers();
}
//region method
connect() : void {
try{
this.mqtt_client.connect(this.mqtt_username, this.mqtt_password);
}
catch (e) {
console.log("Caught error: " + e);
}
}
subscribe() : void {
try {
this.mqtt_client.subscribe(this.mqtt_topic);
}
catch (e) {
console.log("Caught error: " + e);
}
}
setupHandlers() : void {
this.mqtt_client.onConnectionFailure.on((err) => {
console.log("Connection failed: " + err);
});
this.mqtt_client.onConnectionSuccess.on(() => {
console.log("Connected successfully!");
this.subscribe();
});
this.mqtt_client.onConnectionLost.on((err) => {
console.log("Connection lost: " + err);
});
this.mqtt_client.onMessageArrived.on((message: Message) => {
console.log("Message received: " + message.payload);
});
}
quit():void{
dialogs.confirm({
title: "Confirm",
message: "Do you really want to exit?",
okButtonText: "YES",
cancelButtonText: "NO",
}).then(result => {
// result argument is boolean
if(result){
exit();
}
});
}
//end region method
}
</script>that's weird, can you confirm this.mqtt_client is defined in your constructor? It should be created by this line:
mqtt_client: MQTTClient = new MQTTClient(this.mqtt_clientOptions);
You can also try calling this.mqtt_client = new MQTTClient(this.mqtt_clientOptions); in your constructor
kabaluyot
commented
5 years ago ok I will try it.. by the way, I was following the angular-template but im using vue, does this work like in your ts demo code?, I mean like it updated automatically because of Observable class of tns-core
edusperoni
commented
5 years ago JS/TS/Angular/Vue shouldn't matter. The demo code is plain typescript. I just use:
this.mqttClient = new MQTTClient({
clientId: "test",
host: "broker.mqttdashboard.com",
path: "/mqtt",
useSSL: false,
port: 8000
});before registering the handlers.
You don't have to use Observable at all
kabaluyot
commented
5 years ago I tried declaring this.mqtt_client to constructor, still these shows
errors:
S: found in
JS:
JS: --->
code:
`import {Vue,Component} from 'vue-property-decorator' import {exit} from 'nativescript-exit'; import * as dialogs from "tns-core-modules/ui/dialogs"; import {MQTTClient, ClientOptions} from "nativescript-mqtt"; import {Message} from "nativescript-mqtt/common";
@Component export default class Home extends Vue {
//region data mqtt_host: string = "m15.cloudmqtt.com"; mqtt_port: number = 30811; mqtt_useSSL: boolean = false; mqtt_path: string = "/mqtt"; mqtt_username: string = "wtbqjojw"; mqtt_password: string = "UE2yE1qKE_ed"; mqtt_topic: string = "testtopic/1"; mqtt_client: MQTTClient;
mqtt_clientOptions: ClientOptions = { host: this.mqtt_host, port: this.mqtt_port, useSSL: this.mqtt_useSSL, path: this.mqtt_path };
//end region data
constructor() {
super();
this.mqtt_client = new MQTTClient(this.mqtt_clientOptions);
this.setupHandlers();
}//region method connect() : void { try{ this.mqtt_client.connect(this.mqtt_username, this.mqtt_password); } catch (e) { console.log("Caught error: " + e); } }
subscribe() : void {
try {
this.mqtt_client.subscribe(this.mqtt_topic);
}
catch (e) {
console.log("Caught error: " + e);
}
}
setupHandlers() : void {
this.mqtt_client.onConnectionFailure.on((err) => {
console.log("Connection failed: " + err);
});
this.mqtt_client.onConnectionSuccess.on(() => {
console.log("Connected successfully!");
this.subscribe();
});
this.mqtt_client.onConnectionLost.on((err) => {
console.log("Connection lost: " + err);
});
this.mqtt_client.onMessageArrived.on((message?: Message) => {
if(message){
console.log("Message received: " + message.payload);
}
});
}quit():void{ dialogs.confirm({ title: "Confirm", message: "Do you really want to exit?", okButtonText: "YES", cancelButtonText: "NO", }).then(result => { // result argument is boolean if(result){ exit(); } }); } //end region method }`
kabaluyot
commented
5 years ago Seems like all sub functions inside setuphandlers throws undefined, I tried it by commenting them one by one
kabaluyot
commented
5 years ago I figured it out.. It is because this inside the sub functions of setupHandlers was referring to the instance of the setupHandlers.. So I tried it by copying the functions and paste it directly to constructor and it was successfully connected.
kabaluyot
commented
5 years ago Here's the code for others:
constructor() { super(); this.mqtt_client = new MQTTClient(this.mqtt_clientOptions); this.setupHandlers(this); }
and for setuphandlers: ` setupHandlers(vm: any) : void { vm.mqtt_client.onConnectionFailure.on((err:string) => { console.log("Connection failed: " + err); });
vm.mqtt_client.onConnectionSuccess.on(() => {
console.log("Connected successfully!");
vm.subscribe();
});
vm.mqtt_client.onConnectionLost.on((err:string) => {
console.log("Connection lost: " + err);
});
vm.mqtt_client.onMessageArrived.on((message?: Message) => {
if(message){
this.receiveMsg = message.payload;
console.log("Message received: " + this.receiveMsg);
}
});
}`
I use nativescript-vue -ts template for an mqtt app and during compilation, these error shows
crashing the entire app.