Virtualize Interatividade Digital

Desenvolvendo aplicações cliente-servidor com Flash/ActionScript e SmartFoxServer [02/03]

Esta é a segunda parte do tutorial de desenvolvimento de aplicações cliente-servidor utilizando Flash/ActionScript e SmartFoxServer.

No primeiro tutorial vimos como instalar e preparar o ambiente de desenvolvimento e entendemos a estrutura básica do SmartFoxServer, tanto do lado cliente quanto do servidor.

Agora iremos “colocar a mão na massa”, desenvolvendo uma aplicação de bate-papo simples.

1) Descrição da aplicação:

Na tela inicial, o usuário poderá digitar um login à sua escolha e clicar em “conectar”. O servidor irá validar se o nome de usuário já foi escolhido por outra pessoa. Se sim, o usuário será notificado. Caso contrário, o usuário se conectará ao bate-papo e na tela seguinte poderá conversar com os outros usuários conectados.

2) Lado servidor da aplicação:

2.1) Modificando o arquivo config.xml

O primeiro passo ao desenvolver uma aplicação para rodar no SmartFoxServer é definir no config.xml uma nova zona, que irá representar a aplicação. Dentro do config.xml existe um trecho para configuração de zonas, que fica entre as tags <Zones> e </Zones>. Segue o código para a zona utilizada neste tutorial:

<Zone name="zonaTutorial" uCountUpdate="true" maxUsers="4000" customLogin="true">
   <AutoReloadExtensions>true</AutoReloadExtensions>
   <Rooms>
      <Room name="Entrada" maxUsers="4000" isPrivate="false" isTemp="false" autoJoin="true" isGame="false">
      </Room>
   </Rooms>
   <Extensions>
      <extension name="ExtensaoChat" className="ExtensaoChat.as" type="script" />
   </Extensions>
</Zone>

É necessário entender o seguinte a respeito desta zona:

• O atributo name=”zonaTutorial” dá um nome à zona, permitindo que as aplicações clientes se conectem a ela através desse nome;
• Podemos definir uma quantidade máxima de usuários tanto para as zonas quanto para as salas;
• O atributo customLogin=”true” nos dá o controle do mecanismo de login de usuários. Quanto este atributo é false, o SmartFoxServer faz o controle à sua maneira. Geralmente utilizamos true, pois queremos utilizar nosso próprio mecanismo de login (por exemplo, buscando o usuário em um banco de dados);
• Dentro da zona podemos definir salas. Elas também possuem nomes, para os clientes poderem identificá-las mais facilmente;
• Uma sala com autoJoin=”true” permite que um cliente conectado à zona da qual ela faz parte possa utilizar a função autoJoin() para se conectar automaticamente à sala. Se nenhuma sala possui autoJoin=”true”, o cliente deve informar o nome da sala;
• Uma sala pode ser de jogo ou não (isGame true ou false). O SmartFox provê algumas funcionalidades específicas para salas de jogos, então podemos usá-las ao criar um jogo;
• Podemos definir extensões dentro de zonas e salas. Nesse caso, criamos uma extensão dentro da zona, o que significa que um cliente conectado a qualquer sala pode fazer requisições a ela, desde que faça parte da zona. Uma extensão de sala só pode receber requisições de quem está naquela sala;
• As extensões podem ser de vários tipos (Java, ActionScript, Python, entre outros). Neste caso, o atributo type=”script” determina que usaremos uma extensão escrita em ActionScript. O nome da classe fica no atributo className e o nome que é colocado em name é para que os clientes façam requisições utilizando este nome.

Conforme expliquei anteriormente, podemos definir a lógica do servidor em uma ou mais extensões, anexadas a zonas ou salas. A escolha de como faremos isso depende de cada projeto e dos seus requisitos. Aqui não estamos fazendo nada muito complexo, então basta uma única extensão que possa ser enxergada por toda a zona.

Uma extensão deve obrigatoriamente implementar 4 funções: init, destroy, handleRequest e handleInternalEvent. O servidor SmartFox chama essas funções em momentos específicos, a saber:

• A função init é chamada quando o servidor termina de carregar a extensão. Nesta função devemos colocar o código de inicialização.
• A função destroy é chamada quando o servidor remove/destrói a extensão. Nela devemos liberar recursos “externos” que porventura tenhamos usado, como arquivos abertos, conexões com bancos de dados, entre outros.
• A função handleRequest é disparada quando o servidor identifica que algum cliente fez uma requisição à extensão. É nela que devemos tratar ou direcionar as solicitações dos clientes.
• Por fim, a função handleInternalEvent é chamada quando ocorre algum evento interno ao SmartFox, por exemplo: tentativa de login de usuário, conexão perdida, etc. Caso nossa aplicação necessite, podemos tratar ou direcionar esse tipo de evento também.

Vejamos agora trechos de código da extensão ExtensaoChat. O código completo pode ser encontrado dentro do .zip anexado a este tutorial.

function init()
{
	trace("A extensao foi carregada pelo servidor e esta sendo inicializada.")
}

function destroy()
{
	trace("A extensao esta sendo removida/destruida pelo servidor.")
}

function handleRequest( cmd, params, user, fromRoom )
{
	trace("handleRequest: " + cmd);
}

function handleInternalEvent( evt )
{
	trace("handleInternalEvent: " + evt.name);

	if ( evt.name == "loginRequest" ) TratarEventoLogin( evt );
}
function TratarEventoLogin( evt )
{
	var nick = evt["nick"];
	var pass = evt["pass"];
	var chan = evt["chan"];

	// Efetua a conexão de fato no servidor.
	var resultadoLogin = _server.loginUser( nick, pass, chan );

	// Constrói a resposta que será enviada, de acordo com o resultado do login.
	var resposta = new Object();

	if ( resultadoLogin.success )
		resposta._cmd = "logOK";
	else
	{
		resposta._cmd = "logKO";
		resposta.mensagem = resultadoLogin.error;
	}

	// Envia a resposta ao cliente.
	_server.sendResponse( resposta, -1, null, chan );
}

Vejam que neste tutorial não estou inicializando nem destruindo nada, além de não estar tratando requisições do cliente. Deixarei estes aspectos para o último tutorial, que será mais avançado. No entanto, estou tratando o evento interno de login: loginRequest. Quando um evento de login de usuário é recebido, a função TratarEventoLogin pega as informações do evento e envia para a função de login do SmartFox (loginUser). Em caso de sucesso, será enviado um comando logOK para o cliente. Caso contrário, é enviado o comando logKO juntamente com a mensagem de erro vinda do SmartFox. A função sendResponse possui como parâmetros um objeto contendo o que queremos enviar, o identificador da sala para a qual enviaremos (-1 caso não seja necessário), o remetente da mensagem (null caso não seja necessário) e os usuários que a receberão (neste caso, apenas o usuário que mandou, portanto coloquei o canal de comunicação para este usuário apenas). Existe mais um atributo na função sendResponse, mas no momento não é necessário entendê-lo.

3) Lado cliente da aplicação:

package
{
	[...]
	import it.gotoandplay.smartfoxserver.SFSEvent;
	import it.gotoandplay.smartfoxserver.SmartFoxClient;

	public class Cliente extends MovieClip
	{
		// Constantes relacionadas ao SmartFoxServer
		private const SERVER_IP		= "localhost";
		private const ZONA			= "zonaTutorial";

		// Variáveis relacionadas ao SmartFoxServer
		private var smartfox : SmartFoxClient;

		public function Cliente()
		{
			[...]
			Iniciar();
		}

		private function Iniciar():void
		{
			[...]

			// Inicializa cliente SmartFox.
			smartfox = new SmartFoxClient();
			smartfox.addEventListener( SFSEvent.onConnection		, OnConnection );
			smartfox.addEventListener( SFSEvent.onConnectionLost	, OnConnectionLost );
			smartfox.addEventListener( SFSEvent.onRoomListUpdate	, OnRoomListUpdate );
			smartfox.addEventListener( SFSEvent.onExtensionResponse	, OnExtensionResponse );
			smartfox.addEventListener( SFSEvent.onPublicMessage 	, MostrarMensagemChat );

			smartfox.connect( SERVER_IP, 9339 );
		}

		////////////////////////////////////////////////////////////////////////////////////////
		// Funções da tela de login

		private function Conectar( evt:MouseEvent ):void
		{
			var login = telaLogin_mc.login_txt.text;

			if ( login != "" ) smartfox.login( ZONA, login, "" );
		}

		////////////////////////////////////////////////////////////////////////////////////////
		// Funções da tela de mensagem

		private function ExibirTelaMensagem( titulo:String, mensagem:String ):void
		{
			telaMensagem_mc.titulo_txt.text 	= titulo;
			telaMensagem_mc.mensagem_txt.text 	= mensagem;
			[...]
		}

		private function OcultarTelaMensagem( evt:MouseEvent ):void
		{
			[...]
		}

		////////////////////////////////////////////////////////////////////////////////////////
		// Funções da tela de chat

		private function EnviarMensagemChat( evt:MouseEvent ):void
		{
			var mensagem = telaChat_mc.mensagem_txt.text;

			if ( mensagem == "" ) return;

			telaChat_mc.mensagem_txt.text = "";

			smartfox.sendPublicMessage( mensagem );
		}

		private function MostrarMensagemChat( evt:SFSEvent ):void
		{
			telaChat_mc.chat_txt.htmlText += "<b>[ <i>" + evt.params.sender.getName() + "</i> ] </b>" + evt.params.message;
		}

		////////////////////////////////////////////////////////////////////////////////////////
		// Funções relacionadas ao servidor SmartFoxServer

		private function OnConnection( evt:SFSEvent ):void
		{
			if ( evt.params.success )
			{
				EfetuarTransicao( telaConectando_mc, telaLogin_mc );
				[...]
			}
			else
			{
				ExibirTelaMensagem( "ERRO NA CONEXÃO", "Ouch, falha na conexão! Tentando novamente..." );
				setTimeout( smartfox.connect, 5000, SERVER_IP, 9339 );
			}
		}

		private function OnConnectionLost( evt:SFSEvent ):void
		{
			ExibirTelaMensagem( "CONEXÃO PERDIDA", "A conexão foi perdida! Tentando novamente..." );
			setTimeout( smartfox.connect, 5000, SERVER_IP, 9339 );
		}

		private function OnLogin( resObj:Object ):void
		{
			smartfox.getRoomList();
		}

		private function OnLoginFail( resObj:Object ):void
		{
			ExibirTelaMensagem( "FALHA NO LOGIN", resObj.mensagem );
		}

		private function OnRoomListUpdate( evt:SFSEvent ):void
		{
			smartfox.autoJoin();
			EfetuarTransicao( telaLogin_mc, telaChat_mc );
		}

		private function OnExtensionResponse( evt:SFSEvent ):void
		{
			var resObj:Object = evt.params.dataObj;

			switch ( resObj._cmd )
			{
				// Login realizado com sucesso.
				case "logOK": OnLogin( resObj ); break;

				// Falha no login.
				case "logKO": OnLoginFail( resObj ); break;
			}
		}

	} // fim da classe
} // fim do pacote

O cliente, ao iniciar, cria uma instância da classe SmartFoxClient, que é usada na comunicação com o servidor, além de estabelecer alguns listeners de eventos do SmartFox. Vamos entender cada um deles:

• onConnection: este evento será disparado se o cliente conseguir se conectar (ou não) ao servidor com sucesso;
• onConnectionLost: se a conexão com o servidor for perdida, este evento será disparado;
• onRoomListUpdate: evento disparado quando o cliente receber a lista de salas da zona ou sala à qual se conectou;
• onExtensionResponse: quando uma extensão manda uma resposta para o cliente, este evento é disparado;
• onPublicMessage: disparado quando o cliente recebe uma mensagem pública.

A aplicação utiliza estes eventos da seguinte forma:

• Ao receber o onConnection, se a conexão foi bem sucedida, é exibida a tela de login. Caso contrário, o usuário vê uma mensagem de erro e o cliente aguarda 5 segundos para tentar se conectar novamente;
• Quando o onConnectionLost é disparado, o cliente é notificado da queda de sua conexão e a aplicação tenta se conectar novamente;
• Quando o usuário chega na tela de login, ele pode digitar um nome de usuário e tentar entrar no bate-papo. O servidor receberá um loginRequest, conforme vimos anteriormente, e vai responder dizendo se a conexão foi bem sucedida ou não. O cliente receberá então um onExtensionResponse, com um comando. No caso do logKO, o cliente será avisado de que não conseguiu logar. Se receber um logOK, o cliente irá requisitar ao servidor a lista de salas disponíveis;
• Quando o servidor envia a lista de salas disponíveis, o cliente recebe o onRoomListUpdate e então se conecta a uma sala qualquer (que permita autoJoin) e é mostrada a tela de chat;
• Na tela de chat, o usuário pode escrever uma mensagem e enviar. Ao enviar, estará disparando para o servidor uma mensagem pública, que será recebida por todos que estiverem naquela sala (inclusive ele mesmo). O recebimento dessa mensagem pública dispara o onPublicMessage, evento que faz o cliente mostrar na tela a mensagem recebida.

Pronto! Conseguimos fazer uma aplicação de chat básica utilizando o SmartFoxServer!

Agora é só avançar para o último tutorial, no qual será feita uma aplicação um pouco mais avançada! (EM BREVE)

4) Como utilizar os arquivos de exemplo:

Após instalar o servidor SmartFoxServer (ver tutorial 1 desta série), colocar o arquivo ExtensaoChat.as na pasta “[diretório do SmartFox]/Server/sfsExtensions”. Além disso, é necessário fazer com que a IDE do Flash “veja” a pasta com que está dentro do .zip. Essa pasta possui alguns recursos que são usados na interface do exemplo. Por fim, deve-se inserir todo o conteúdo do arquivo zona.xml no config.xml do seu SmartFox, entre as tags <Zones> e </Zones>.

E lembrem-se de executar o SmartFox!

Fazer download dos arquivos do tutorial

Desenvolvendo aplicações cliente-servidor com Flash/ActionScript e SmartFoxServer [01/03]

Olá a todos!

Neste tutorial irei abordar a base da criação de aplicações cliente-servidor usando Flash/ActionScript no cliente e o servidor SmartFoxServer. Este é o primeiro de uma série de 3 tutoriais. Neste momento não será desenvolvida a aplicação de fato. Ensinarei como instalar, entender e organizar um projeto utilizando as ferramentas e linguagens citadas anteriormente. Um outro tutorial será elaborado em seguida abordando o desenvolvimento de uma aplicação cliente-servidor simples. Este tutorial é um pré-requisito para o seguinte.

1) O que é uma aplicação cliente-servidor?

De maneira simples, uma aplicação cliente-servidor é definida como um modelo computacional no qual um ou mais programas (clientes) fazem requisições a um ou mais computadores centrais (servidores) e recebem respostas deles, sendo a conexão geralmente feita através de uma rede.

Uma aplicação cliente-servidor deve ser concebida utilizando programação assíncrona, o que significa que a execução de determinados trechos de código não deve ser feita de forma linear, mas sim ser pensada para rodar após um determinado evento ter ocorrido. Por exemplo: ao abrir o jogo, o usuário não pode ser encaminhado diretamente à tela onde vai jogar de fato. A aplicação deve ser feita de forma a esperar uma autorização do servidor para só então encaminhar o usuário à tela correta.

2) O que é o SmartFoxServer?

O SmartFoxServer é uma plataforma para desenvolvimento de aplicações e jogos multiusuários cliente-servidor. Ela suporta Adobe Flash/Flex/Air, Java, Android, .Net, Unity3D, Silverlight, Apple iPhone, entre outros.

3) Instalando o SmartFoxServer e entendendo seu funcionamento básico (lado servidor).

Antes de mais nada, considerem dar uma olhada na documentação do SmartFoxServer (em Inglês):  http://www.smartfoxserver.com/docs/

A versão que utilizarei nos tutoriais é a Pro. O download pode ser feito em http://www.smartfoxserver.com/products/pro.php#downloads

No Windows a instalação é bem simples. É só executar o instalador e seguir as instruções. Após a instalação, aparece um executável “Start SmartFoxServer”, que é usado para iniciar o servidor.

A primeira coisa que é necessário saber sobre o SmartFoxServer é entender o arquivo config.xml. Este arquivo configura o servidor, as zonas, as salas e as extensões. A lista de todas as configurações possíveis está na documentação. Neste momento é necessário apenas entender o que significa cada um desses elementos.

O servidor, como o nome já diz, é o software que provê todos os recursos às aplicações clientes. Ele possui configurações gerais como IP, login e senha de administração, entre outras.

Uma zona define uma aplicação dentro do servidor (um jogo, um chat, etc.). Um servidor pode rodar várias zonas, ou seja, dentro dele podem estar definidas várias aplicações distintas.

As salas funcionam como ambientes dentro de uma zona. Um jogo de cartas, por exemplo, pode ter um ambiente inicial no qual o jogador escolhe se quer jogar uma partida de treino ou uma partida contra outros jogadores. Este ambiente inicial e as seções de treino e de jogadores contra jogadores podem ser salas dentro da zona do jogo.

Por fim, as extensões são componentes que podem ser acoplados a zonas ou salas para definir a lógica da aplicação no servidor. Em um jogo de Poker, por exemplo, será necessária a existência de uma ou mais extensões que definam todas as regras do jogo, descrevendo as jogadas que os jogadores podem fazer e as consequências de cada uma delas.

4) Lado cliente da aplicação.

Do lado cliente, a aplicação pode ser feita em Flash/Actionscript. Nesse caso, é necessário utilizar API de Flash do SmartFoxServer.  Dentro do diretório de instalação do SmartFoxServer, existe a pasta Flash/Actionscript 3.0/. Para fazer com que o Flash enxergue esta API, devemos fazer o seguinte:

1. Abrir o Flash e clicar em “Edit” -> “Preferences” (“Editar” -> “Preferências”);
2. Clicar na categoria “ActionScript” e depois em “ActionScript 3.0 Settings”;
3. Em “Souce path”, clicar no botão “+” e adicionar o caminho da pasta Flash/Actionscript 3.0/.