HTML5 é a mais nova versão da linguagem HTML. Nessa versão passou a possuir vários recursos avançados, alguns antes possíveis somente com a utilização de outras linguagens.
Apesar de nova, a primeira espeficicação divulgada pelo W3C, consórcio de empresas de tecnologia que coordena os padrões da internet quanto a linguagem, data do início de 2008.
Logo oficial do HTML5
Claro que não são todos navegadores que oferecem suporte ao HTML5. Alguns suportam poucos recursos. No site HTML5Test pode-se testar se o navegador oferece suporte para HTML5. E no HTML5Readiness mostra um gráfico de quais recursos suportados por cada browser.
Vamos demonstrar um recurso interessante dessa nova geração do HTML, a api de WebSockets. O WebSocket é utilizado para comunicação bidirecional, full-duplex, ou seja, onde os dispositivos conectados podem se comunicar um com o outro em ambas direções (Envio/Recebimento).
Analisando o gráfico do HTMLReaddiness, podemos ver que o Chrome, do Google, é o navegador que possui suporte tudo do HTML 5. No dia 9 de Dezembro de 2009, foi divulgado que o Chrome passaria a disponibilizar suporte a WebSockets. Divulgado através do The Chromiun Blog, blog oficial do Chrome.
Para demonstrar o uso do WebSocket , iremos utilizar como navegador o Google Chrome. O Websocket utiliza o WebSocket Protocol para comunicação. E para implementação do servidor, utilizaremos uma biblioteca chamada WebSocket4J, que implementa esse protocolo, de forma bastante simples. Essa biblioteca possui poucas classes, que por traz, utiliza-se da classe ServerSocket do próprio Java, onde interpreta os dados recebidos, e assim não precisamos nos precupar em interpretar o protocolo de comunicação.
Começando com o servidor WebSocket. Criaremos um projeto Java, chamado de WebSocketServer, e em seguida a classe ServerWebSocket.java que irá possuir o método Main.
public class ServerWebSocket {
public static final int PORTA = 8000;
public static void main(String[] args) {
WebServerSocket server = null;
try {
server = new WebServerSocket(PORTA);
System.out.println("--- Servidor Iniciado - Porta " + PORTA + " ---");
System.out.println("");
WebSocket socket = server.accept();
System.out.println("");
while (true) {
String message = socket.getMessage();
System.out.printf("Cliente enviou-> %s\n", message);
socket.sendMessage("OK;" + new Date());
}
} catch (IOException e) {
System.err.printf("Ocorreu um erro no Servidor. Erro->%s\n", e.getMessage());
}
}
}
Essa clase é bem simples, tem um laço infinito onde fica esperando uma conexão ao Servidor de WebSocket. Lembrando que o servidor é Single-thread, ou seja, suporta somente uma conexão por vez. Essa limitação pode ser facilmente contronada alterando a classe. Ao receber uma conexão o servidor faz a leitura da mensagem, escreve ela no console e retorna um OK e data atual separado por “‘;”.
Agora iremos criar um projeto Web. Chamado de WebSocketClient, e a seguir criar um JSP, index.jsp. Que adicionaremos o seguinte código JavaScript, dentro da tag <head>.
var socket;
//Conecta ao Socket
function connect() {
if (!"WebSocket" in window) {
$("status").innerHTML = "Browser não possui suporte a WebSockets.";
} else {
try {
socket = new WebSocket("ws://"+$("host").value+":"+$("port").value);
socket.onopen = function() {
//Conectou, escreve a Conectou na DIV id status.
$("status").innerHTML = "Conectado";
$("host").disabled = true;
$("port").disabled = true;
}
socket.onmessage = function(msg) {
//Recebeu a mensagem
var message = msg.data;
if(message != ""){
var split = message.split(";");
if("OK" == split[0]){
$("receivedMesages").innerHTML = split[1];
}
}
}
socket.onclose = function(){
//Fechou a conexão
$("status").innerHTML = "Desconectado";
}
} catch (exception) {
$("status").style. backgroundColor = "#F00";
$("status").innerHTML = exception.message;
}
}
}
//Função utilizada para recuperar elementos pelo seu id
function $(element){
return document.getElementById(element);
}
//Disconecta
function disconnect() {
socket.close();
$("host").disabled = false;
$("port").disabled = false;
}
//Envia mensagem
function sendMessage(message) {
socket.send($("message").value);
$("message").value = "";
}
Nesse trecho de código utilizamos o objeto WebSocket, do JavaScript. Primeiramente verificamos de o nevegador oferece suporte a WebSocket e em seguida montamos a URL de Acesso ao Socket. A figura abaixo ilustra o significado dessa URL.
URL WebSocket
O Objeto WebSocket possui 4 eventos:
- onopen: ocorre quando um WebSocket é aberto;
- onmessage: ocorre quando uma mensagem é recebida;
- onclose: ocorre quando o WebSocket fecha sua conexão;
- onerror: ocorre quando acontece um erro na comunicação;
Agora podemos executar o projeto WebSocketServer.
Console Eclipse - Aguardando conexão de Cliente
Neste ponto nosso servidor está esperando a conexão de algum cliente. Agora vamos iniciar projeto WebSocketClient.
Cliente WebSocket
Essa tela foi desenvolvida para dispara as funcões JavaScript. Ao clicar em conectar o Status do cliente irá mudar para Conectado, e assim poderemos escrever a mensagem para envioa ao servidor. E ao clicar em Enviar, poderemos visualizar a mengam no console do Eclipse, que está executando nosso servidor.
O codigo fonte dos projetos estão disponívies para download nesse link.
O HTML5, talvez ainda não seja uma tecnologia muito utilizada, por enquanto, mas com esse simples exemplo podemos demonstrar um pouco do seu poder.
Vale destacar que grandes empresas já manifestaram seu interesse pela tecologia. Steve Jobs publicou uma carta, intitulada Toughts on Flash explicando o porque de seus aparalhos não oferecerem suporte ao Adobe Flash, que em um trecho diz “Nós realmente acreditamos que todos os padrões pertencentes à web deveriam ser abertos. Em vez de usar Flash, a Apple adotou o HTML5, CSS e JavaScript – todos padrões abertos.”. O Youtube também já possui sua versão em HTML5. Para ficar em apenas dois exemplos.
Fonte: Nettuts+ – Start Using HTML5 WebSockets Today, WebSocket4J
Download do exemplo
Outros exemplos: HTML5 Demos and Examples.
** Atualização
Fernando Farias postou um comentário no tópico informando que estava ocorrendo um erro no Projeto de exemplo do tópico. O erro em questão era um Handshake failed, que ocorria em tempo de execução. Isso logo após o cliente solicitar a conexão com o WebSocketServer.
A causa disso é um problema com o Hanshakedo webSocket. Handshake é uma espécie de autorização que o cliente, ao solicitar uma conexão com Servidor WebSocket, envia ao Servidor e por sua vez valida essa autorização. Também é utilizado em várias protocolos da web como: FTP, TCP, HTTP, etc.
O que acontecia aqui é que o Handshake enviado ao servidor não era válido. Pelo menos do ponto de visto do WebSocket4J. Cheguei até a criar um tópico no site da Launchpad descrevendo o erro, mas pelo menos até hoje (19/03/2012) não tinha sido respondido.
Muito provavelmente o projeto parou e/ou não acompanhou a evolução da espeficicação do WebSocket. Ja que o Google Chrome, browser utilizado, teve várias atualizações.
Por isso agora na segunda versão passei a utilizar TooTallNate WebSocket, e a versão 17.0.963.79 m (mais atual, até o momento) do Chrome e funcionou perfeitamente.
Basta executar a classe ServerWebSocket2. Ela estende a classe WebSocketServer, assim basta implementar os métodos onOpen, onClose, onError, onMessage (esse possui duas versões: uma que recebe String e outra um array de byte[]), semelhante aos métodos implementados no Cliente.
public class ServerWebSocket2 extends WebSocketServer {
(...)
@Override
public void onOpen(WebSocket conn, ClientHandshake handshake) {
System.out.println("");
}
@Override
public void onClose(WebSocket conn, int code, String reason, boolean remote) {
System.out.println("");
}
@Override
public void onError(WebSocket conn, Exception ex) {
System.err.printf("Ocorreu um erro no Servidor. Erro->%s\n",
ex.getMessage());
}
@Override
public void onMessage(WebSocket conn, String message) {
try {
System.out.printf("Cliente enviou-> %s\n", message);
conn.send("OK;" + new Date());
} catch (InterruptedException e) {
onError(conn, e);
}
}
@Override
public void onMessage(WebSocket conn, byte[] blob) {
try {
conn.send(blob);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
(...)
Download da versão 2 do Projeto.
Existem muitos artigos na Internet explicando como lidar com o “problema” de se mudar a orientação tela de uma aplicação Android, e não perder seu estado.
Thiago Turim 