FlashSmartFox2

/ Tutoriais

Desenvolvendo aplicações cliente-servidor [02/03]

com Flash/ActionScript e SmartFoxServer

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:

É 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.
2.2) Lógica do servidor: ExtensaoChat.as

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.

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:

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



Virtualize Soluções Digitais

Empresa especializada na criação de sites, desenvolvimento de jogos, de aplicativos para celular e para redes sociais como o Facebook. Localizada em Salvador - BA.