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
万分感谢分享！
反复拜读了，理清了很多。
过来踩踩。。。
果断MARK！！！！！
果断MARK！！！！！
很好，赞一个，加油！