眾所周知,HTTP協議是無狀態的,所以一次的請求都是一個單獨的事件,和前后都沒有聯系。所以我們在解決網頁實時聊天時就遇到一個問題,如何保證與服務器的長時間聯系,從而源源不段地獲取信息。
一直以來的方式無非有這么幾種:
1、長連接,即服務器端不斷開聯系,PHP服務器端用ob系列函數來不停的讀取輸出,但是相當耗費服務器資源。
2、Flash socket,flash的as3語言,創建一個socket服務器用來處理信息。
3、輪詢,顧名思義就是不停地發送查詢消息,一有新消息立刻更新,但是會有多次無用請求。
4、長輪詢,是輪詢的升級版,需要服務器端的配合。
5、websocket,HTML5的通信功能,建立一個與服務器端的專用接口ws協議來進行通訊,兼容可能成為問題,改天研究一下這個。
如圖:用AJAX發送詢問信息,服務器在沒有信息要返回的時候進入無限等待。由於AJAX異步的特性,PHP在服務器端執行等待不會影響到頁面的正常處理。一旦服務器查詢到返回信息,服務器返回信息,AJAX用回調函數處理這條信息,同時迅速再次發送一個請求等待服務器處理。
與傳統輪詢相比,長輪詢在服務器沒的返回信息的時候進入等待,減少了普通輪詢服務器無數次的空回復。可以這樣認為,長輪詢使服務器每次的返回更有目的性,而不是盲目返回。
長輪詢的服務器端實現:
聊天信息存儲:
數據庫設計為信息ID(msgid),發送人(sender),接收人(receiver),信息內容(content),設置senderRead和receiverRead的目的是標記信息是否已被讀取,讀取后改變標記,以區別信息是否已經被讀取。
CREATE TABLE `msg` ( `msgid` int(11) unsigned NOT NULL AUTO_INCREMENT, `sender` char(16) NOT NULL, `receiver` char(16) NOT NULL, `content` text, `senderRead` tinyint(1) DEFAULT '0', `receiverRead` tinyint(1) DEFAULT '0', PRIMARY KEY (`msgid`) ) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
PHP腳本:
腳本的主要目的是處理來自ajax的每次詢問,ajax每次詢問就查詢一下數據庫,看有沒有新的信息,如果沒有,剛用usleep()函數等待一秒后再次查詢,直到有新信息插入數據庫並被查到,腳本返回查詢到的數據,並退出無限循環,結束腳本。
<?php set_time_limit(0);//設置腳本超時時間為無限,不然在過了超時時間后腳本會自動關閉,輪詢失敗。 $link=new mysqli("127.0.0.1","root","root","test"); $search="select sender,receiver,content from msg where receiverRead=0 limit 1";//限制每次讀出一條數據,便於修改其已讀flag $change="update msg set receiverRead=1 where receiverRead=0 limit 1"; while (true) {//進入無限循環 $res = null; $res=$link->query($search); if($res->num_rows!=0){ $link->query($change); $msg=$res->fetch_assoc(); $jsonstr=json_encode($msg); echo $jsonstr; break; } usleep(1000);//如果沒有信息不會進入if塊,但會執行一下等待1秒,防止PHP因循環假死。 } ?>
客戶端實現:
客戶端的主要任務是設置一個ajax請求函數,每次查詢時被調用,當沒有信息返回時,服務器端被擱置,當前頁面正常執行;當有信息返回時,函數處理返回的數據,並迅速再次調用此函數發送一次請求。
用原生JS:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body> <script> function link(){ var xhr=null;//先設置xhr為空,為了輪詢時再次調用函數對xhr重用,引發錯誤 xhr=new XMLHttpRequest(); xhr.open('GET','server.php',true);//第三個參數一定要設置為true,異步不阻塞,不會影響到后面JS的執行。 xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ var obj = JSON.parse(xhr.responseText) console.log('發送人:'+obj.sender+'接收人:'+obj.receiver+'內容:'+obj.content) setTimeout(function(){link()},3000) } }; } link(); </script> </html>