与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>