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>