Criando um chat com Flex e PHP – Parte 01

Neste artigo iremos atender à solicitação do leitor Wesley Oliveira Gomes, que nos pediu para fazer um Chat em Flex e PHP. Sempre quando pensamos em chats web lembramos daquela tela piscando a cada cinco segundos, algo realmente irritante.

No Flex, é possível manter a comunicação entre o Flex (cliente) e o PHP(servidor) de duas formas distintas. A mais simples, e mais usada, é a comunicação em que somente o Flex faz requisições ao PHP. A mais complexa, também chamada de RTMP (Real Time Messaging Protocol) permite que tanto o Flex se comunique com o PHP quanto o PHP se comunique com o Flex.

Resumindo, nós vamos criar um chat onde o Flex irá, de tempos em tempos, fazer uma requisição ao PHP. Isso é muito semelhante às telas piscantes dos chats web. Mas no Flex não é preciso realizar um POST na página (piscar). Nem é preciso colocar um “loading”, ou alterar o ícone do mouse para “carregando”. A comunicação entre o Flex e o PHP não será percebida pelo usuário.

O nosso chat será bem simples, não terá salas nem comandos do tipo “/ignore”. O usuário, ao acessar a página, irá preencher o seu nome e automaticamente entrar no chat. Haverá um campo para digitar uma mensagem, outro para ver a lista de usuários cadastrados e outro para ver a lista de mensagens, conforme a figura a seguir.

Neste primeiro artigo iremos criar todo o código necessário para que o Flex funcione. Iremos criar, além dos arquivos necessários, um arquivo especial chamado Connection, que será responsável em prover a comunicação com o PHP, além do arquivo ChatManager, que provê as funcionalidades do Chat. A idéia é isolar tudo que se relaciona com o PHP em um único arquivo, para que possamos deixar o chat o mais simples possível. No lado do PHP, iremos utilizar Zend Framework.

Além deste arquivo de comunicação, iremos criar classes que possuem alguma funcionalidade dentro do chat. Estas classes são responsáveis pelos usuários na sala, pelas mensagens trocadas, pelos eventos gerados entre ações, etc.

Comece o seu projeto Flex de acordo com a figura abaixo.

Como podemos ver, criamos o projeto “Chat” na pasta “c:\wamp\www”, indicando que estamos usando o WAMP Server. Este detalhe é importante na 2ª parte do artigo.

Após criar o projeto, na tela principal, vamos adicionar o básico em termos de componentes, conforme a figura a seguir.

Isso produz o seguinte resultado:

O código inicial é:

<?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"><br />	<mx:Label y="10" text="Chat Flex" left="10"/><br />	<mx:TextInput y="8" text="Usuário + Enter" left="76"/><br /><br />	<mx:Canvas left="1" right="9" top="1" bottom="9"><br />		<mx:List id="listMensagens" left="10" right="141" borderColor="#0F8BE2" top="36" bottom="39"></mx:List><br />		<mx:List width="123" id="listUsuarios" right="10" backgroundColor="#DDEEFF" bottom="39" top="36"></mx:List><br />		<mx:TextInput left="89" right="214" bottom="9"/><br />		<mx:Label text="Mensagem:" left="10" bottom="11"/><br />		<mx:Button label="Enviar" right="144" bottom="9"/><br />		<mx:Button label="Sair" right="10" bottom="9"/><br />	</mx:Canvas>

Veja que apenas arrastamos os componentes, alteramos cores e formatos, definimos as âncoras etc.

Agora vamos definir algumas funcionalidades básicas no chat. A primeira delas é a definição do nome do usuário. Criamos uma caixa de texto com o valor: “Usuário + enter”. Fiz isso de propósito somente para criar uma funcionalidade conhecida no mundo web 2.0. Assim que o usuário selecionar o campo, a mensagem some. Isso é feito assim:

<mx:TextInput id="usuario" <br />y="8" text="Usuário + Enter" left="76"     <br />focusIn="{if (usuario.text=='Usuário + Enter'){usuario.text=''}}"<br />    focusOut="{if (usuario.text ==''){usuario.text = 'Usuário + Enter'}}"<br />/>

Neste código usamos os evento focusIn (ao ganhar foco) e focusOut (ao perder foco) para preencher a caixa de texto corretamente. Ou seja, quando o usuário clica no campo, o texto some. Se o usuário deixar o campo e ele estiver vazio, preenche com o texto novamente. Veja que o código é bem simples, e bem falho, porque fazer ifs com caracteres de texto (usuario.text==’Usuário + Enter’)  é de longe a melhor opção… Mas vamos nos contentar com isso agora. 

Enquanto o usuário não entrar com o usuário, não iremos exibir a tela de chat para ele. Isso é feito setando a propriedade do canvas que engloba toda a parte do chat para falso. Quando o usuário digitar “enter”, nós iremos mudar esta propriedade para true. Veja o código:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" <br />	layout="absolute" backgroundGradientAlphas="[1.0, 1.0]"<br />	 backgroundGradientColors="[#FFFFFF, #FFFFFF]"<br />	 creationComplete="OnCreationComplete()"<br />	 ><br /><br /><br />	<mx:Script><br />		<![CDATA[<br /><br /><br />		private function OnCreationComplete():void<br />		{<br />			CanvasChat.visible = false;<br />		}<br /><br />		private function OnUsuarioKeyDown(event:KeyboardEvent):void<br />		{<br />			if (event.charCode == Keyboard.ENTER)<br />			{<br />				usuario.enabled = false;<br />				CanvasChat.visible = true;<br />}<br /><br />		}<br /><br /><br />		]]><br />	</mx:Script><br /><br />	<mx:Label y="10" text="Chat Flex" left="10"/><br />	<mx:TextInput id="usuario" <br />			y="8" text="Usuário + Enter" left="76" <br />			focusIn="{if (usuario.text=='Usuário + Enter'){usuario.text=''}}"<br />			focusOut="{if (usuario.text ==''){usuario.text = 'Usuário + Enter'}}"<br />			keyDown="OnUsuarioKeyDown(event)"<br />			/><br /><br />	<mx:Canvas id="CanvasChat"  left="1" right="9" top="1" bottom="9"<br />		showEffect="WipeDown"<br />		hideEffect="WipeUp"<br />		>

Nesta implementação, temos diversas novidades. Primeiro é criado o evento creationComplete do Application, chamando o método OnCreationComplete. Este método esconde o canvas que contém o chat, o qual chamamos de “CanvasChat”.

Depois é implementado o evento keyDown da caixa de texto onde digita-se o nome de usuário, chamando o método OnUsuarioKeyDown. Neste método, verificamos se a tecla digitada é o Enter e se for, iremos exibir o CanvasChat.

Finalizando, dentro da tag Canvas do CanvasChat, temos duas propriedades chamadas showEffect e hideEffect, que dão um embelezamento natural às telas do Flex.

Assim que o usuário digita o seu nome e tecla enter, precisamos fazer diversas tarefas tais como obter as pessoas da sala e as últimas mensagens postadas, além de anunciar a chegada do novo usuário. Tudo relativo ao chat estará disponível na classe ChatManager.

Então vamos pensar… Esse ChatManager precisa de:

1. Prover informações sobre as mensagens que os usuários digitam. Isso me lembra um Array de mensagens onde cada mensagem deve ter o nome do usuário, a mensagem em si e a data/hora que foi postada
2. Prover informações sobre os usuários online. O nome do usuário e a data/hora que entrou
3. Prover a comunicação com a classe que irá comunicar-se com o PHP. Precisamos do PHP para salvar a lista de pessoas online e a lista de mensagens. Esta camada será implementada na segunda parte do artigo.

Somente com estes três requisitos será necessário criar mais algumas classes:

• User: Contém informações do usuário
• Message: Contém informações sobre a mensagem
• Connection: Realiza a conexão com o PHP

A figura a seguir ilustra o processo de comunicação entre as classes.

Com tudo isso criado, podemos partir para a segunda parte do artigo. Ao invés de colar o código destas classes, eu vou deixar o link abaixo para download do código fonte. Comentei bastante o código fonte para um melhor entendimento. Caso tenha dúvidas, fique à vontade para comentar.

Código Fonte