HTML 5 – Parte 8 – Messaging

Publicado em 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>Host</title>
 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. criei um botão para acionar o envio da mensagem;
  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. a chamada para postMessage (que ocorre na linha 10) é muito simples
    1. no primeiro parâmetro passo a mensagem (poderia ser qualquer string);
    2. no segundo parâmetro, estou passando o endereço do domínio do widget;

Simples? E o widget …

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title>widget</title>
 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         Widget</p>
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:
Publicado em: Sem categoria