Arquivo da tag: Nginx

Como trabalhar com Comet Server usando Nginx e JQuery

Blog, , ,

Fonte: Rafael Cirolini/NeardHead

Pesquisei bastante por exemplos de jquery funcionando fazendo requisições de long polling, e finalmente encontrei um bom exemplo em Jamieisaacs Blog que demostra muito bem esta tecnica.

Basta criar o arquivo listem.html na pasta html dentro do seu nginx, ou na pasta root do site.

Como de costume, vou colocar o codigo e ir comentando.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Listen</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
        /* <![CDATA[ */
   google.load("jquery", "1.4.2"); /*carrega o jquery atraves da api js do google */
 
   function listen(last_modified, etag) {
       $.ajax({
       /* antes de enviar seta os cabeçalhos */
           'beforeSend': function(xhr) {
               xhr.setRequestHeader("If-None-Match", etag);
               xhr.setRequestHeader("If-Modified-Since", last_modified);
           },
           url: '/activity/?id=teste', /* url de push configurado no nginx */
           dataType: 'text',
           type: 'get',
           cache: 'false',
           success: function(data, textStatus, xhr) {
               /* pega os cabeçalhos recebidos pela conexão para utilizar na proxima requisição */
               etag = xhr.getResponseHeader('Etag');
               last_modified = xhr.getResponseHeader('Last-Modified');
 
               div = $('<div class="msg">').text(data);
               info = $('<div class="info">').text('Last-Modified: ' + last_modified + ' | Etag: ' + etag);
 
        /* escreve na div data as informações de retorno */
               $('#data').prepend(div);
               $('#data').prepend(info);
 
               /* faz uma nova requisição */
               listen(last_modified, etag);
           },
           error: function(xhr, textStatus, errorThrown) {
               $('#data').prepend(textStatus + ' | ' + errorThrown);
           }
       });
   };
 
   google.setOnLoadCallback(function() {
       /* Inicia o primeiro long poll. */
       /* O timeout é necessario para o navegador saber que a pagina terminou de carregar */
       setTimeout(function() {
           listen('', '');
       }, 500);
   });
        /* ]]> */
        </script>
        <style type="text/css">
            #data {
                margin: .5em;
            }
 
            #data .info {
                font-weight: bold;
                font-size: 14px;
            }
 
            #data .msg {
                white-space: pre;
                font-family: courier;
                font-size: 14px;
                margin-bottom: .5em;
                margin-left: .5em;
            }
        </style>
    </head>
    <body>
        <div id="data"></div>
    </body>
</html>

Agora segue o arquivo que faz o envio das msg no canal. O funcionamento é simples, quando clica no botão ele pega o valor do input e faz um POST na url de publicação e exibe o resultado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Send</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
        /* <![CDATA[ */
    google.load("jquery", "1.4.2");
 
    function showResult(status, response) {
        $('#result').html('<strong>status:</strong> ' + status +
        '<br /><strong>response:</strong><br />' + response);
    };
 
    google.setOnLoadCallback(function() {
        $('#pub').submit(function() {
            message = $('#message').val();
 
            /* Do not send empty message */
            if (message == '') {
                return false;
            }
 
            $.ajax({
                url: '/publish/?id=teste',
                data: message,
                dataType: 'text',
                type: 'post',
                success: function(responseText, textStatus, xhr) {
                    showResult(textStatus, responseText);
                },
                error: function(xhr, textStatus, errorThrown) {
                    showResult(textStatus, errorThrown);
                }
            });
            return false;
        });
    });
        /* ]]> */
        </script>
 
    </head>
    <body>
        <form id="pub" method="post" action="/publish/?id=teste"><input type="hidden" name="phpMyAdmin" value="8C%2CP2bFpgP9WryjAxnBRYbq8ub5" />
            <input type="text" class="message" name="message" id="message" />
            <input class="submit" type="submit" value="send" />
        </form>
        <div id="result"></div></div>
    </body>
</html>