Open Blog

Grunt: você deveria estar usando!

2013-03-22T00:00:00-07:00

Todo programador é preguiçoso, e isso é fato, pois sempre estamos procurando ferramentas que automatizem o trabalho para nós. Mas isso necessariamente não é algo ruim, pelo contrário, automatizar tarefas implica em ganho de produção e isso é ótimo. O que não podemos deixar acontecer é a não realização de tarefas primordiais para que uma aplicação tenha qualidade.

Minificação e concatenação de arquivos por exemplo são tarefas básicas e você não deve deixar isso de lado, mas fazer isso usando um plugin no editor (que seja o Sublime Text) ou um site, copiar o código minificado, colar em um novo arquivo renomeado com .min no final e por fim salvar, e toda vez que alterar o código ter que repetir essa operação é um saco.

E o deploy ? Se você utiliza FTP sabe o quão lento é fazer upload de arquivos, principalmente se forem muitos, e o pior de tudo, ele abre e fecha uma conexão para cada arquivo, é um sofrimento. E se você esquece de enviar um arquivo que alterou ? Melhor nem pensar…

O que é o Grunt?

Foi pensando nessas e várias outras atividades que o Ben Alman, conhecido como Cowboy criou essa ferramenta incrível. O Grunt é uma aplicação de linha de comando que tem como objetivo automatizar tarefas, principalmente tarefas em aplicações JavaScript. Essas tarefas são como as descritas acima. E como isso é feito? Escrevendo as tarefas em JavaScript e rodando no Node.JS.
Link oficial: http://gruntjs.com

Ok, quero usar!

Bom, agora que você já entendeu para o que ele serve, vou mostrar como é simples utilizá-lo.

Como eu disse, ele roda no Node.JS, então antes de tudo você precisa ter o node e o npm instalados em sua máquina. Se isso estiver ok, você pode continuar.

Se você já instalou o Grunt alguma vez, certifique-se de remove-lo não ocorrer problemas futuros.

  sudo npm uninstall -g grunt

Agora para instalar:

  sudo npm install -g grunt-cli

Isso irá deixar disponível o comando grunt em seu terminal. Perceba que instalamos o grunt-cli e não o grunt em si, a tarefa do grunt-cli é rodar qualquer versão do grunt, isso permite que você tenha diversas versões do grunt disponíveis em diferentes projetos, e você poderá rodar (inclusive simultâneamente) em sua máquina sem ter problemas.

Mas como ele funciona ?

Para utilizar o Grunt em um projeto, é necessário que exista dois arquivos: o Gruntfile.js e o package.json. Eles devem estar na raiz (diretório principal, root) do projeto. Vou falar sobre esses arquivos logo mais.
Se você estiver trabalhando em um projeto que já utiliza o Grunt (isto é, exista os arquivos Gruntfile.js e package.json), para rodar é simples.

  // Acesse a pasta do projeto
  cd project-folder

  // Instale as dependências 
  sudo npm install

  // Rode o Grunt
  grunt

Simples não?
Mas ok, vamos fazer isso do zero agora.

Criando um projeto com Grunt

Para iniciar um projeto com o Grunt existem algumas opções: você pode optar pelo grunt-init que gera o scaffolding para alguns modelos de aplicações, como:

→ jquery: cria um projeto para um plugin jQuery
→ commonjs: cria um projeto para um módulo commonjs
→ Gruntfile: cria um arquivo Gruntfile.js básico
→ gruntplugin: cria um plugin grunt
→ node: cria um módulo Node.JS

Você também pode baixar outros templates, além dos oficiais. Para criar um projeto a partir de um dos template como os descritos acima basta usar o comando:

grunt-init <nome-do-template>

Ou então iniciar o Grunt sem um template, criando os arquivos “na unha”.
Antes, é nescessário que você saiba para que serve aqueles dois arquivos.
Gruntfile.: Esse é um arquivo JavaScript que são definidas e configuradas as tarefas a serem executadas pelo Grunt.
package.json: Esse arquivo é usado pelo npm para armazenar as informações da aplicação, dados como nome, autor, repositório e dependências, e é por isso que o grunt precisa dele, para instalar as dependências e os plugins do grunt que seu projeto irá utilizar. Ao rodar o comando npm install, ele procura as dependências descritas nessa arquivo, e instala na pasta do projeto as mesmas com suas respectivas versões. Para criar um arquivo package.json você pode utilizar o comando npm init.

Exemplo:

{
  "name": "meu-projeto",
  "version": "0.0.1",
  "description": "Meu íncrivel projeto",
  "homepage": "http://vagnersantana.com/meuprojeto",
  "repository": {
    "type": "git",
    "url": "http://github.com/vagnervjs/meu-projeto"
  },
  "engines": {
    "node": "0.8.x",
    "npm": "1.1.x"
  },
  "devDependencies": {
    "grunt-cli": "0.1.6",
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1"
  }
}

Para instalar o grunt e plugins dele, você pode usar o comando npm install <nome do modulo ou plugin> --save-dev que além de instalar localmente, adiciona a dependência e sua versão na sessão devDependences do arquivo package.json.

O arquivo Gruntfile.js é compostos da função principal que engloba tudo, das configurações e tarefas da aplicação, do carregamento de grunt plugins, e de tarefas personalizadas.

Exemplo:

module.exports = function(grunt) {
  'use strict';

  // configuração do projeto
  var gruntConfig = {
    pkg: grunt.file.readJSON('package.json'),
    min: {
      dist: {
        src: ['src/assets/js/main.js'],
        dest: 'src/assets/js/all.min.js'
      }
    },
    cssmin: {
      dist: {
        src: ['src/assets/css/main.css'],
        dest: 'src/assets/css/all.min.css'
      }
    },
    jshint: {
      all: ['src/assets/**/*.js']
    }
  };
  grunt.initConfig(gruntConfig);

  // carregando plugins
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // tarefas
  grunt.registerTask('default', ['jshint']);
};

Bom, pra quem não entendeu direito o que acontece acima vou explicar: dentro da função foram declaradas várias tarefas, e suas configurações, por exemplo: min é responsável por minificar os arquvios da pasta descrita na propriedade src e enviar para o arquivo de destino em desc. Depois de definir as tarefas e configurações em initConfig(), é nescessário carregar os plugins grunt de terceitos, caso esteja utilizando algum. Feito isso, basta registrar as tarefas a serem executadas, usando registerTask().

Plugins do Grunt

Talvez a melhor parte do Grunt seja essa: seus plugins que estão disponíveis. O Grunt vem com algumas tarefas padrões como min e concat, e você chamas elas definindo suas configurações e adicionando o parâmetro 'default' em registerTask(). Porém, a comunidade já criou e vem criando novas tarefas para o Grunt, e a lista não para de crescer. Provavelmente tudo o que você precisa já deve ter pronto. Você pode ver essas tarefas em: http://gruntjs.com/plugins, lá tem o link para o npm, onde você vê como instalar, e qual configuração utilizar.

E o deploy?

É, eu disse lá no início que é possível até fazer deploy com o Grunt, e sim, isso é perfeitamente possível. Agora que você já viu como ele funciona vou falar sobre esse plugin em específico.

Para deploy estou utilizando o grunt-rsync. Esse plugin cria uma tarefa de sincronização, tanto local como para um servidor remoto, usando o rsync que já vem presente em sistemas operacionais “unix like”. O rsync é excelente pois mantém o diretório remoto sempre em sincronia com o diretório base, e só envia os arquivos que foram alterados, além de não enviar os arquivos um-a-um como faz o FTP. Outro ponto positivo é que ele utiliza SSH, portanto se você tiver uma chave publica adicionada as chaves autorizadas no servidor, você executa o deploy direto do Grunt e sem digitar senha.

Veja a configuração da tarefa:

rsync: {
  dist: {
    src: './src/',
    dest: './dist',
    recursive: true,
    syncDest: true,
    exclude: ['main.*']
  },
  deploy: {
    src: './dist/',
    dest: '/var/www',
    host: 'root@vagnersantana.com',
    recursive: true,
    syncDest: true
  }
}

Explicando: em dist eu estou fazendo uma sincronização local, preparando a aplicação para deploy, nela eu removo os arquivos que tem nome “main” pois estes foram minificados e concatenados em tarefas anteriores. Depois disso, defino a tarefa de deploy, que pega a pasta ‘./dist’ que acabou de ser criada ou atualizada, e envio ela para meu servidor. A propriedade “dest” agora é é o diretório remoto e a propriedade “host” é o usuário e endereço do meu servidor remoto.

Como rodar?

Mais simples impossível, depois de tudo configurado, você pode executar todas as tarefas descritas no Gruntfile.js com o comando:

grunt

Talvez você precise utilizar sudo caso alguma tarefa nescessite de privilégios.

Grunt Boilerplate

Depois que comecei a utilizar o Grunt, percebi que sempre iria executar tarefas em comum para vários projetos, e isso me fez criar um padrão do Grunt com tudo que preciso em comum, e caso algum projeto necessitar de outras tarefas, é só ir lá e adicionar. Nesse boilerplate defini (por enquanto): min, cssmin e rsync. Não adicionei o JSHint pois utilizo direto no Sublime. Dessa forma com esse boilerplate pronto, para iniciar um projeto eu apenas clono o projeto grunt-boilerplate, mudo o nome da pasta, configuro o package.json, altero os caminhos e nomes de arquivos de acordo com o projeto, e pronto, é lindo =D

Ficou com vontade de utilizar também? É só ir lá repositório no meu github, clonar o projeto e alterar para suas necessidades. Sá basta ter o grunt-cli e o node instalados para tudo funcionar.

Se quiser realizar um fork, ou reportar um problema fique totalmente à vontade.

Conclusão

Ferramentas como Grunt, Yeoman, Bower estão ai disponíveis e abertas para todos nós, basta sair da sua zona de conformo, perder o medo de sair do tradicional. Essas ferramentas só existem para melhorar e ajudar nosso trabalho, e se usadas de forma correta, você só irá evoluir, tanto em produção como em profissionalismo. Esperto ter ajudado um pouquinho com o Grunt nesse post. Divirtam-se!

Referências

→ Grunt - Getting Started
→ Meet Grunt: The Build Tool for JavaScript
→ Bocoup - Introducing Grunt

Player.IO - Um media player que roda no navegador, feito com Node.JS, Socket.IO e é controlado pelo seu smartphone

2013-03-15T00:00:00-07:00

Se você acompanha o mundo do desenvolvimento web , provavelmente já ouviu algo sobre o Node.JS e sua incrível capacidade de rodar aplicações altamente escaláveis escritas em JavaScript no servidor. Minha idéia inicial era criar um post onde abordaria como iniciar uma aplicação utilizando o Node.JS, porém quando comecei trabalhar com ele, vi que a coisa era tão bacana que acabei criando esse experimento: Um media player que roda no seu navegador, carrega arquivos de media locais utilizando a File Access API, e você pode controlar do seu smartphone trocando dados em tempo real graças ao Socket.IO.

Antes de continuar lendo o post, você pode conferir o experimento e entender melhor como o ele se comporta. É altamente recomendado utilizar o Google Chrome e arquivos nos formatos: m4a, mp3, mp4 ou webm. Vai lá e depois volte aqui, fico aguardando…

Node.JS

Talvez você já saiba o que é, mas vou repetir a explicação aqui para quem não conhece.

O Node.JS é um interpretador de JavaScript que utiliza a engine V8 do Google (a mesma do Chrome). Ele roda no servidor, mas não confunda ele com um Apache por exemplo, porque talvez ele seja mais que isso.

Definicão oficial:

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

→ Site oficial

Socket.IO

Nas especificações do HTML5 está a WebSocket API que possibilita trocar dados com um servidor e múltiplos clientes de forma assíncrona, ou seja, troca de dados em tempo real (exemplos de aplicações: chats, games), porém para essa API ainda é restrita pois nem todos os navegadores suportam WebSockets. Devido essa jovialidade do WebSocket, existem bibliotecas que fornecem a tecnologia de socket e conexão em tempo real no navegador, e uma das mais conhecidas é o Socket.IO, que inclui a biblioteca javascript no código do cliente, e roda no servidor com o node.js, dessa forma temos uma aplicação de tempo real cross-browser.

→ Site oficial

Player.IO

Eu acredito que o experimento, apesar de simples, tem como principal objetivo mostrar como é possível criar uma interação de usuário rica utilizando apenas HTML5 e o poder do JavaScript, e isso deixa claro que, cada vez mais, a Web é a plataforma.

A idéia é que o usuário carregue uma playlist de arquivos (áudio e vídeo) locais ou de um links diretos (ex: http://dominio.com/arquivo.mp4), após isso, abra uma página no smartphone que irá funcionar como um controle remoto. Para abrir a página o usuário tem como opção ler um QR Code ou abrir um link (que também pode ser aberto na mesma máquina). Essa página envia dados para o servidor que por sua vez se comunica com a página de origem no computador e assim é possível executar comandos remotamente, como: troca de arquivo, play/pause, aumentar e diminuir volume, entrar ou sair do modo tela cheia, etc.

A aplicação é multiusuário, isto é: várias pessoas podem usar o serviço simultaneamente (e o Node.JS suporta muitas conexões) e cada usuário pode enviar comandos de onde quer que esteja pois tudo é feito online.

Fases de Desenvolvimento

Antes de mostrar código, vou listar as fases mais importantes do desenvolvimento.

→ Utilizar a API File Acces para acessar arquivos locais.
→ Tratar tipos de arquivos suportados pelos navegadores.
→ Gerar Blob URL para cada arquivo local (e também tratar suporte dos navegadores)
→ Criar conexão com o Node.JS
→ Implementar conexão com o Socket.IO e gerar array de sockets
→ Servir páginas com o Node.JS utilizando o express
→ Criar layout para página requisitada pelo express utilizando Jade
→ Implementar evendos de servidor/cliente para troca de dados
→ Criar novo cliente para página de controle
→ Fazer tudo isso funcionar

Iniciando com o Node.JS e Socket.IO

Bom, já conversamos bastante, agora lets go to the code. Como o tópico principal do post é Node.JS e Socket.IO, não vou entrar em detalhes sobre a manipulação de arquivos utilizando a File Access API, gerar Blobs URLs e outras coisas que utilizei no experimento, o código está lá para quem quiser se divertir, aqui vou focar em como iniciar a aplicação com o Node.JS. Vamos lá…

O arquivo app.js é onde fica o código do servidor, que é interpretado pelo Node.JS. Nele definimos as dependências que iremos utilizar (ex: socket.io, express), configurações necessárias (como a engine de templates) e claro os eventos de servidor que serão disparados, com as operações que o Node.JS terá de fazer para a aplicação.

Criando conexão entre cliente e servidor com o Socket.IO

// File: app.js

// Criando socket que fica aguardando na porta 8080 por conexões
var io = require('socket.io').listen(8080);

// Declarando array para armazenar cada cliente
var sockets = {};

// Evento connection: quando uma nova conexão é estabeleciada
io.sockets.on('connection', function (socket) {
    // Aguarda o evento setId que será disparado pelo cliente
    socket.on('setId', function (id) {
    	// setId é responsável por gerar um identificador para cada conexão
        console.log("ID : " + id);
        // a nova conexão é armazenada no array sockets com o identificador
        sockets[id] = socket;
    });
});

// File: client.js

// Definindo id para a conexão
var id = randomId();

// Conectando ao socket utilizando host e porta definida em app.js
var socket = io.connect('http://localhost:8080');

// Emitindo evento para o servidor e passando o id como parâmetro
socket.emit('setId', id);

Bom, até agora o que aconteceu acima foi simples, criamos um socket no arquivo app.js que fica escutando conexões na porta 8080 (se você não definir uma porta pode ocorrer conflito). Declaramos um array onde cada nova conexão é armazenada, a partir do evento conection. No arquivo do cliente, é feita a conexão e emitido um evento chamado setId para o servidor, nesse evento do lado do servidor foi definida uma função anônima que recebe como parâmetro um id que serve para identificar cada conexão.

No arquivo index.html

<!-- Arquivo para conexão com o socket.io (ele é gerado automáticamente) -->
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<!-- Script do Cliente -->
<script src="client.js"></script>

Agora precisamos rodar a aplicação e testar. Você deve ter instalado o Node.JS junto do npm (gerenciador de pacotes do node). Como fazer isso é simples, e existem vários tutoriais por ai. Com o node e o npm instalados, iremos instalar as dependências:

Antes, precisamos criar o arquivo package.json responsável por gerenciar as dependências do projeto, e conter suas informações.

// File: package.json

{
  "name": "Player.IO",
  "version": "0.1.0",
  "description": "A real-time media player...",
  "repository": "https://github.com/vagnervjs/player.io.git",
  "dependencies": {
    "express": "3.x",
    "socket.io": "0.9.x", 
    "jade" : "0.28.x"
  },
  "author": "Vagner Santana"
}

Instalando as dependências:

// acessando pasta do projeto
cd player.io 
// utilize sudo Mac ou Linux
sudo npm install

Não é nescessário passar o nome do pacote que deseja instalar para o comando npm install, pois estamos utilizando o arquivo package.json.

Com as dependências instaladas, vamos rodar o arquivo app.js:

node app.js

Se tudo ocorreu bem, ao abrir o arquivo index.html no navegador um novo socket foi criado. Lembrando que a função randomId foi criada por mim, se estiver realizando este teste você pode atribuir à varíavel id uma string qualquer. No console do Node.JS a saída deve conter uma linha com: ID: <id que foi passado>.

Servindo páginas com Express

O Express é um framework minimalista e flexível de desenvolvimento web para o Node.JS que possui vários métodos HTTP tornando possível servir páginas a partir de requisições de usuários, tudo isso com um ótimo desempenho.

→ Site oficial

Iremos utilizar ele para servir a página de controle. Veja:

// File app.js

// solicitando dependência do express
var express = require("express");

// criando uma aplicação express
var app = express();

// definindo engine para as views
app.set('view engine', 'jade');

// ao receber uma requisição com o valor /mb/:id
// onde :id é uma string 
// chama uma função callback
app.get('/mb/:id', function (req, res) {
    // armazenando valor do parâmetro id
    var id = req.params.id;
    // imprimindo
    console.log("ID Mb: " + id);
    // chama uma a view (arquivo jade), passando algumas variáveis (id e title)
    res.render('mobile.jade', {id:id, title:'Player.IO | Control'});
});

// a aplicação express fica escutando na porta 8000
app.listen(8000);

Certo, neste ponto nossa aplicação já abre um socket para cada conexão, e agora acabamos de criar um servidor HTTP com o express que fica aguardando requisições na porta 8000. Lembre-se que iniciamos o socket.io e também definimos uma porta para ele, portanto a porta do express deve ser diferente da porta definida para o socket.io (no nosso caso utilizamos as portas 8000 e 8080).

Com a aplicação express criada e escutando na porta 8000, ao fazermos uma requisição do tipo localhost:8000/mb/novoId123 o express irá chamar uma função callback, que recebe os parâmetros req e res, respectivamente: request e response. O req é um objeto que contém informações sobre a requisição HTTP, já o res é o objeto responsável por enviar uma resposta HTTP, como renderizar uma página por exemplo.
Nesse callback armazenamos o valor do parâmetro id que foi passado na requisição, para isso utilizamos o método param do objeto req. É obrigatório o uso de : antes do nome do parâmetro esperado, se o paramêtro for opcional deve ser utilzado o símbolo de interrogação após o nome, ex: :id?. Com o id armazenado, a próxima operação (além de imprimir o valor de id) é chamado o método render() do objeto response. Ele é responsável por renderizar uma view utilizando a engine de templates definida acima em aap.set('view engine', 'jade'). Esse método aceita três parâmetros: o primeiro e obrigatório é o nome da view a ser renderizada, os outros dois são: opções para serem utilizadas na view, e uma função callback. Nesse caso não fiz callback.

Pronto, para o express é isso. O método get() fica encarregado de verificar qual chamada está sendo feita, e executar seu respectivo callback. Não podemos esquecer de chamar o método listen para o express funcionar, ele aceita um parâmero único que é a porta. O método listen é idêntico ao http.Server#listen(). do node.

Agora é só executar a aplicação novamente e testar.

Enviando dados do controle para o player

Agora que servimos a página (que veio da requisição /mb/id), é ela que irá enviar os comandos para o player, portanto precisamos emitir eventos para o socket.io, esses valores defini como: ação e valor para a ação (caso houver). Por exemplo: para trocar de arquivo a página de controle precisa enviar para o servidor a ação que dei nome de “change”, e o valor que é o id do arquivo escolhido. Além desses dois valores, preciso também devolver aquele id que foi passado como opção para a view, lembram ? Esse id serve para identificar para qual socket devo enviar os comandos, do contrário, minha unica opção seria enviar os dados por bradcast, o que bloquearia a idéia da aplicação ser multiusuário. Quer ver parte do código ? Lá vai

// File: mobile.jade

// Volume Up
$('#vol_up').on("tap", function() {
    $.get('/player/#{id}/volup', function() {});
});

O código acima é simples: quando houver um toque no botão de aumentar o volume (#vol_up) é chamado o método get do jQuery que faz uma requisição para localhost:8000/player/idQualquer/volup. Ou seja, uma requisição para o express. Não é preciso definir locaholst:8000 no código pois estamos trabalhando com caminho relativo, portanto ele irá utilizar o mesmo domínio e porta da página.

Mas, espera ai, onde foi definido esse caminho /player/ ? Você pode ver logo a seguir:

// File: app.js

app.get('/player/:id/:action/:val?', function (req, res) {
    var id = req.params.id;
    var action = req.params.action;
    var val = req.params.val;
    sockets[id].emit('play', {action:action, val:val});
    res.send('ok');
});

O que está acontecendo ali você já viu anteriormente, o express espera por uma requisição com o valor “player”, dois parâmetros obrigatórios (id e action) e um opcional (val). Ali pegamos os valores, e emitimos o o evento play para um único socket,. Um único socket pois a variável sckets é um array, e seus índices são os ids de cada conexão, por isso devolvemos o id como um parâmetro da requisição /player/. Emitimos junto do evento, os dados (action e val) e seus respectivos valores.

Agora, é só ir la no cliente (o player), e tratar esse evento play certo?

// File: client.js

// selecionando a tag <video> do arquivo index.html
var media = document.getElementById("player");

socket.on('play', function (data) {
	if (data.action == 'volup'){
        media.volume += 0.1;
    }
}

No lado do cliente, com o evento on() do socket, recebemos o evento emitido pelo servidor, e chamamos uma função callback. Essa função recebe como parâmetro os dados que também foram passados pelo servidor. Assim, é só tratar os dados. Foi o que fiz para verificar qual ação foi enviada, no if comparo se o valor do dado action é igual ‘volup’, se for, aumento o volume do arquivo (utilizando a Web Audio API). Isso vale para todos os outros comandos.

Pedras no caminho

Durante o desenvolvimento desse experimento fui descobrindo algumas coisas que talvez nunca iria descobrir se não fosse programando.

→ A FullScreen API não aceita que seja disparado o evento requestFullScreen() sem a interação do usuário, ou seja, só é possível via clique. Para resolver isso, ou tentar, fiz um full screen manual, alterando o tamanho do player para o tamanho da janela.
→ O Chrome e o Firefox são os únicos navegadores que suportão reproduzir blobs urls. Os outros navegadores, mesmo tendo suporte para blobs urls, não conseguem reproduzir um vídeo o música. Foi ai que resolvi adicionar o campo para adicionar uma media por URL, dessa forma consigo reproduzir o arquivo.
→ Para manter o Node.JS rodando no meu servidor (em http://vagnersantana.com/player.io), estou utilizando o forever. Para instalar é só mandar o comando npm install forever e para executá-lo: forever start app.js. Assim o socket.io e o express ficaram escutando constantemente nas portas 8080 e 8000. Para visualizar quais arquivos o forever está executando use o comando forever list.

Conclusão

Tem muito mais código na aplicação toda, o post já está gigantesco, mas espero ter explicado todo o conceito de utilizar o Node.JS e o Socket.IO.

Apesar de ser um experimento simples, foi extremamente empolgante ter desenvolvido, pois só assim é possível aprender de verdade. Espero que este post ajude você de alguma forma, seja com node.js, socket.io ou express, ou seja para incentivar a desenvolver experimentos, brincar mais, fazer qualquer tipo de coisa que te faça adquirir mais conhecimento sempre, buscar mais informações, e depois, contribuir ensinando.

O código está disponível no Github, espero que você vá até lá, de um fork, envie pull requests, reportem bugs e tudo mais que tiver direito.

Referências

Web Messaging API

2013-02-25T00:00:00-08:00

Provavelmente em algum projeto você já foi obrigado a utilizar um iframe para carregar conteúdo de uma página externa, e desde então só era possível visualizar o conteúdo do mesmo, e ele funciona como uma sandbox onde não existe comunicação com sua aplicação. Nas especificações do W3C o HTML5 possui algumas APIs para comunicação. Este post trata especificamente uma delas: a HTML5 Web Messaging API que resolve o problema descrito.

API

Essa é uma API simples, que resolve o problema de comunicação entre aplicações hospedadas em diferentes origens. Antes da existência dessa API, não era possível essa comunicação devido a “política da mesma origem”, onde não é possivel uma programação client-side de uma origem acesse ou interfira em um documento de outra origem. Resumindo: um script hopedado em um lugar não consegue acessar o DOM de um documento de outra origem. A origem pode ser 3 tipos: protocolo, host e porta.

Exemplo: digamos que a origem de minha aplicação seja o URL: http://openblog.com.br/mensagem.php

URL	Mesma origem?	Razão
http://openblog.com.br/recebe.php	Sim	-
http://openblog.com.br	Sim	-
https://openblog.com.br/auth.php	Não	Protocolo diferente
http://openblog.com.br:9000/recebe.php	Não	Porta Diferente
http://blog.openblog.com.br/recebe.php	Não	Host Diferente

Método window.postMessage()

Este método é o responsável por criar uma mensagem a ser enviada para um objeto window em uma origem diferente. O padrão do tipo da mensagem é uma string. O método recebe três parâmetros: dois obrigatórios e um opcional.

  window.postMessage(mensagem, destino, [portas])  
  //mensagem: string a ser enviada
  //destino: endereço a ser enviado
  //portas: array de portas válidas para o destino

O destino pode ser um URL absoluto, um caractere curinga * que servirá para qualquer destino ou um caractere barra / que adota a política da mesma origem (ou seja, apenas o mesmo host da página).

Evento message

A API prevê o evento message que é disparado no documento destino da mensagem. Quando disparado ele chama a seguinte função callback:

  if (window.addEventListener) {
      window.addEventListener('message', receberMsg, false);
  } else {
      window.attachEvent("onmessage", receberMsg);
  };

  function receberMsg(e){
      //faça algo com a mensagem
  }

A função receberMsg como o nome já diz, recebe um parâmetro que retorna um objeto-evento com as propriedades:

  e.data //text da mensagem
  e.origin //origem da mensagem
  e.lastEventId //string identificadora do último evento
  e.source //retorna WindowProxy do destino
  e.ports //array das portas enviadas

Mãos na massa

Vamos criar a situação mencionada no início do post, onde um documento de origem A tenta se comunicar com um documento de origem B. A idéia é postar uma mensagem e ela aparecer no iframe. Vamos lá…

Documento A (http://openblog.github.com/demos/html5_msg_origin)

  //Javascript
  window.onload = function(){
    var objIframe = document.getElementsByTagName('iframe')[0];
    var btnEnviar =  document.getElementsByTagName('button')[0];

    btnEnviar.onclick = function(){
      var textoMsg = document.getElementsByTagName('input')[0].value;

      if(textoMsg == ''){
        alert('Digite uma mensagem!');
      } else{
        objIframe.contentWindow.postMessage(textoMsg, 'http://labs.vagnersantana.com');
      }
    }
  }

  <!-- HTML -->
  <section>
    <p>
      <label>Mensagem: <input type="text"></label>
      <button type="button">Enviar mensagem</button>
    </p>
    <iframe src="http://labs.vagnersantana.com/html5_msg_iframe.html"></iframe>
  </section>

Documento B (http://labs.vagnersantana.com/html5_msg_iframe.html)

  //Javascript 
  if(window.addEventListener){
    window.addEventListener('message', receberMsg, false);
  } else{
    window.attachEvent("onmessage", receberMsg);
  };

  function receberMsg(e){
    var msg;
    var containerMsg = document.getElementById('recebe-msg');

    if(e.origin == 'http://openblog.github.com'){
      msg = 'Mensagem recebida: <br>';
      msg += 'Msg: ' + e.data + '<br>';
      msg += 'Origem: ' + e.origin;

      containerMsg.innerHTML = msg;
    } else{
      containerMsg.innerHTML = 'Origem não autorizada!';
    }
  }

  //HTML
  <p id="recebe-msg"></p>

O Web Messaging envia uma string, porém não precisa se desesperar e pensar em ir separando os dados por | ou ; pois felizmente existe o maravilhoso JSON que oferece a funcionalidade de se transformar em string com o método JSON.stringify e recuperá-lo usando o JSON.parse(), desta forma podemos trocar e manipular dados de maneira fácil somando o Web Messaging com JSON.

Can i use ?

Para ver a API em ação é só clicar no demo abaixo, sinta-se à vontade em inspecionar o código e também fazer um fork no github. Divirta-se.

Referências

Hello World

2013-02-24T00:00:00-08:00

Somos alguns caras da computação, queremos bater papo, ajudar, receber ajuda, comparitlhar, criar, brincar. Afinal de contas, vocês estudam, trabalham, mas já pararam pra pensar que o que vale mesmo, é contribuir de alguma forma com o mundo? Não, não é saciar a fome na África, ou o analfabetismo no Brasil, é o seu mundo de que estou falando, é o que está próximo de ti, vamos lá, pense… é isso que queremos fazer aqui, contribuir com o nosso mundo, de forma que todos podemos crescer. Abra sua mente, bora?