JavaScript Beacons

JavaScript Beacons

mai 06

 

Também conhecidos como beacon de imagens, são uma forma simples, porém eficaz, de enviar dados para um script ao lado do servidor. Funciona de forma assíncrona, podendo realizar requisições cross-domain e serve como uma boa alternativa ao Ajax quando não se necessita de uma resposta do servidor. Segue abaixo o código básico de exemplo.

(new Image()).src = “log.php”;

Em somente uma linha é realizada uma chamada a um script no lado do servidor, e com essa linha, o mesmo pode criar um registro de log com o IP do usuário, hora de entrada, entre outras informações disponíveis nativamente no PHP.

Podem ser passadas também variáveis adicionais para o script PHP, por exemplo, um identificador único da página sendo visualizada. Esses podem ser transmitidos utilizando somente o método GET e, para isso, deve ser levado em consideração o limite de caracteres na URL do Internet Explorer que é de 2.048.

Para analisar a resposta do servidor pode ser verificada a característica da imagem recebida, por exemplo,  largura e altura.  Caso a solicitação tenha sido realizada com sucesso o servidor pode retornar uma imagem de 1×1 pixels enquanto uma requisição que tenha resultado em falha pode retornar uma imagem 2×1 pixels. O código com essa funcionalidade pode ficar assim no JavaScript.

var beacon, url = "log.php";
function enviaDados(){
	var params = [
		'page_id=2'
	];
	beacon = new Image();
	beacon.src = url+"?"+params.join('&');
	beacon.onload = function(){
		var l = this.width;
            	// Log gravado com sucesso
            	if(l == 1)
                	alert("Sucesso");
            	// Log não pode ser gravado
            	else if(l == 2)
                // Crie um novo beacon e tente novamente
	               	alert("Erro");
        }

       	beacon.onerror = function(){
		// Erro Espere um pouco, crie um novo beacon e tente novamente
       	}
}

No PHP o arquivo pode ser escrito seguindo o exemplo abaixo:

<?php
    function gravarLog(){
        // Lógica de gravação do log
        return true;
    }

    // Se o log for gravado com sucesso
    if(gravarLog())
        $arq = "sucesso.gif"; // 1x1 gif
    else
        $arq = "erro.gif"; // 2x1 gif

    header('Content-Type: image/gif');
    echo file_get_contents("img/".$arq);
?>

Nos casos que não é necessária uma resposta do servidor pode ser retornada por meio do script PHP o cabeçalho HTTP com o código “204 No Content”, isso evitará que o cliente fique esperando um retorno de dados que não existe e por não haver retorno de dados a comunicação ficará ainda mais veloz.

Fontes:
http://support.microsoft.com/kb/208427
Zakas, Nicholas C. JavaScript de alto desempenho. São Paulo: Novatec, Sebastopol: O’Reilly, 2010.