Atualmente, obter informações precisas e em um curto espaço de tempo se tornou indispensável para que pequenas e grandes corporações sobrevivam e se mantenham atualizadas em relação à forte concorrência do mercado. Com isso, a tecnologia tem se tornado cada vez mais presente nas empresas, trazendo inovações que possibilitam suprir tal necessidade. Neste contexto, entre as inovações mais recentes e de grande destaque se encontra a tecnologia WebSocket.

WebSocket é um recurso que permite a comunicação em tempo real entre cliente e servidor através de uma única conexão TCP. A conexão é mantida durante todo o tempo e ambos podem se comunicar quantas vezes for necessário, não necessitando de solicitações adicionais (os famosos requests), resultando assim em ganho de performance para a aplicação. Geralmente esta solução é adotada em aplicações que requerem troca de informações e atualizações em tempo real, como é o caso de uma transmissão online, que ao inserir uma nova postagem precisa que esta seja notificada a todos instantaneamente, sem precisar que cada um dos clientes solicite esta atualização.

Como as corporações possuem a necessidade de obter soluções ágeis e com bom desempenho, os desenvolvedores também possuem a uma importante necessidade: dispor de boas soluções que permitam desenvolver projetos com praticidade e produtividade. Neste contexto surge o Play Framework, outra tecnologia que iremos abordar no decorrer do artigo.

O Play! vem chamando a atenção dos desenvolvedores justamente por facilitar o desenvolvimento de aplicações web em Java, não necessitando de muitas ferramentas e configurações complexas para a implementação da solução, nem mesmo sendo necessária a utilização de uma IDE. Além disso, o Play consome recursos mínimos de hardware, possibilitando assim seu uso em equipamentos inferiores. Dentre as diversas vantagens de se utilizar este framework, podemos destacar:

• A facilidade na detecção e resolução de erros durante o processo de desenvolvimento;

• A possibilidade de utilização de qualquer biblioteca Java;

• O uso da arquitetura MVC/RESTful. Sendo assim, com o intuito de demonstrar a praticidade de se desenvolver com os recursos fornecidos pelo Play!, e também visando de abordar um exemplo onde possamos fazer uso de WebSockets, desenvolveremos no decorrer deste artigo um chat.

Play Framework

O Play! é um framework open source utilizado para o desenvolvimento de aplicações Java e Scala. O seu objetivo é facilitar a implementação de soluções web visando a produtividade, para que todo processo seja ágil e o menos desgastante possível. Como grande vantagem está o fato de trabalhar com o processo de Hot Deployment, que possibilita ao desenvolvedor visualizar as alterações sem a necessidade de recompilar o projeto manualmente. Com Hot Deployment, o tempo gasto para recompilar o projeto e executá-lo novamente se resume apenas a um simples refresh na página. Outra característica fornecida por este framework é a possibilidade de se trabalhar com o sistema de rotas, que simplifica o mapeamento entre URLs e os controladores da aplicação.

O que é WebSocket?

Normalmente, quando uma aplicação web é acessada por um browser, uma solicitação HTTP é enviada para o servidor web responsável por hospedar a página. Em seguida, o servidor web analisa o pedido e envia a resposta. Em alguns casos, o tempo de resposta é excedido devido à grande quantidade de informações a serem processadas, causando lentidão e transtornos (ver Figura 1).

O objetivo do WebSocket é viabilizar a comunicação assíncrona entre servidores e aplicações web que necessitam de informações em tempo real, como sites de previsões do tempo, sites de ações e investimentos, jogos online, etc.

Com o uso desta solução a comunicação se torna mais prática e com menores chances de causar lentidão, pois é utilizado um canal de comunicação bidirecional entre navegador e servidor, e então ambos podem enviar e receber diversas mensagens entre eles sem ter a necessidade de enviar múltiplas requisições.

Ao adotar o tradicional protocolo HTTP, dependendo da complexidade da aplicação, é necessário o envio e recebimento de diversas requisições, seja pela aplicação ou servidor. Além disso, realizar várias requisições resulta em queda de desempenho da aplicação e do servidor, exigindo maior processamento de informações. Com a utilização da API WebSocket, padronizada pela W3C (Word Wide Web Consortium), abre-se a possibilidade de implantarmos os recursos do protocolo WebSocket no desenvolvimento de soluções web, reduzindo assim consideravelmente o número de requisições trocadas.

A aplicação exemplo

No decorrer do artigo iremos abordar o desenvolvimento de um chat. Para isso, vamos criar duas páginas HTML: a primeira sendo uma tela de login para que o usuário possa se autenticar e entrar na sala do chat, e a segunda para exibir esta sala, na qual o usuário poderá se comunicar com outros membros. No processo de autenticação da página inicial iremos realizar uma simples consulta no banco de dados para averiguar se as informações repassadas aos campos de login constam na tabela de usuários.

Desta forma, precisamos configurar a conexão com o banco de dados (neste caso o MySQL) e adicionar a sua dependência ao arquivo build.sbt para que o Play! consiga se comunicar com ele. Também será necessário criar a classe que fará referência à tabela onde estão armazenados os registros de login.

Com o Play!, é disponibilizado o banco de dados H2, que fica armazenado internamente no framework. Porém, com a adoção desta opção, a cada vez que iniciarmos a aplicação as informações nele contidas serão perdidas, pois este banco é útil para ambientes de teste e como teremos a necessidade que as informações permaneçam armazenadas, adotaremos o MySQL.

Concluída essa etapa, começaremos a desenvolver a sala do chat. Para esta tarefa criaremos as classes Chat, SalaChat e Login, que terão suas funcionalidades explicadas mais adiante. Além disso, para realizar alguns procedimentos em nosso chat, como iniciar a seção do websocket e enviar mensagens para os usuários ao teclar Enter, utilizaremos recursos do JavaScript.

Inicialmente, é preciso que você configure seu ambiente de desenvolvimento com a versão 6 ou superior do Java e navegadores que suportem o protocolo WebSocket. Consulte na seção Links o site para verificar se o seu navegador é compatível. Caso seu ambiente de desenvolvimento já esteja pronto, o próximo passo é realizar a instalação do Play! Para isso, basta baixar o framework no site oficial do projeto (veja o endereço na seção Links), extraí-lo em qualquer diretório e adicionar o caminho onde foi descompactado na variável PATH.

Criando o projeto Play!

Diferentemente de outras tecnologias que necessitam de uma IDE para que seja possível o desenvolvimento de um projeto, o Play! possibilita a criação da aplicação

com a execução de apenas um comando a partir do Play Console, que vem juntamente com o pacote do framework.

Apesar disso, e devido à importância das IDEs para os projetos, o Play! oferece suporte ao NetBeans, Eclipse e IntelliJ IDEA. Assim, caso o desenvolvedor queira trabalhar com os recursos do Play! em uma destas IDEs, basta digitar no console os comandos play eclipsify nomeProjeto para adaptar o projeto ao Eclipse, play netbeansify nomeProjeto para adaptar ao NetBeans e play idealize nomeProjeto para adaptá-lo ao IntelliJ IDEA.

Dito isso, para criar o projeto, abra a linha de comando, acesse o diretório no qual foi extraído o framework, digite o comando play new juntamente com o nome do projeto e, em seguida, escolha a opção 2 (Java Application) para definir o tipo do projeto, conforme demonstra a Figura 2.

Quando criamos um novo projeto, é definida uma estrutura de diretórios para armazenar os arquivos da aplicação. Com o Play! Framework, o modelo MVC é definido como padrão. Assim, ao navegar pelos diretórios do projeto, na pasta app encontraremos três subdiretórios: controllers, models e views, responsáveis por armazenar os principais arquivos da aplicação. Tais arquivos irão definir toda a regra e a parte visual da aplicação.

Nesta organização, a parte visual deve ser armazenada no diretório views, as classes Java que contêm regras de negócio devem ser armazenadas na pasta model e, por último, na pasta controller estarão presentes os controladores que realizam a comunicação entre model e view.

Outro diretório importante e sobre o qual devemos compreender é o conf. Este armazena o arquivo application.conf, local onde são especificadas algumas configurações do sistema, tais como dados de conexão com o banco de dados, e o arquivo routes, que guarda a declaração das rotas, ou seja, neste arquivo são definidas todas as URLs que poderão ser acessadas pela camada view.

O arquivo routes por padrão já vem com duas rotas definidas, a saber: 1) a rota responsável por encaminhar a requisição do usuário ao acessar a aplicação para o método index(), localizado na classe Application, que também é criada automaticamente quando criamos o projeto Play!; e, 2) a rota que indica o caminho para a pasta public, local onde são armazenados arquivos de imagem, CSS e JavaScript.

Caso a sua tela esteja semelhante à Figura 2, já é possível acessar a aplicação pelo navegador. Assim, após executar o comando play run no Play! Console, acesse pelo navegador o link localhost:9000/. Caso apareça a mensagem “Your new application is ready”, é sinal de que sua aplicação está em pleno funcionamento e portanto podemos dar continuidade ao desenvolvimento do nosso chat.

Estabelecendo a conexão com o banco de dados

Após instalar o Play! e criar a estrutura do projeto conforme explicado nos tópicos anteriores, localize o arquivo build.sbt no diretório raiz do projeto e insira a dependência do conector MySQL, conforme apresenta a Listagem 1. Com a dependência instalada, o Play! interpretará que a sua aplicação necessita deste conector e o instalará quando o projeto for executado.

Feito isso, o próximo passo é localizar o arquivo application.conf e adicionar as informações de conexão com o banco de dados, como driver de conexão, URL do JDBC, usuário e senha, conforme a Listagem 2.

Criando a classe de Login

Informados os dados de conexão no arquivo application.conf, criaremos agora a classe Login, que irá estender a classe Model para poder utilizar os recursos de persistência e consulta com o banco de dados que são disponibilizados pelo ebean (BOX 1). A classe Login irá conter todos os campos da tabela na qual iremos buscar as informações do usuário que deseja se conectar ao chat. Sendo assim, nesta classe vamos definir três atributos: id, nome e senha. Após isso, com o Model. Finder, recurso que faz parte da classe Model (linhas 23 e 24), criaremos o objeto find, que será utilizado para auxiliar na consulta. A Listagem 3 apresenta o código da classe Login.

Criando a sala do chat

Neste passo, iniciaremos a construção da sala do chat, codificando para isso a classe SalaChat, que será a estrutura principal do nosso projeto. Nela, iremos implementar o método responsável por incluir o usuário no chat e o método que realizará o envio de mensagens ao bate-papo. A Listagem 4 exibe o código dessa classe.

Nessa listagem, utilizaremos as classes UntypedActor, ActorSystem e ActorRef providas pela API de concorrência Akka, que também é propriedade da TypeSafe, mesma empresa detentora dos direitos do Play. Esta API de concorrência adere ao modelo de atores (BOX 2), que visa aumentar o desempenho da aplicação e melhorar o tempo de resposta do sistema para o usuário.

Ao criarmos a classe SalaChat, estendemos a classe abstrata UntypedActor e, desta forma, possibilitamos a criação de um ator. Em seguida, criamos de fato o ator, na linha 3. Para isso, instanciamos a classe ActorSystem, que tem como objetivo criar e armazenar os atores, e logo após o inicializamos, através da chamada ao método actorOf(), na linha 4.

Feito isso, instanciamos o objeto Map para armazenar todos os usuários conectados no chat, definimos o método entrarChat(), responsável por viabilizar a entrada dos membros na sala e pelo envio de uma mensagem informando que determinado usuário se conectou.

Definimos também o método enviaMensagemTodos(), entre as linhas 47 e 44. Como o próprio nome indica, ele serve para enviar mensagens a todos os membros do chat.

Com a classe do ator definida na camada Model, nosso próximo passo é criar a classe Chat no diretório app/controller e nela escrevermos alguns métodos que serão executados diretamente da camada view. A Listagem 5 apresenta o código da classe Chat. O método login() terá o objetivo de abrir a página de login quando solicitado pela camada view.

O método abreSalaChat(), por sua vez, irá exibir a sala do chat após o usuário logar no sistema.

Para que seja possível estabelecer a comunicação entre a camada View e a camada Controller, é preciso que os links que irão chamar os métodos estejam devidamente configurados no arquivo routes.conf, o qual explicamos no início do artigo. Seu conteúdo é apresentado na Listagem 6.

Por último, o método entrarChat() é invocado quando qualquer usuário entra na sala chat. É no momento em que este método é acionado que o WebSocket é aberto. Neste momento, ressaltamos que a comunicação entre as camadas View e a classe Chat só será possível se a rota for declarada no arquivo routes.conf, conforme exibe a Listagem 6.

No código apresentado estão especificadas as rotas, ou seja, são definidos os métodos que serão acionados quando houver uma solicitação da camada View a determinada URL. Em cada linha configuramos primeiramente se a chamada será realizada via GET ou POST, em seguida nomeamos a rota e por último especificamos o método que será executado ao acessar a rota declarada. Como exemplo de uso das rotas, no código da página salachat.html, que será apresentado mais adiante, utilizamos a rota descrita na linha 5 para a inicialização do chat

Criando o layout da aplicação

Conforme mencionado, a parte visual do nosso chat será elaborada em duas telas. Na primeira delas teremos a tela de login, e na segunda teremos o chat propriamente dito. As Listagens 7 e 8 apresentam o código das páginas de login.html e salachat.html, respectivamente.

No código da Listagem 7, definimos na linha 1 que a página de login será um formulário, e para a construção desse formulário informamos a classe Login, que contém os atributos que serão necessários, no caso: id, nome e senha. Deve-se informar a classe Login porque ao invocar o método consultar(), na linha 5, será feita a pesquisa dos dados informados nos campos de login (linhas 12 e 13) e assim verificar se estes constam no banco de dados.

Ainda na linha 5, note que utilizamos a anotação @helper para indicar que o método consultar(), localizado em Chat, deverá ser acionado no momento em que o usuário pressionar o botão para entrar no chat, e nas linhas 12 e 13 utilizamos esta mesma anotação para especificar o tipo de dados para os campos de nome e senha.

A página de login é apresentada na Figura 3. Por sua vez, a Listagem 8 apresenta o código da página salachat. html. Nela adicionamos o componente textarea, no qual o usuário poderá digitar o que deseja enviar aos demais membros do chat.

Em seguida, informamos através da tag <script> a dependência ao arquivo salachat.js, onde implementamos algumas funções JavaScript que auxiliarão no funcionamento do chat. Tais funções serão úteis para inicializar o websocket e viabilizar o envio de mensagens para os demais membros com o pressionamento da tecla Enter, por exemplo. O conteúdo do arquivo salachat.js é apresentado na Listagem 9. A página da sala do chat é apresentada na Figura 4.

Nesse código, a conexão com o WebSocket é aberta ao instanciarmos a classe WebSocket na linha 5. Logo após, nas linhas 7 a 12, temos a função enviaMensagem(), que ao ser chamada irá enviar a mensagem digitada pelo usuário a todos os demais membros conectados ao chat. A função enviaMensagemEnter(), como o nome indica, possibilita o envio de mensagens ao pressionar a tecla Enter.

Por último, temos a função receiveEvent(), que será invocada sempre que um novo usuário entrar na sala de chat. Após ser invocada, ela enviará uma mensagem avisando a entrada do novo usuário.

O desenvolvimento de soluções web continua se reinventando.

A cada dia surgem novas tecnologias simplificam a implementação destas soluções. A partir de agora, para começar a desenvolver aplicações real time, tarefa até então vista com bastante receio por muitos desenvolvedores, basta empregar tecnologias simples como WebSockets. E para garantir a agilidade e eficiência da programação, fazer uso de soluções como o Play Framework. Sendo assim, continue os estudos nestas tecnologias. Através delas você conseguirá criar sistemas web diferenciados para seus clientes.

Bons projetos!