jan 13
Digg
Stumbleupon
Technorati
Delicious

Flex: Um chat simples em menos de 20 linhas.

Uma coisas mais excepcionais que o design do framework do Adobe Flex traz, é a facilidade de trabalhar com os serviços de mensageria. Toda a complexidade que existe nas soluções de mensageria como a do JMS do Java, no Flex, basicamente foi resumido ao <mx:Producer/> e <mx:Consumer/> (ver a documentação).

Assim como os outros meios de comunicação do Flex ( HttpService, WebService, RemoteObject ) o Consumer e Producer precisam de uma funcionalidade no back-end, em específico o DataService que está usando. Como por exemplo, no Java o DataService mais comum que contém essa funcionalidade é o Live Cycle Data Services e o BlazeDS, este OpenSource. No PHP, tem o WebOrb for PHP.

Como o título deste tópico informa, para provar que é muito simples trabalhar com mensageria no Flex, vamos criar um chat com nem 20 linhas (um total de linhas programadas e não de configuração) no Flex. Para tal façanha, primeiro escolha qual linguagem e DataService que irá utilizar no back-end. Eu estarei utilizando Java + BlazeDS.

Partindo do princípio que o BlazeDS já está integrado ao Java e com as configurações básicas:

  1. O primeiro passo é criar um canal de comunicação para trafegar as mensagens. Para isso, no arquivo services-config.xml do BlazeDS, adicione o seguinte canal:
    XML:
    1. <channel-definition id="streaming-amf" class="mx.messaging.channels.StreamingAMFChannel">
    2. <endpoint url="http://localhost:8080/NOME_DA_APP/messagebroker/streamingamf" class="flex.messaging.endpoints.StreamingAMFEndpoint"/>
    3. </channel-definition>

    Esse é um canal de Streaming, e só irá funcionar se for executado em Http 1.1. Outra forma de utilizar os serviços de menssageria, é criar um canal AMF normal (AMFChannel) e ativar o polling, como no exemplo abaixo:

    XML:
    1. <channel-definition id="polling-amf" class="mx.messaging.channels.AMFChannel">
    2. <endpoint url="http://localhost:8080/NOME_DA_APP/messagebroker/amfpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
    3. <properties>
    4. <polling-enabled>true</polling-enabled>
    5. </properties>
    6. </channel-definition>

  2. Criado o canal, vamos criar o destination na qual irá utilizar o canal. Para isso, crie se não existir um arquivo no mesmo diretório do services-config.xml com o nome de messaging-config.xml, nele coloque o seguinte conteúdo:
  3. XML:
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <service id="message-service" class="flex.messaging.services.MessageService">
    3. <adapters>
    4. <adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />
    5. </adapters>
    6. <default-channels>
    7. <channel ref="streaming-amf"/>
    8. </default-channels>
    9.  
    10. <destination id="chatMessage"/>
    11. </service>

    Com o messaging-config.xml criado, é preciso informar ao services-config.xml que existem destinations de mensageria. Para isso adicione as linhas abaixo no services-config.xml:

    XML:
    1. <services-config>
    2. <services>
    3. <service-include file-path="remoting-config.xml" />
    4. <service-include file-path="messaging-config.xml" />
    5. ...
    6. </services>
    7. ...

  4. Adicionado o destination (chatMessage), a configuração já está completa. Vamos agora criar a Interface do Chat junto com o Producer e Consumer (menos de 20 linhas):
    XML:
    1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="consumer.subscribe()">
    2.  
    3. <mx:Consumer id="consumer" destination="chatMessage"
    4. message="txtArea.htmlText += event.message.body as String"/>
    5. <mx:Producer id="producer" destination="chatMessage"/>
    6.  
    7. <mx:TextArea id="txtArea" width="100%" height="100%" editable="false"/>
    8. <mx:RichTextEditor id="inputDsMessage" width="100%" height="100%"/>
    9. <mx:Button label="Enviar" click="producer.send( new AsyncMessage(inputDsMessage.htmlText) ); inputDsMessage.text='' "/>
    10.  
    11. <mx:Script>
    12. <![CDATA[
    13. import mx.messaging.messages.AsyncMessage;
    14. ]]>
    15. </mx:Script>
    16. </mx:Application>

Pronto! agora basta startar seu Container Web (no meu caso o TomCat) e abrir 2 browsers distintos e enviar as menssagens.
Atenção com o Firefox, pois ele armazena a mesma session para abas diferentes, e por default, o BlazeDS suporta uma conexão por cliente.

Para todo e qualquer erro, verifique sempre o console do Tomcat, ele sempre traz informações úteis para identificar os erros.

[Download do Fonte]

ChatApp


Author: Rodrigo Pereira Fraga

6 Comentários

Ved
14 de janeiro de 2009

Bom demais, Digows! Abração e bom 2009 para vc!

Rodrigo Pereira Fraga
14 de janeiro de 2009

Bom 2009 pra ti e sua família!!

Um forte abraço amigo!

\o/

janderson
27 de janeiro de 2009

muito bom… vlw!!!

koe
11 de junho de 2009

e nois

Ricardo
31 de agosto de 2009

Alguem poderia me ajudar nao consegui fazer funcionar nao…

Daniel Vitor
18 de fevereiro de 2010

Parabéns, funcionou perfeitamente no Chrome e no Firefox, porém no IE”ca” não funcionou. O que pode ser?

Comments RSS TrackBack Identifier URI

Deixe um comentário