运用Nginx的NHPM模块和jQuery进行的Comet测试 _Web前端

使用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

引用

#user nobody;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid        logs/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type application/octet-stream;

    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log logs/access.log main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout 0;
    keepalive_timeout 65;

    #gzip on;
    server {
    listen 81;
    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就会接收到信息