摘要：眾所周知，HTTP協(xié)議是無(wú)狀態(tài)的，所以一次的請(qǐng)求都是一個(gè)單獨(dú)的事件，和前后都沒(méi)有聯(lián)系。所以我們?cè)诮鉀Q網(wǎng)頁(yè)實(shí)時(shí)聊天時(shí)就遇到一個(gè)問(wèn)題，如何保證與服務(wù)器的長(zhǎng)時(shí)間聯(lián)系，從而源源不段地獲取信息。一直以來(lái)的方式無(wú)非有這么幾種：1、長(zhǎng)連接，即服務(wù)器端不斷開聯(lián)系，PHP服務(wù)器端用ob系列函數(shù)來(lái)不停的讀取輸出，但是相當(dāng)耗費(fèi)服務(wù)器資源。2、Flash socket，flash的as3語(yǔ)言，創(chuàng)建一個(gè)socke
眾所周知，HTTP協(xié)議是無(wú)狀態(tài)的，所以一次的請(qǐng)求都是一個(gè)單獨(dú)的事件，和前后都沒(méi)有聯(lián)系。所以我們?cè)诮鉀Q網(wǎng)頁(yè)實(shí)時(shí)聊天時(shí)就遇到一個(gè)問(wèn)題，如何保證與服務(wù)器的長(zhǎng)時(shí)間聯(lián)系，從而源源不段地獲取信息。
一直以來(lái)的方式無(wú)非有這么幾種：
1、長(zhǎng)連接，即服務(wù)器端不斷開聯(lián)系，PHP服務(wù)器端用ob系列函數(shù)來(lái)不停的讀取輸出，但是相當(dāng)耗費(fèi)服務(wù)器資源。
2、Flash socket，flash的as3語(yǔ)言，創(chuàng)建一個(gè)socket服務(wù)器用來(lái)處理信息。
3、輪詢，顧名思義就是不停地發(fā)送查詢消息，一有新消息立刻更新，但是會(huì)有多次無(wú)用請(qǐng)求。
4、長(zhǎng)輪詢，是輪詢的升級(jí)版，需要服務(wù)器端的配合。
5、websocket，HTML5的通信功能，建立一個(gè)與服務(wù)器端的專用接口ws協(xié)議來(lái)進(jìn)行通訊，兼容可能成為問(wèn)題，改天研究一下這個(gè)。
這篇手記總結(jié)一下用JS和JQ兩種方式（其實(shí)不同就是js和jq的實(shí)現(xiàn)），實(shí)現(xiàn)AJAX長(zhǎng)輪詢。
長(zhǎng)輪詢的思想：
如圖：用AJAX發(fā)送詢問(wèn)信息，服務(wù)器在沒(méi)有信息要返回的時(shí)候進(jìn)入無(wú)限等待。由于AJAX異步的特性，PHP在服務(wù)器端執(zhí)行等待不會(huì)影響到頁(yè)面的正常處理。一旦服務(wù)器查詢到返回信息，服務(wù)器返回信息，AJAX用回調(diào)函數(shù)處理這條信息，同時(shí)迅速再次發(fā)送一個(gè)請(qǐng)求等待服務(wù)器處理。
與傳統(tǒng)輪詢相比，長(zhǎng)輪詢?cè)诜?wù)器沒(méi)的返回信息的時(shí)候進(jìn)入等待，減少了普通輪詢服務(wù)器無(wú)數(shù)次的空回復(fù)。可以這樣認(rèn)為，長(zhǎng)輪詢使服務(wù)器每次的返回更有目的性，而不是盲目返回。
長(zhǎng)輪詢的服務(wù)器端實(shí)現(xiàn)：
聊天信息存儲(chǔ)：
數(shù)據(jù)庫(kù)設(shè)計(jì)為信息ID(msgid)，發(fā)送人(sender)，接收人(receiver)，信息內(nèi)容(content)，設(shè)置senderRead和receiverRead的目的是標(biāo)記信息是否已被讀取，讀取后改變標(biāo)記，以區(qū)別信息是否已經(jīng)被讀取。
create table msg{
msgid int not null primary key auto_increment,
sender char(16) not null,
receiver char(16) not null,
content text, //信息內(nèi)容用text類型，存儲(chǔ)量可達(dá)到65535字符
senderRead tinyint enum(0,1) default 0,
receiverRead tinyint enum(0,1) default 0 //設(shè)置一個(gè)是否已讀的flag標(biāo)記
}PHP腳本：
腳本的主要目的是處理來(lái)自ajax的每次詢問(wèn)，ajax每次詢問(wèn)就查詢一下數(shù)據(jù)庫(kù)，看有沒(méi)有新的信息，如果沒(méi)有，剛用usleep()函數(shù)等待一秒后再次查詢，直到有新信息插入數(shù)據(jù)庫(kù)并被查到，腳本返回查詢到的數(shù)據(jù)，并退出無(wú)限循環(huán)，結(jié)束腳本。
set_time_limit(0);//設(shè)置腳本超時(shí)時(shí)間為無(wú)限，不然在過(guò)了超時(shí)時(shí)間后腳本會(huì)自動(dòng)關(guān)閉，輪詢失敗。
$link=new mysqli("host","user","password","database"); $search="select sender,receiver,content from msg where receiverRead=0 limit 1";//限制每次讀出一條數(shù)據(jù)，便于修改其已讀flag
$change="update chat set receiverRead=1 where receiverRead=0 limit 1"; while (true) { //進(jìn)入無(wú)限循環(huán)
$res=$link->query($sql); //查詢結(jié)果
if($res->num_rows!=0){ //當(dāng)有未讀信息時(shí)讀取信息
$link->query($change);//將信息的已讀flag設(shè)為1
$msg=$res->fetch_assoc();
$jsonstr=json_encode($msg);//取到信息，將信息用轉(zhuǎn)碼為json格式，返回給JS
echo $jsonstr;
break;//輸出信息后退出while循環(huán)，結(jié)束當(dāng)前腳本
}
usleep(1000);//如果沒(méi)有信息不會(huì)進(jìn)入if塊，但會(huì)執(zhí)行一下等待1秒，防止PHP因循環(huán)假死。
}客戶端實(shí)現(xiàn)：
客戶端的主要任務(wù)是設(shè)置一個(gè)ajax請(qǐng)求函數(shù)，每次查詢時(shí)被調(diào)用，當(dāng)沒(méi)有信息返回時(shí)，服務(wù)器端被擱置，當(dāng)前頁(yè)面正常執(zhí)行；當(dāng)有信息返回時(shí)，函數(shù)處理返回的數(shù)據(jù)，并迅速再次調(diào)用此函數(shù)發(fā)送一次請(qǐng)求。
用原生JS：
function link(){
var xhr=null;//先設(shè)置xhr為空，為了輪詢時(shí)再次調(diào)用函數(shù)對(duì)xhr重用，引發(fā)錯(cuò)誤
xhr=new XMLHttpRequest();
xhr.open('GET','serviceback.php',true);//第三個(gè)參數(shù)一定要設(shè)置為true，異步不阻塞，不會(huì)影響到后面JS的執(zhí)行。
xhr.send();
xhr.onreadystatechange=function(){
if (xhr.readyState==4) { 嚴(yán)密也可加使用（xhr.readyState==4 && xhr.status ==200）限定服務(wù)器響應(yīng)碼為200時(shí)才進(jìn)行處理。
if(xhr.responseText!=''){
process... //服務(wù)器端返回信息，且返回信息不為空，則開始處理返回信息。
}
setTimeout("link()",300);
//遞歸再次調(diào)用link()函數(shù)，用setTimeOut()設(shè)置延時(shí)是因?yàn)榉?wù)器端進(jìn)行sql操作時(shí)會(huì)耗時(shí)，當(dāng)有新信息時(shí)，在服務(wù)器將要置已讀flag為1還未成功時(shí)，AJAX可能已經(jīng)又發(fā)出多條查詢信息了，會(huì)導(dǎo)致一條信息多次返回。
}
};
}用jQuery插件實(shí)現(xiàn)：
var link={ //jQuery的AJAX執(zhí)行的配置對(duì)象
type:"GET", //設(shè)置請(qǐng)求方式，默認(rèn)為GET，
async:true, //設(shè)置是否異步，默認(rèn)為異步
url:"customback.php",
dataType:"json", //設(shè)置期望的返回格式，因服務(wù)器返回json格式，這里將數(shù)據(jù)作為json格式對(duì)待
success:function (msg){
process...
setTimeout("link()",300);
} //成功時(shí)的回調(diào)函數(shù)，處理返回?cái)?shù)據(jù)，并且延時(shí)建立新的請(qǐng)求連接
}
$.ajax(link); //執(zhí)行ajax請(qǐng)求。程序擴(kuò)充：
添加發(fā)送聊天窗口：
新建一個(gè)函數(shù)用來(lái)處理ajax的POST請(qǐng)求，用ajax將發(fā)信人，每次發(fā)送的信息，收信人發(fā)送到服務(wù)器端，并設(shè)置一個(gè)單獨(dú)的PHP腳本處理信息，將信息插入數(shù)據(jù)庫(kù)。
需要注意的是，用JS原生實(shí)現(xiàn)POST請(qǐng)求發(fā)送信息時(shí)，要設(shè)置ajax對(duì)象的HTTP頭，模擬表單提交的操作：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
聊天室消息處理：
為了防止每次都查詢到全部信息，我們對(duì)數(shù)據(jù)庫(kù)的查詢操作更改一下，設(shè)置idflag=0,每次查詢后，設(shè)置idflag為查詢到的數(shù)據(jù)的id，查詢時(shí)我們查詢比idflag大的ID，即，新添加進(jìn)去的信息。
這樣，一個(gè)簡(jiǎn)單的聊天室程序就做好了。