Posted by Luiz Gustavo Montanha Nobrega On May - 2 - 2014 3 Comments

Tutorial WebSocket Java:

Na tradicional comunicação request/response, sobre o protocolo HTTP, que todos estamos acostumados, o client (browser) envia uma requisição ao servidor, este processa a requisição, e envia uma resposta ao cliente. Essa comunicação é sempre iniciada pelo cliente, ou seja, o servidor não pode enviar uma mensagem ao cliente sem que esse tenha feito uma requisição. O WebSocket resolve essa questão sendo uma evolução de Comet e Ajax, nos permitindo criar uma conexão full-duplex (bi-direcional), onde o servidor pode enviar mensagens ao cliente, sem ter recebido uma requisição, basta ter uma conexão WebSocket aberta.

Neste post mostraremos um simples exemplo de utilização da nova API de WebSocket incluída no Java EE 7, a Java API for WebSocket (JSR 356) em conjunto com a especificação WebSocket do HTML5.

Ferramentas e Tecnologias utilizadas no exemplo:

- IDE Eclipse Kepler.

- Wildfly 8 (JBoss AS 8).

- JDK 1.8.

Vamos ao código!

Lado do Servidor:

- Devemos criar um simples Dynamic Web Project no eclipse, utilizando a Runtime de algum Servidor de Aplicação que suporte a especificação Java EE 7, no caso do nosso exemplo, Wildfly 8.

- Criamos o nosso Servidor Endpoint WebSocket, que é simplesmente um POJO, anotado com @ServerEndpoint.

MyServerEndpoint.java

package com.br.websocket;

import javax.websocket.EndpointConfig;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/server")
public class MyServerEndpoint {

    @OnMessage
    public void server(String text, Session client) throws InterruptedException {
    	for(int i=0; i<5; i++){
    		client.getAsyncRemote().sendText(text.toUpperCase() + " - " + i);
    		Thread.sleep(2000);
    	}
    }

    @OnOpen
    public void open(Session session, EndpointConfig conf) throws InterruptedException {
    	server("Mensagem para o Browser", session);
    }
}

No código acima, a anotação @ServerEndpoint("/server") indica que a classe será um WebSocket Endpoint, publicado na URI "/server".(A anotação pode receber outros atributos, que não fazem parte do escopo desse post).

A anotação @OnMessage indica que o método server() será responsável por receber e enviar mensagens ao cliente. Esse método pode ser executado pelo servidor, como é feito no nosso exemplo, ou pelo cliente (HTML5 e javascript).

Note que o método server() faz um for de cinco iterações, enviando 5 mensagens para o cliente.

O método open(), anotado com a anotação @OnOpen, será executado quando o cliente abrir a conexão WebSocket.

Lado do Cliente:

index.html:

<!DOCTYPE html>
<html>
	<head>
		<title>Web Socket</title>
	</head>
	<body>
		<h1>Hello World - Web Socket</h1>
		<h2>Mensagem do Servidor: </h2> <span id="result"></span>

		<script>
			var wsocket;
			function connects() {
			   wsocket = new WebSocket("ws://localhost:8080/MyAppWebsocket/server");
			   wsocket.onmessage = onMessage;
			}
			function onMessage(eventRecebidoDoServidor) {
			   var textoRecebido = eventRecebidoDoServidor.data;
			   document.getElementById("result").innerHTML = textoRecebido;
			}
			window.addEventListener("load", connects, false);
		</script>
	</body>
</html>

Veja que criamos uma função connect(), que abre a conexão com nosso endpoint, ws://localhost:8080/MyAppWebsocket/server. Essa função será executada ao carregarmos a página index, devido ao trecho de código javascript abaixo:

window.addEventListener("load", connect, false);

A função onMessage(), será invocada quando nosso servidor enviar uma mensagem através do método server(), anotado com @OnMessage.

Pronto!! Simples assim!!

Para testar a aplicação, entre na url http://localhost:8080/MyAppWebsocket/

Se tudo ocorreu como deveria, você deve ver o seguinte resultado:

Resultado

Repare que o servidor envia 5 mensagens ao cliente, e nenhuma requisição é feita. O cliente apenas abre uma conexão WebSocket com o servidor.

Essa foi uma simples demonstração de como é interessante essa nova API WebSocket, mas é possível fazer muito mais.

Em breve colocarei um post onde faremos um Chat Online utilizando a API Java for WebSocket, junto com as tecnologias Javascript, HTML5 e Bootstrap.

OBS.: Existem especificações do WebSocket para os containers web Tomcat e Jetty, porém, nosso exemplo utiliza as bibliotecas implementadas no servidor de aplicação Wildfly 8.

About the author

Luiz Gustavo Montanha Nobrega Bacharel em Sistemas de Informação, programador Java certificado pela Oracle, OCJP. Tem focado seus estudos no aprendizado de novas ferramentas, boas práticas e alta perfomance de desenvolvimento. Google Plus

Be Sociable, Share!

3 Responses so far.

  1. Ricardo Calixto says:

    Muito bom esse tutorial. Parabens!

  2. edson says:

    Ola muito bom seu tutoria . Eu precisava rodar isso no jboss 7.1.1 tem como?

    Abs

    Edson

  3. Junior says:

    Eu rodei com tomcat o mesmo exemplo acima e funcionou perfeitamente.

    Valeu!


Protected by WP Anti Spam