HTML 5 – Parte 8 – Messaging

Posted on 23/10/2010

6


Olá galera, tudo certin?

Depois de dois dias falando sobre arquitetura, estou voltando a minha jornada por esse fantástico novo mundo do HTML5.

Sobre o que trata esse post? Messaging.

Você já construiu widgets para páginas Web? Sim? E como você fez para permitir que a aplicação host (aquela que tem o iFrame) fizesse contato com seu Widget? Source do Iframe? Diga que não! A especificação Messaging serve exatamente para isso.

Sem mais delongas,

O que já vimos?

Para você que está chegando agora, veja sos aspectos que já abordei:

A API para Messaging

O suporte Messaging, definido na especificação do HTML5 tem grande suporte. Sim, até o Internet Explorer implementou direitinho essa parte da especificação (Muito bem, IE).

Como a coisa funciona? Na prática, a API parmite a um domínio “postar” texto simples para outro domínio. Para isso:

  • o host utiliza o método postMessage para “enviar” a mensagem;
  • o widget assina um evento para “escutar” as mensagens que lhe forem enviadas.

O método postMessage recebe dois parâmetros:

  1. mensagem que desejamos enviar (string);
  2. endereço do domínio onde está o widget (nosso alvo).

O evento recebe um objeto do tipo MessageEvent que contém, entre suas propriedades, duas que merecem destaque:

  1. data – mensagem enviada;
  2. origin – endereço do domínio que enviou a mensagem (permitindo resposta);

E é tudo que precisamos…

Um exemplo (muito simples)

Para criar um exemplo muito simples, criei duas páginas no IIS. A principal, contém apenas um documento: host.html


              

                1 <html xmlns="http://www.w3.org/1999/xhtml">  2 <head>  3 <title>Hosttitle>  4 <script language=javascript>  5 function sendMessage() { 6 var t = document.getElementsByTagName( 7 'iframe'  8 )[0]; 9 10 t.contentWindow.postMessage( 11 'sayHello', 12 'http://localhost:81' 13 ); 14 alert("Message Was sent"); 15 } 16 script> 17 head> 18 <body> 19 <iframe src="http://localhost:81/widget.html"> 20 iframe> 21 <button onclick="sendMessage();">Send Message!button> 22 body> 23 html>
              

              

              

            

            
O que eu fiz?

            
    
              
  1. criei um frame hospedando meu widget (repara que está em localhost, em outra porta… poderia ser qualquer “outro” domínio);
    2. 
              
  2. criei um botão para acionar o envio da mensagem;
    3. 
              
  3. nas linhas 6, 7 e 8, recupero o frame, onde mais tarde (linha 10) recupero o objeto “document”; É esse objeto que tem o método postMessage;
    4. 
              
  4. a chamada para postMessage (que ocorre na linha 10) é muito simples
                
      
                  
    1. no primeiro parâmetro passo a mensagem (poderia ser qualquer string);
      2. 
                  
    2. no segundo parâmetro, estou passando o endereço do domínio do widget;
      3. 
                
    
              
    5. 
            

            
Simples? E o widget …

            

              

              

                1 <html xmlns="http://www.w3.org/1999/xhtml">  2 <head>  3 <title>widgettitle>  4 <script language=javascript>  5 window.addEventListener('message', 6 function (event) { 7 alert(event.data); 8 alert(event.origin); 9 }, false); 10 script> 11 head> 12 <body> 13 <p> 14 Widgetp> 15 body> 16 html>
              

              

              

            

            
O que eu fiz? Assinei o evento e mostrei para o usuário os dados recebidos em data e origin.

            
Aqui, o céu é o limite! O widget pode mudar a aparência… Você pegou a idéia.

            
Respondendo…

            
Ok! Já mostrei que um aplicativo Host pode, usando a API de Messaging, enviar mensagens para um Widget. Perfeito! Mas e se o Widget desejasse responder ao aplicativo HOST? Observe:

            

              

              

                1 <script language=javascript>  2 window.addEventListener('message', function (event) { 3 alert(event.data); 4 alert(event.origin); 5 event.source.postMessage( 6 'hello my host', 7 event.origin 8 ); 9 }, false); 10 script>
              

              

              

            

            
O que eu fiz? Utilizei uma propriedade source do parâmetro recebido no evento para mandar uma mensagem de volta para o caller. Simples?

            
Smiley piscando

            
Mas só string?

            
Claro que não, cabeção! Serialize seus objetos como JSON no sender e realize o parse no lado cliente.

            
Definindo HTML5

            
Como prometido, durante essa série, na medida em que vamos conhecendo mais detalhes do HTML5, vou tentar ir criando uma definição para a linguagem. Nossa definição hoje fica assim:

            

              
HTML5 é a nova versão do HTML (anterior era 4.01) – uma linguagem para desenvolvimento de aplicações web online e offline – que está sendo desenvolvida pelo W3C e pelo WHATWG. Dá mais ênfase para o significado do conteúdo que para como que escrevemos documentos. Além disso, simplifica a criação de formulários e players de áudio/vídeo reduzindo a necessidade de código JavaScript ou plugins. Define duas novas API de persistência, superiores ao  cookies, sendo que uma delas é um banco de dados SQL. Tem suporte consistente para Messaging.

            

            
O que vocês acharam?

            
Por enquanto, é o que temos. Vamos avançar mais nos estudos para poder complementar essa definição!

            
Por hoje, é isso!

            
            

              Etiquetado:
            

            

              Posted in: Sem categoria