jlthlx 发表于 2016-12-28 06:34:37

使用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]
查看完整版本: 使用Nginx的NHPM模块和jQuery进行的Comet测试