Problemas com Strophe.js e Ionic 2
08/02/2018
0
Boa tarde pessoal!
Estou desenvolvendo um um chat com IONIC 2 que fará comunicação com um servidor OpenFire. Para isso, estou utilizando o framework Strophe.js.
O problema que estou tendo é para realizar o login. Criei a Classe ConexaoService (com o decorate @Injectable) para ser responsável por gerenciar as conexões, e criei a classe LoginComponent (com o decorate @Component).
Ao chamar o método fazerLogin(), o mesmo envia os dados do usuário para o método login do serviço, que, por sua vez, inicia a conexão e passa o retorno para uma função de Callback, conforme código abaixo:
O problema é que o retorno enviado para a função de callback é proveniente do Strophe.js, e é executado de forma assíncrona. Sempre que ocorre uma alteração no status da conexão, ele envia o retorno para este callback. Para saber se o usuário está ou não conectado, eu preciso aguardar o retorno de um status = 4 ou status = 5 e, com isso, não consigo atualizar a variavél loggedin para true, de forma que eu possa obter este valor na classe LoginComponent e redirecionar para a HomePage ou Exibir uma mensagem de erro.
A minha dificuldade está em fazer com que o método login() aguarde o recebimento de um status = 4 ou 5 na função de Callback, para então retornar algum valor para a função fazerLogin().
Obs.: A implementação de Observable não funcionou nese caso.
Seguem os códigos das 2 classes:
[code=jsimport { Component } from ''''@angular/core'''';
import { NavController, AlertController, LoadingController, Loading } from ''''ionic-angular'''';
import { ContatosComponent } from ''''../contatos/contatos'''';
import { PerfilComponent } from ''''../perfil/perfil'''';
import { HomePage } from ''''../home/home'''';
import { ConexaoService } from ''''../../services/conexaoService'''';
import { Strophe } from ''''strophe.js'''';
@Component({
selector: ''''page-login'''',
templateUrl: ''''login.html''''
})
export class LoginPage {
loading: Loading;
credenciais = { usuario: '''''''', senha: '''''''', host: '''''''' };
usuarioLogado = false; // Armazena variável para indicar se está ou não logado
constructor(private conexao: ConexaoService, public navCtrl: NavController, private alertController: AlertController, private loadingController: LoadingController) {
console.log("Página de Login Carregada!");
if(this.usuarioLogado){
this.navCtrl.setRoot(HomePage);
}
}
fazerLogin(){
this.conexao.login(this.credenciais.usuario, this.credenciais.host, this.credenciais.senha, this.onConnect);
if(this.conexao.isLoggedin()){
// Redireciona para a página principal, que contém as TABs
this.navCtrl.setRoot(HomePage);
} else {
this.showError("Credenciais inválidas");
}
}
showLoading() {
this.loading = this.loadingController.create({
content: ''''Please wait...''''
});
this.loading.present();
}
// Função de callback do Strophe.Connection.connect()
onConnect(status){
//$pres();
if (status == Strophe.Status.CONNECTING) {
console.log(''''Strophe is connecting.'''');
} else if (status == Strophe.Status.CONNFAIL) {
console.log(''''Strophe failed to connect.'''');
} else if (status == Strophe.Status.DISCONNECTING) {
console.log(''''Strophe is disconnecting.'''');
} else if (status == Strophe.Status.DISCONNECTED) {
console.log(''''Strophe is disconnected.'''');
} else if (status == Strophe.Status.CONNECTED) {
console.log("Strophe is connected!");
// this.connection.send($pres().tree());
//this.conexao.setLoggedIn(true);
this.navCtrl.setRoot(HomePage);
}
}
showError(text) {
this.loading.dismiss();
let alert = this.alertController.create({
title: ''''Falha no Login'''',
subTitle: text,
buttons: [''''OK'''']
});
alert.present();
}
}
][/code]
Alguém tem alguma ideia de como realizar esta implementação?
Obrigado!
Estou desenvolvendo um um chat com IONIC 2 que fará comunicação com um servidor OpenFire. Para isso, estou utilizando o framework Strophe.js.
O problema que estou tendo é para realizar o login. Criei a Classe ConexaoService (com o decorate @Injectable) para ser responsável por gerenciar as conexões, e criei a classe LoginComponent (com o decorate @Component).
Ao chamar o método fazerLogin(), o mesmo envia os dados do usuário para o método login do serviço, que, por sua vez, inicia a conexão e passa o retorno para uma função de Callback, conforme código abaixo:
this.connection = new Strophe.Connection(this.BOSH_SERVICE, {''''keepalive'''': true}); this.connection.connect(jid, senha, this.onConnect);
O problema é que o retorno enviado para a função de callback é proveniente do Strophe.js, e é executado de forma assíncrona. Sempre que ocorre uma alteração no status da conexão, ele envia o retorno para este callback. Para saber se o usuário está ou não conectado, eu preciso aguardar o retorno de um status = 4 ou status = 5 e, com isso, não consigo atualizar a variavél loggedin para true, de forma que eu possa obter este valor na classe LoginComponent e redirecionar para a HomePage ou Exibir uma mensagem de erro.
A minha dificuldade está em fazer com que o método login() aguarde o recebimento de um status = 4 ou 5 na função de Callback, para então retornar algum valor para a função fazerLogin().
Obs.: A implementação de Observable não funcionou nese caso.
Seguem os códigos das 2 classes:
import { Injectable } from ''''@angular/core''''; import { Strophe } from ''''strophe.js''''; @Injectable() export class ConexaoService{ private connection: Strophe.Connection = null; private loggedIn: boolean = false; private host: string = "localhost"; private BOSH_SERVICE: string = "http://"+ this.host +":7070/http-bind/"; constructor(){ } getConnection(){ return this.connection; } setLoggedIn(logged){ this.loggedIn = logged; } isLoggedin(){ return this.loggedIn; } login(jid, host, senha, callback){ this.connection = new Strophe.Connection(this.BOSH_SERVICE, {''''keepalive'''': true}); this.connection.connect(jid, senha, this.onConnect); } onConnect(status){ //$pres(); if (status == Strophe.Status.CONNECTING) { console.log(''''Strophe is connecting.''''); } else if (status == Strophe.Status.CONNFAIL) { console.log(''''Strophe failed to connect.''''); } else if (status == Strophe.Status.DISCONNECTING) { console.log(''''Strophe is disconnecting.''''); } else if (status == Strophe.Status.DISCONNECTED) { console.log(''''Strophe is disconnected.''''); } else if (status == Strophe.Status.CONNECTED) { console.log("Strophe is connected!"); this.connection.send($pres().tree()); this.loggedIn=true; } } }
[code=jsimport { Component } from ''''@angular/core'''';
import { NavController, AlertController, LoadingController, Loading } from ''''ionic-angular'''';
import { ContatosComponent } from ''''../contatos/contatos'''';
import { PerfilComponent } from ''''../perfil/perfil'''';
import { HomePage } from ''''../home/home'''';
import { ConexaoService } from ''''../../services/conexaoService'''';
import { Strophe } from ''''strophe.js'''';
@Component({
selector: ''''page-login'''',
templateUrl: ''''login.html''''
})
export class LoginPage {
loading: Loading;
credenciais = { usuario: '''''''', senha: '''''''', host: '''''''' };
usuarioLogado = false; // Armazena variável para indicar se está ou não logado
constructor(private conexao: ConexaoService, public navCtrl: NavController, private alertController: AlertController, private loadingController: LoadingController) {
console.log("Página de Login Carregada!");
if(this.usuarioLogado){
this.navCtrl.setRoot(HomePage);
}
}
fazerLogin(){
this.conexao.login(this.credenciais.usuario, this.credenciais.host, this.credenciais.senha, this.onConnect);
if(this.conexao.isLoggedin()){
// Redireciona para a página principal, que contém as TABs
this.navCtrl.setRoot(HomePage);
} else {
this.showError("Credenciais inválidas");
}
}
showLoading() {
this.loading = this.loadingController.create({
content: ''''Please wait...''''
});
this.loading.present();
}
// Função de callback do Strophe.Connection.connect()
onConnect(status){
//$pres();
if (status == Strophe.Status.CONNECTING) {
console.log(''''Strophe is connecting.'''');
} else if (status == Strophe.Status.CONNFAIL) {
console.log(''''Strophe failed to connect.'''');
} else if (status == Strophe.Status.DISCONNECTING) {
console.log(''''Strophe is disconnecting.'''');
} else if (status == Strophe.Status.DISCONNECTED) {
console.log(''''Strophe is disconnected.'''');
} else if (status == Strophe.Status.CONNECTED) {
console.log("Strophe is connected!");
// this.connection.send($pres().tree());
//this.conexao.setLoggedIn(true);
this.navCtrl.setRoot(HomePage);
}
}
showError(text) {
this.loading.dismiss();
let alert = this.alertController.create({
title: ''''Falha no Login'''',
subTitle: text,
buttons: [''''OK'''']
});
alert.present();
}
}
][/code]
Alguém tem alguma ideia de como realizar esta implementação?
Obrigado!
Thiago Silva
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)