php使用COMET实现服务器向浏览器推送数据

Comet技术可以让后台服务器在浏览器没有发起请求的情况下,向用户浏览器推送数据。这种技术比传统的ajax技术更具有时效性。传统的ajax中,服务器在数据发生变动时不能即时通知浏览器。用户的浏览器必须向后台发出请求(如点击一个链接或者使用持久的ajax),才能获得最新的数据。英文地址:http://www.zeitoun.net/articles/comet_and_php/start

下面解释使用php实现comet技术。下面是两种不同的方式实现comet:第一种基于hidden<iframe>,另一种基于传统的ajax non-returning请求。第一个例子简单地实现了在浏览器上不断地输出时间戳,第二个例子简单实现了在线聊天功能。

iframe技术实现comet:时间戳demo

我们需要:

  • 一个php脚本来处理持久化的http请求(backend.php)
  • 一个html文件来加载相关的javascript代码,来展示服务器返回的数据(index.html)
  • prototype这个库文件可以帮助我们写一些简单的js代码

下面是这个demo的流程:

后台的php脚本

这个脚本会进入一个死循环,在客户端连接时,不断向客户端输出时间戳信息。下面是backend.php的代码:

<?php

    header("Cache-Control: no-cache, must-revalidate");
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    flush();

?>
<!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">
<head>

        <title>Comet php backend</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<script type="text/javascript">
        // KHTML browser don't share javascripts between iframes
        var is_khtml = navigator.appName.match("Konqueror") || navigator.appVersion.match("KHTML");
        if (is_khtml)
        {
            var prototypejs = document.createElement('script');
            prototypejs.setAttribute('type','text/javascript');
            prototypejs.setAttribute('src','prototype.js');
            var head = document.getElementsByTagName('head');
            head[0].appendChild(prototypejs);
        }
        // load the comet object
        var comet = window.parent.comet;

</script>

<?php

    while(1) 
    {
            echo '<script type="text/javascript">';
            echo 'comet.printServerTime('.time().');';
            echo '</script>';
            ob_flush();//原文代码没有这一行
            flush(); // used to send the echoed data to the client
            sleep(1); // a little break to unload the server CPU
    }

?>

客户端html脚本

客户端的html文件中,首先会在<head>标签中加载prototype库文件,接着创建用来展示时间戳信息的div标签<div id="content"></div>,最后创建了一个comet对象,通过它连接到后台脚本。

comet对象会创建一些不可见的iframe标签,这些iframe是为了创建持续的连接到后台脚本的http连接。Notice:这个脚本不会处理client瑜server之间的连接问题。

    <!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">
        <head>
            <title>Comet demo</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type="text/javascript" src="prototype.js"></script>

        </head>
        <body>
        <div id="content">The server time will be shown here</div>

        <script type="text/javascript">
            var comet = {
            connection   : false,
            iframediv    : false,

            initialize: function() {
                if (navigator.appVersion.indexOf("MSIE") != -1) {

                    // For IE browsers
                    comet.connection = new ActiveXObject("htmlfile");
                    comet.connection.open();
                    comet.connection.write("<html>");
                    comet.connection.write("<script>document.domain = '"+document.domain+"'");
                    comet.connection.write("</html>");
                    comet.connection.close();
                    comet.iframediv = comet.connection.createElement("div");
                    comet.connection.appendChild(comet.iframediv);
                    comet.connection.parentWindow.comet = comet;
                    comet.iframediv.innerHTML = "<iframe id='comet_iframe' src='./backend.php'></iframe>";

                } else if (navigator.appVersion.indexOf("KHTML") != -1) {

                    // for KHTML browsers
                    comet.connection = document.createElement('iframe');
                    comet.connection.setAttribute('id',     'comet_iframe');
                    comet.connection.setAttribute('src',    './backend.php');
                    with (comet.connection.style) {
                        position   = "absolute";
                        left       = top   = "-100px";
                        height     = width = "1px";
                        visibility = "hidden";
                    }
                    document.body.appendChild(comet.connection);

                    } else {

                        // For other browser (Firefox...)
                        comet.connection = document.createElement('iframe');
                        comet.connection.setAttribute('id',     'comet_iframe');
                        with (comet.connection.style) {
                            left       = top   = "-100px";
                            height     = width = "1px";
                            visibility = "hidden";
                            display    = 'none';
                        }
                        comet.iframediv = document.createElement('iframe');
                        comet.iframediv.setAttribute('src', './backend.php');
                        comet.connection.appendChild(comet.iframediv);
                        document.body.appendChild(comet.connection);

                    }
                },

                // this function will be called from backend.php  
                printServerTime: function (time) {
                    $('content').innerHTML = time;
                },

                onUnload: function() {
                if (comet.connection) {
                    comet.connection = false; // release the iframe to prevent problems with IE when reloading the page
                }
            }
        }
        Event.observe(window, "load",   comet.initialize);
        Event.observe(window, "unload", comet.onUnload);

    </script>

</body>
</html>

下载源码

点击tar.gz下载此demo。

传统ajax实现comet:小型在线聊天demo

实现这个demo,我们需要:

  • 一个用来存储、交换数据的文件(data.txt)
  • 一个php脚本,用来处理持续化的http请求(backend.php)
  • 一个html文件,用来加载javascript代码,展示服务器发送过来的数据
  • prototype这个库文件可以帮助我们写一些简单的js代码

后台的php脚本

后台的脚本完成两个功能:

  • 接收用户的输入,将新消息保存到data.txt中
  • 执行死循环,监测data.txt是否发生变化

下面是代码:

<?php

    $filename  = dirname(__FILE__).'/data.txt';

    // 将新消息写入文件
    $msg = isset($_GET['msg']) ? $_GET['msg'] : '';
    if ($msg != '')
    {
        file_put_contents($filename,$msg);
        die();
    }

    // infinite loop until the data file is not modified
    $lastmodif    = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
    $currentmodif = filemtime($filename);
    while ($currentmodif <= $lastmodif) // check if the data file has been modified
    {
        usleep(10000); // sleep 10ms to unload the CPU
        clearstatcache();
        $currentmodif = filemtime($filename);
    }

    // return a json array
    $response = array();
    $response['msg']       = file_get_contents($filename);
    $response['timestamp'] = $currentmodif;
    echo json_encode($response);
    flush();

?>

客户端的html文件

客户端的html文件,首先在head标签中加载了protytype库文件,然后创建了`

,用来展示消息列表,最后创建了object对象,调用后台php脚本来监测新消息。

 

每接收一条新消息或者发送一条消息,comet对象都会发送一个ajax请求。这种持久的http请求仅用来检测新消息。url中携带的时间戳参数标明了最后一条消息,服务器之后返回该时间戳之后的消息(即新消息)。

<!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">
    <head>
        <title>Comet demo</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="prototype.js"></script>
    </head>
    <body>

        <div id="content">
        </div>

        <p>
            <form action="" method="get" onsubmit="comet.doRequest($('word').value);$('word').value='';return false;">
            <input type="text" name="word" id="word" value="" />
            <input type="submit" name="submit" value="Send" />
            </form>
        </p>

        <script type="text/javascript">
        var Comet = Class.create();
        Comet.prototype = {

                timestamp: 0,
                url: './backend.php',
                noerror: true,

                initialize: function() { },

                connect: function()
                {
                    this.ajax = new Ajax.Request(this.url, {
                        method: 'get',
                        parameters: { 'timestamp' : this.timestamp },
                        onSuccess: function(transport) {
                        // handle the server response
                        var response = transport.responseText.evalJSON();
                        this.comet.timestamp = response['timestamp'];
                        this.comet.handleResponse(response);
                        this.comet.noerror = true;
                        },
                    onComplete: function(transport) {
                    // send a new ajax request when this request is finished
                    if (!this.comet.noerror)
                    // if a connection problem occurs, try to reconnect each 5 seconds
                        setTimeout(function(){ comet.connect() }, 5000); 
                    else
                         this.comet.connect();
                    this.comet.noerror = false;
                }
            });
                this.ajax.comet = this;
            },

            disconnect: function()
            {
            },

            handleResponse: function(response)
            {
                $('content').innerHTML += '<div>' + response['msg'] + '</div>';
            },

            doRequest: function(request)
            {
                new Ajax.Request(this.url, {
                    method: 'get',
                    parameters: { 'msg' : request 
                });
                }
            }
            var comet = new Comet();
        comet.connect();
    </script>

    </body>
</html>

下载源码

点击tar.gz下载

个人理解

所谓的comet技术,本质上还是使用的浏览器轮询方法,和传统的轮询不同的是:comet发出一个ajax请求,如果后台没有需要推送的数据,那么服务器就会执行sleep,让浏览器等待,直到服务器产生了需要推送的数据或者执行超时(php默认应该是30秒超时),这时候浏览器发现连接非正常断开,ok,继续发起ajax请求,重复上面的过程。所以comet会在浏览器和后台服务器间一直维持着连接,所以服务器端的压力比较大,多少个用户就得占用多少个连接。

版权声明

本站文章、图片、视频等(除转载外),均采用知识共享署名 4.0 国际许可协议(CC BY-NC-SA 4.0),转载请注明出处、非商业性使用、并且以相同协议共享。

© 空空博客,本文链接:https://www.yeetrack.com/?p=872