与comet的一次亲密接触——基于ajax的http的长连接技术

今天研究试验了一下“服务器推”的comet技术。

 

之前上GOOGLE GMAIL时也很好奇它的那个即时聊天框，居然可以在WEB页面中做到类似于QQ的聊天框，很有意思。

最近才知道这个技术一直被WEB技术探讨，——WEB服务器如何向指定的客户端推送数据？

因为HTTP传输机制的限制，一次HTTP请求就完整的包括了TCP建立、TCP传输 和TCP关闭。我们在一个页面被访问完毕之后，这次连接

就完全释放。那么服务器就无法再与这个客户端通信了。

 

由于页面超时时间一般为30秒，服务器也无法抓住一次HTTP请求不放开，所以这个问题一直在WEB开发技术上作为一个热点问题存在

。

 

直到AJAX的出现，我们出现了以AJAX为基础的HTTP长连接技术：comet

 

今天我们就来体验一下它功能！

 

我们来实现一个简单的功能，服务器端向指定客户端推送网页。

客户端使用一个ID登录之后，服务器端可以向指定ID推送网页，客户端收到之后应该显示出来。

 

我先在网上找了一个著名的comet教程，comet-ajax的一个聊天室示例程序，在此基础上改。

 

看了一下它的基本思想是：

 

客户端上来就创建AJAX长连接，有人发言之后，服务器端修改一个txt文件，该文件修改导致启动 ajax回馈，json格式回写，客户端

AJAX得到数据，调用javascript脚本呈现。

 

我们需要改成：

客户端上来通过ID登录，启动AJAX长连接，服务器端选择ID，输入URL，点击推送后，修改该txt文件，包括指定用户ID和URL，启动

ajax回馈，客户端得到数据，判断是否推送给本机，若是，则调用javascript在iframe中呈现该页面。

噼里啪啦很简单的敲了几行代码，就修改成功了！

 

看看我们的成果

 

 

同时推到4个用户。

 

重要代码：

 

<?php
	require_once('connectdb.php');
	$id = $_GET['id'];
	$exec = "update user set online=1 where id like $id";
	mysql_query( $exec );
	echo "your id is [".$id."]<br>";
?>

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


<mce:script type="text/javascript" src="prototype.js" mce_src="prototype.js"></mce:script>
<mce: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)
  {
    var s = response['msg'];
    var id = s.substr(0, 1);
    var url = s.substr(1,s.length-1);
    
    var url = "http://"+url;
    if( id == <?php echo $id ?> )
    	$('content').innerHTML = '<iframe height="100%" width="100%" src="'+url+'" mce_src="'+url+'"/>';
  },

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