Nginx
Como trabalhar com Comet Server usando Nginx e JQuery
Em 23, jan 2012 | Sem Comentários | Em Blog | Por Allison
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>
