HTML 5/ HTML5 / CSS3

HTML5 e SSE

sse

Se você nunca fez um loop ou um timer para sempre consultar uma determinada URL e atualizar informações, então você nunca passou por um processo de criação de software.

Atualmente temos vários protocolos de transferência de dados entre o lado cliente e servidor. Hoje como é mais conhecido como “Nas nuvens”, o sujeito faz requisições a um determinado serviço e a resposta é enviada “polling”, você requisita e espera que o callback da sua requisição traga a mensagem de volta.

Tanto no Flash Player quanto no AIR, nós tinhamos diversas opções de protocolos de transferência de dados: RTMP,RTMPF, Sockets, XMLSockets, HTTPRequest.

Assim, poderimos fazer long-polling, real time data transfer (RTDF) e deixariamos muitos usuários contentes.

O problema é que se você quer fazer algo totalmente ao vivo, a coisa complica, esbarramos em altos preços de softwares, diversas modificações nos canais de comunicação e em fim conseguir a tal adaptação do model. Ok até ai você faz isso de letra, já que não é tão trabalhoso quanto parece.

É ai aonde entra o SSE ( Server Sent Events ) “eventos enviados pelo servidor”, trata-se de uma nova especificação publicada no W3C por um Ian Hickson engenheiro do Google onde torna as coisas mais simples.

Long polling, short polling, todos querendo ou não sempre vão ficar dependentes das requisições do cliente em um canel multiplo, o SSE já atua um pouco diferente dessa forma. A idéia é trazer para o cliente a resposta mesmo sem sua requisição ser feita.
Pera ai?! Eu estou no ano certo? Em fim, isso já existia à um certo tempo, a galera do Java que o diga, mais agora é legal saber que você com puro javascript pode fazer isso sem ter que re-inventar a roda.

[browser_suporte ie=”no”] [pullquote align=”left”]Na plataforma Mobile Funciona no Firefox OS, iOS e Blackberry 7/10[/pullquote]

O SSE apesar de novo já dá suporte a várias plataformas, afinal quem não quer algo simples como esse. Todos querem dados via stream para seus clientes de maneira fácil.

 

Exemplo prático.

sse

Ok, já que eu não fujo a regra, eu escrevi um exemplo prático com gráficos, os dados vem em forma de json, e no meu lado cliente html5 eu faço o parse deles e gero um gráfico bonitão, igual esse abaixo.

 

Código do PHP stream:

<?php
//header('Content-Type: text/event-stream; charset=utf-8'); // importante ter
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // só pra prevenir cache
 
 
$dados = array(
		array('empresa' => 'GFSA3','valor' => mt_rand (1.7*10, 40*10) / 10),
		array('empresa' => 'PETR4','valor' => mt_rand (4.3*10, 30*10) / 10)
	);
echo "data: " . json_encode($dados) . "\n\n";
flush();
?>

 

Código do lado cliente:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<meta charset="utf-8">
<title>Exemplo de HTML 5 com Server Sent Events</title>
<style type="text/css">
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
#graph {
	text-align: center;
	margin:0 auto;
}
</style>
<script type="text/javascript">
 
var chart;
 
 
 
 	$(document).ready(function() {
 
 	chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graph',
        type: 'areaspline',
        marginRight: 10,
        marginBottom: 50,
        zoomType:'x'
      },
      title: {
        text: 'Portifolio de Ações'
      },
      xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
        },
 
      yAxis: {
        labels: { 
          enabled: true 
        },
        gridLineWidth: 1,
        title: {
          text: 'Valor',
        },
        plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
      },
      series: [
      {
        name: 'Gafisa ON',
        data: [4.3,4.0,19.3]
      }, 
      {
        name: 'Petrobras ON',
        data: [4,18,3]
      }],
      plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, 'rgba(2,0,0,0)']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                radius: 5
                            }
                        }
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            }	
    });
 
 
	  if(typeof(EventSource)!=="undefined")
	  {
		var source=new EventSource("cotacoes_stream.php");
		source.onmessage = function(e){
      		var result = $.parseJSON(e.data);
      			chart.series[0].addPoint([(new Date()).getTime(),Number(result[0].valor)], true, true);
      			chart.series[1].addPoint([(new Date()).getTime(),Number(result[1].valor)], true, true);
		}
	 	}else{
	 		alert('Server Sent Events não é suportado pelo seu navegador');
	 	}
 	});
 
</script>
</head>
 
<body>
	<div id="graph"></div>
 
</body>
</html>

Existem várias outras opções mais completas, como o próprio webSocket, só que devido a sua falta de suporte em determinadas plataformas, fica inviável usa-lo.

Porém a grande vantagem do SSE é praticamente coisas simples que vão te tirar do sufoco quando você precisar fazer algo para prototipação com dados reais.

Esse é um exemplo de um material de curso que estou preparando. Aconselho também você dá uma estudada na especificação e verificar as outras configurações que o SSE possui.

4 thoughts on “HTML5 e SSE

  1. Igor,

    O exemplo do SSE é de fato um ganho. Com relação à tecnologia WebSocket, é também uma inovação trazida pelo HTML5?

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *