I tried import { SMS } from '@ionic-native/sms';
in my ionic 3 chat application. But document.removeEventListener('onSMSArrive');
is not working.
here are the packages that I am using
"@ionic-native/sms": "^4.3.0",
"@ionic-native/core": "^4.3.0",
"cordova-sms-plugin": "^0.1.11",
The problem is when I come to my page 1st time it perfectly working and receives messages when I got SMS to the phone. But if I went back to another page and come back to the page I receives the same message twice in my function. I think event listener is not removing and when I navigate again to the page another listener is adding to the document.
Here is my code
I add event listener when page loads and I remove it when the page unloads.
public ionViewWillEnter() {
this.smsService.startMessageListner();
}
public ionViewWillLeave() {
this.smsService.stopMessageListner();
}
Here is the startMessageListner()
and stopMessageListner()
functions in my service.
public startMessageListner()
{
--- some works do here ---
this.startListner();
}
public startListner()
{
this.recieveMessage().then((message) => {
--- receives message here and when after
navigating multiple times I receives
multiple same messages here---
}
}
public recieveMessage() {
if (!window.SMS) { alert('SMS plugin not ready'); return; }
window.SMS.startWatch(function() {
console.log('Watching');
}, function() {
console.log('Not Watching');
});
this.promise = new Promise((resolve, reject) => {
document.addEventListener('onSMSArrive', this.resolveMessage(resolve));
});
return this.promise;
}
public stopMessageListner()
{
--- some works do here ---
this.stopReciveMessage();
}
public stopReciveMessage()
{
// ***This one also not works***
// document.removeEventListener('onSMSArrive', (event)=>{
// window.SMS.stopWatch(function() {
// console.log('Stop Watching');
// }, function() {
// console.log('Not Stop Watching');
// });
// });
document.removeEventListener('onSMSArrive');
window.SMS.stopWatch(function() {
console.log('Stop Watching');
}, function() {
console.log('Not Stop Watching');
});
}
Please help me to solve this problem. This issue wasted my whole week. And still no luck :(
===Updated with comments===
all given links say that I have to pass exactly same function while removing event listener. In my case, I am passing this.resolveMessage(resolve)
with resolve
parameter when I am calling document.addEventListener
. So I already tried it as follows and still it not solved.
public recieveMessage() { --same content as above-- let self = this; // I added this line for safe side this.promise = new Promise((resolve, reject) => { self.resolve = resolve; document.addEventListener('onSMSArrive', self.resolveMessage(resolve),false); }); return this.promise; } public stopReciveMessage() { document.removeEventListener('onSMSArrive', this.resolveMessage(this.resolve),false); window.SMS.stopWatch(function() { console.log('Stop Watching'); }, function() { console.log('Not Stop Watching'); }); }
2.
for same recieveMessage()
in 1.
public stopReciveMessage()
{
document.removeEventListener('onSMSArrive', this.resolveMessage,false);
window.SMS.stopWatch(function() {
console.log('Stop Watching');
}, function() {
console.log('Not Stop Watching');
});
}
3.
for same recieveMessage()
in 1.
public stopReciveMessage()
{
let self = this;
this.promise = new Promise((resolve, reject) => {
document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
window.SMS.stopWatch(function() {
console.log('Stop Watching');
}, function() {
console.log('Not Stop Watching');
});
});
}
4.
for same recieveMessage()
in 1.
public stopReciveMessage()
{
let self = this;
this.promise = (resolve, reject) => {
document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
window.SMS.stopWatch(function() {
console.log('Stop Watching');
}, function() {
console.log('Not Stop Watching');
});
};
}
Thanks
stopRecieveMessage
? Try to usethis.promise.unsubscribe();
instantly after send message.addEventListener
, not an other function that has the same content.