Conectividade em HTML5
Os novos recursos da área de conectividade são os mais impressionantes e também os mais subestimados no HTML5. Novas abordagens como os Web Sockets e o SSE trazem inovações essenciais, especialmente aos desenvolvedores de jogos eletrônicos.
Para entender a importância dos Web Sockets, é necessário, antes, entender como o protocolo HTTP funciona. O usua?rio (lado cliente) interage com a interface e esta interação dispara uma requisiça?o para o servidor. A requisição é processada e devolvida pelo servidor ao solicitante, encerrando a comunicaça?o. Cada nova interação dispara novas requisiço?es, que são abertas e fechadas. Ou seja: é seguro afirmar que o servidor reage às requisiço?es, emitindo respostas a partir delas. Também podemos afirmar que a requisiça?o sempre parte do cliente para o servidor, sendo, portanto, de inicializaça?o unilateral; o servidor nunca pode começar a comunicaça?o.
Caso precisemos enviar novas informações no sentido inverso (do servidor para o cliente), o cliente deve possuir rotinas que realizem, regularmente, requisiço?es ao servidor em busca de novas informaço?es – procedimento conhecido como “polling”. Esta abordagem, porém, aumenta a latência, sobrecarregando a conexão com inu?meras requisições que na maioria dos casos serão desnecessa?rias. Para solucionar o problema, os desenvolvedores do HTML5 trouxeram a tecnologia de sockets (canal de comunicaça?o que não usa o protocolo HTTP e sim um protocolo persistente, cuja comunicaça?o pode ser iniciada de ambos os lados [full-duplex]), criada de?cadas atra?s no Unix.
A solução também se torna um obstáculo. Abrir uma nova porta de serviço de rede em padrão socket exige certos privilégios de segurança que os servidores de hospedagem, que tradicionalmente trabalham com servidores compartilhados por vários clientes, não colocam à disposição de seus clientes. A estratégia fica, então, restrita a projetos que utilizem infraestrutura própria e dedicada ou um serviço de Cloud Computing.
A abordagem Web Sockets não é a única novidade do HTML5 na área de conectividade. Baseado em protocolo HTTP, outra boa novidade são Server Side Events (SSEs) que, em traduça?o livre, quer dizer “eventos do lado do servidor”. Eles criam um canal de comunicaça?o simples e enxuto, buscando por informaço?es novas sempre que necessa?rio. Trata-se do polling mencionado anteriormente, mas leve e enxuto, pois e? controlado nativamente pelo navegador, substituindo linhas e mais linhas de JavaScripts e AJAXs.
O exemplo abaixo de uso do SSE está em código PHP e deve ser armazenado no servidor. Trata-se de um código muito simples, mesmo para aqueles que não programam em PHP: o código sorteia entre três cores (vermelho, azul e verde) e exibe uma informação no formato pré-determinado pelo SSE: data: red/blue/Green (dois pular linhas).
01 <?php
02 header(‘Content-Type: text/event-stream; charset=utf-8’);
03 header(‘Cache-Control: no-cache’);
04
05 switch(rand(1, 3))
06 {
07 case 1:
08 $cor = “red”;
09 break;
10 case 2:
11 $cor = “blue”;
12 break;
13 case 3:
14 $cor = “green”;
15 break;
16 }
17 echo “data: “.$cor.”\n\n”;
18 ob_flush();
19 flush();
20 ?>
O código a seguir é o JavaScript acessando a API de SSE, recebendo a informação do servidor (http://localhost/cor.php) e usando a cor sorteada como cor para plano de fundo.
01 <!DOCTYPE HTML>
02 <html lang=”pt-br”>
03 <head>
04 <meta charset=”UTF-8″>
05 <title>Server Side Events – Exemplo Simples</title>
06 </head>
07 <body id=”corpo”>
08 </body>
09 </html>
10 <script type=”text/JavaScript”>
11 // Verificando se ha? suporte para Server Side Events
12 if(typeof(EventSource) !== “undefined”)
13 {
14 // Chamada do Server Side Event
15 var servidor = new EventSource(“http://localhost/cor.php”);
16 // Utilizando o evento onMessage – tratamento do que será feito
17 // sempre que um “data” chegar.
18 servidor.onmessage = function(event)
19 {
20 document.getElementById(“corpo”).style.backgroundColor = event.data;
21 }
22 }
23 else
24 {
25 document.getElementById(“corpo”).innerHTML = “Este navegador não possui 26 suporte à Server Side Events”;
27 }
28 </script>
Obtemos como resultado cores de fundo do documento trocadas regularmente pelo servidor, usando SSE:
Henrique Poyatos é coordenador pedagógico de EAD e professor dos cursos de graduação e MBA da FIAP. Pós-graduado em Gerenciamento de Projetos e tecnólogo em Processamento de Dados (FIAP). Atua no mercado de desenvolvimento para Internet desde 1996 e coordenou projetos de tecnologia para empresas como Caixa Econômica Federal, Nossa Caixa, McDonalds, Metrô de São Paulo e clientes internacionais.
