Fórum Problemas com Strophe.js e Ionic 2 #591247

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:
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

Thiago Silva

Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar