使用Nginx的NHPM模块和jQuery进行的Comet测试
原文在这里:http://blog.jamieisaacs.com/2010/08/27/comet-with-nginx-and-jquery/一直很想了解Comet的实现,正好看见了上面的这个文章,就装了个CentOS做了一下实验,过程如下:
1、下载软件和安装
引用
wget http://pushmodule.slact.net/downloads/nginx_http_push_module-0.692.tar.gz
tar -xvzf nginx_http_push_module-0.692.tar.gz
wget http://nginx.org/download/nginx-0.8.52.tar.gz
tar -xvzf nginx-0.8.52.tar.gz
./configure --prefix=/usr/local/nginx --add-module=/root/nginx_http_push_module-0.692
make
sudo make install
configure过程中会提示哪些包没有,我的就是pcre-devel包没有,直接使用光盘rpm 安装上就可以了
2、配置文件,修改nginx的配置文件nginx.conf,并启动nginx
引用
#usernobody;
worker_processes1;
#error_loglogs/error.log;
#error_loglogs/error.lognotice;
#error_loglogs/error.loginfo;
#pid logs/nginx.pid;
events {
worker_connections1024;
}
http {
include mime.types;
default_typeapplication/octet-stream;
#log_formatmain'$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_loglogs/access.logmain;
sendfile on;
#tcp_nopush on;
#keepalive_timeout0;
keepalive_timeout65;
#gzipon;
server {
listen81;
server_name localhost;
root /var/www/localhost;
location /cheetah {
push_channel_group pushmodule_cheetah;
location /cheetah/pub {
set $push_channel_id cheetah;
push_publisher;
push_message_timeout 5s; # Give the clients time
push_message_buffer_length 10;# to catch up
}
location /cheetah/sub {
set $push_channel_id cheetah;
push_subscriber;
send_timeout 3600;
}
}
}
}
启动nginx
引用
/usr/local/nginx/sbin/nginx
3、编辑html测试文件,send.html用来发送信息,listen.html则是接受信息,当然保证jquery在相应的目录中。
send.html
<!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="javascript/jquery-1.4.2.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
alert('aa');
function showResult(status, response) {
$('#result').html('<strong>status:</strong> ' + status +
'<br /><strong>response:</strong><br />' + response);
};
$(document).ready(function() {
$('#pub').submit(function() {
message = $('#message').val();
/* Do not send empty message */
if (message == '') {
return false;
}
$.ajax({
url: '/cheetah/pub',
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="/cheetah/pub">
<input type="text" class="message" name="message" id="message" />
<input class="submit" type="submit" value="send" />
</form>
<div id="result"></div></div>
</body>
</html>
listen.html
<!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="javascript/jquery-1.4.2.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
function listen(last_modified, etag) {
$.ajax({
'beforeSend': function(xhr) {
xhr.setRequestHeader("If-None-Match", etag);
xhr.setRequestHeader("If-Modified-Since", last_modified);
},
url: '/cheetah/sub',
dataType: 'text',
type: 'get',
cache: 'false',
success: function(data, textStatus, xhr) {
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);
$('#data').prepend(div);
$('#data').prepend(info);
/* Start the next long poll. */
listen(last_modified, etag);
},
error: function(xhr, textStatus, errorThrown) {
$('#data').prepend(textStatus + ' | ' + errorThrown);
}
});
};
$(document).ready(function() {
/* Start the first long poll. */
/* setTimeout is required to let the browser know
the page is finished loading. */
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>
大功告成,只要在send.html里面输入内容并发送,listen.html就会接收到信息
页:
[1]