示例二: 使用jQuery建造聊天程序

為了展示jQuery的強(qiáng)大,我們將建立一個(gè)具有ajax功能的聊天程序.它允許用戶發(fā)布信息,并且可以實(shí)時(shí)的更新信息--但是沒有任何的頁面刷新.鑒于我們將要處理一個(gè)相對(duì)比較復(fù)雜的應(yīng)用,我將更加深入的講解jQuery的特性,向您展示她那些用起來很順手的函數(shù).
首先,我們來規(guī)劃一下這個(gè)應(yīng)用.我們不需要太多東西--一個(gè)前端,一個(gè)后端,一個(gè)jQuery的庫就夠了.但是,將會(huì)有一些代碼處理前端和后端的結(jié)合,所以我們首先應(yīng)該知道預(yù)期從系統(tǒng)里看到什么.

規(guī)劃服務(wù)器端

此應(yīng)用的后端需要處理信息的提交以及輸出.把這個(gè)銘記在心,這樣我們就可以為后端代碼構(gòu)建一個(gè)草圖:

鏈接數(shù)據(jù)庫
如果有信息提交
把信息插入到數(shù)據(jù)庫
刪除老的信息
從數(shù)據(jù)庫獲取信息并以XML顯示 正如你所看到的,它很簡單并且直白.如果你需要使用另外的語言來實(shí)現(xiàn)后端程序,你就可以使用這個(gè)規(guī)劃來指導(dǎo)你.

規(guī)劃客戶端

前端需要使用ajax處理反饋,就像我們?cè)诘谝粋€(gè)例子中做的那樣.它需要處理信息的提交,并且用最新的消息不間斷的更新聊天窗體.然而,我們將要用到另一個(gè)特性--我們將使用the current UNIX timestamp來展示那個(gè)消息被加載了,并且只是抓取這個(gè)信息,由此減少貸款使用以及服務(wù)器負(fù)載.下面就是客戶端規(guī)劃的草圖:

頁面加載的時(shí)候
設(shè)置當(dāng)前的timestamp為0 (所有的信息都在此之后提交, 比如,所有的信息都會(huì)被獲取)
調(diào)用函數(shù)獲取消息
function(函數(shù)): 獲取新消息
使用POST向服務(wù)其發(fā)送請(qǐng)求
調(diào)用函數(shù)處理XML響應(yīng)
增加一個(gè)定時(shí)器并且每秒鐘調(diào)用一次此函數(shù)(服務(wù)器的性能好的話可以提高此頻率)

function: 轉(zhuǎn)換新消息的XML

根據(jù)XML中的內(nèi)容設(shè)定當(dāng)前的timestamp
如果狀態(tài)是 '2',則表示沒有新消息,終止函數(shù)調(diào)用
否則,對(duì)反饋回來的每個(gè)消息進(jìn)行處理, 以下面的格式加到聊天窗口的最上端:

提交信息的時(shí)候:

使用 POST向服務(wù)器發(fā)送請(qǐng)求, 需要指定:
作者姓名(用戶指定)
消息體(用戶指定)
標(biāo)識(shí)這是一個(gè)post請(qǐng)求
最后一次向服務(wù)器請(qǐng)求的timestamp
保持輸入文本框?yàn)榭?便于用戶在此輸入信息
調(diào)用處理XML響應(yīng)的函數(shù) (以便讓信息實(shí)時(shí)呈現(xiàn)出來) 
看上去比服務(wù)器端有點(diǎn)復(fù)雜了,但是慶幸有了jQuery,代碼不會(huì)很長.

規(guī)劃數(shù)據(jù)庫

我們將使用MySql數(shù)據(jù)庫來存儲(chǔ)信息(雖然任何sql數(shù)據(jù)庫都能勝任此工作,并且代碼相差也不是很大). 我們需要一個(gè)表,有四個(gè)列:消息id, 消息作者名,消息體,以及一個(gè)數(shù)字時(shí)間戳(timestamp). 下面使我們創(chuàng)建這個(gè)表的sql代碼:

CREATE TABLE `messages` ( 
   `id` int(7) NOT NULL auto_increment, 
   `user` varchar(255) NOT NULL, 
   `msg` text NOT NULL, 
   `time` int(9) NOT NULL, 
   PRIMARY KEY  (`id`) 
);
由于我們不能判斷到底消息有多長,我們現(xiàn)在就只使用一個(gè)text字段.

服務(wù)器端代碼(XML)
要建立后端,我們首先應(yīng)該知道我們需要后端輸出什么(來決定前端和后端的接口),由此向后工作, 下面是一個(gè)簡單的XML結(jié)構(gòu):

<?xml version="1.0"?> 
<response> 
   <status>1</status> 
   <time>1170323512</time> 
   <message> 
     <author>John Citizen</author> 
     <text>Hello world!</text> 
   </message> 
   <message> 
     <author>John Citizen</author> 
     <text>Hello world again!</text> 
   </message> 
</response>
注意我們已經(jīng)增加一個(gè)標(biāo)簽'status', 它的值為1. 就如我上面提到的,一個(gè)狀態(tài)值為1則標(biāo)示新信息請(qǐng)求成功,2則表示請(qǐng)求成功但是沒有新信息. 每個(gè)消息的實(shí)例都包括作者以及其信息.

服務(wù)器端代碼(php)
現(xiàn)在,回到服務(wù)器端.我們將使用php來實(shí)現(xiàn),不過由于輸出的是xml,所以你可以使用你喜歡的任何語言來寫后段代碼,比如Perl或者asp.我們先定義一些配置信息這樣便于我們以后對(duì)其進(jìn)行修改. 我們需要數(shù)據(jù)庫連接的具體信息,我們要存儲(chǔ)的消息的數(shù)目(數(shù)據(jù)庫可以處理成千上萬行數(shù)據(jù),所以這個(gè)可以適當(dāng)?shù)脑O(shè)大點(diǎn)),以及用戶進(jìn)到聊天室的時(shí)候消息顯示的數(shù)目. 代碼如下:
$dbhost = "localhot"; 
$dbuser = "root"; 
$dbpass = ""; 
$dbname = "chat"; 
$store_num = 10; 
$display_num = 10;
現(xiàn)在言歸正傳,我們繼續(xù)看后端本身.數(shù)據(jù)庫連接自然是必須的, 但是我們同時(shí)需要確認(rèn)不讓IE緩存請(qǐng)求數(shù)據(jù),并且需要確認(rèn)輸出格式為XML.為了能夠監(jiān)視所有的錯(cuò)誤,我們?cè)O(shè)置錯(cuò)誤匯報(bào)為"所有錯(cuò)誤"("all errors").為容易操作請(qǐng)求數(shù)據(jù),我們?yōu)檎?qǐng)求中的每個(gè)參數(shù)設(shè)置一個(gè)變量,每個(gè)變量將把請(qǐng)求中的參數(shù)值作為其自己的值. 代碼如下:
error_reporting(E_ALL); 
header("Content-type: text/xml"); 
header("Cache-Control: no-cache"); 
$dbconn = mysql_connect($dbhost,$dbuser,$dbpass); 
mysql_select_db($dbname,$dbconn); 
foreach($_POST as $key => $value) 
   $$key = mysql_real_escape_string($value, $dbconn);

foreach語句遍歷所有的POST數(shù)據(jù),并且為每個(gè)參數(shù)創(chuàng)建一個(gè)變量,并且給它賦值(比如path/to/file.php?variable=value將給$variable 賦值為"value").這樣就簡化了處理請(qǐng)求數(shù)據(jù)的過程,無需我們手動(dòng)設(shè)定.
下面,我們將進(jìn)入主要函數(shù)部分.現(xiàn)在我們處理消息向數(shù)據(jù)庫的寫入,以及根據(jù)設(shè)定的顯示數(shù)目$display_num來從數(shù)據(jù)庫中獲取相應(yīng)數(shù)目的消息. 當(dāng)我們規(guī)劃客戶端的時(shí)候我提到過當(dāng)提交消息的時(shí)候我們需要設(shè)定一個(gè)響應(yīng)狀態(tài). 我們現(xiàn)在需要檢查這個(gè)響應(yīng)--我們給蠶食'action'賦值'postmsg',表示我們正在處理這個(gè)檢查并且插入新數(shù)據(jù)到數(shù)據(jù)庫.處理的時(shí)候我們需要插入新的unix時(shí)間戳( timestamp).
然而,我們?nèi)匀恍枰謇砦覀兊臄?shù)據(jù)庫.根據(jù)你的數(shù)據(jù)庫的限制,你可以設(shè)定存儲(chǔ)數(shù)據(jù)的數(shù)量.一般而言,不贊成使用消息日志,所以我這里設(shè)定默認(rèn)存儲(chǔ)10條消息.我們將使用一個(gè)函數(shù)來獲取最新消息的id,并且決定是否刪除.舉例來說,如果我們?cè)黾拥?1個(gè)消息,我們使用11減去存儲(chǔ)量(10)就得到一個(gè)id閾值(現(xiàn)在是1),這樣的話我們就可以刪除小于等于這個(gè)閾值的所有消息,這個(gè)例子終究是刪除第一條消息.有了sql,我們可以只寫一條語句就處理這些.

下面的代碼片段檢查 'postmsg'響應(yīng),向數(shù)據(jù)庫添加數(shù)據(jù),以及清理數(shù)據(jù)庫.
if(@$action == "postmsg") 
{ 
   mysql_query("INSERT INTO messages (`user`,`msg`,`time`) 
         VALUES ('$name','$message',".time().")"); 
   mysql_query("DELETE FROM messages WHERE id <= ". 
         (mysql_insert_id($dbconn)-$store_num),$dbconn); 
}

使用其他服務(wù)器端技術(shù)的開發(fā)者可以寫出等價(jià)的代碼.注意我們使用time函數(shù)來獲取unix時(shí)間戳.我們可以假設(shè)在sql執(zhí)行過程中這個(gè)時(shí)間不會(huì)改變(即便是很慢的服務(wù)器,這段代碼也可以每秒鐘執(zhí)行幾百次).所以當(dāng)我們向客戶端返回一個(gè)時(shí)間戳的時(shí)候,我們可以簡單的再次調(diào)用time函數(shù),這個(gè)值也是可信的.

剩下的工作就是要處理從數(shù)據(jù)庫獲取最新的消息并且以XML的形式輸出.這里就要用到我上面寫的那段xml代碼了.然而,大部分代碼是sql,我們使用sql的強(qiáng)大來處理這個(gè)工作,代碼的執(zhí)行時(shí)間不受影響. 下面是sql查詢的要求:


它只是獲取作者以及信息
它只是獲取還沒有被下載的信息--客戶端有一個(gè)最后請(qǐng)求的時(shí)間戳,因此這個(gè)時(shí)間戳可以被插入到sql中
需要對(duì)消息進(jìn)行排序一遍讓最新的消息排在最后,并且允許逆序顯示.
根據(jù)配置信息限制獲取的消息數(shù)量.

任何熟悉sql的人都不會(huì)反對(duì)這很簡單.剩下的就是這些代碼了.先看看查詢語句:

$messages = mysql_query("SELECT user,msg 
              FROM messages 
              WHERE time>$time 
              ORDER BY id ASC 
              LIMIT $display_num",$dbconn);

剩下的代碼就相當(dāng)基礎(chǔ),如果沒有結(jié)果,就設(shè)置狀態(tài)代碼為0,否則,設(shè)置為1,輸出最初的xml,每個(gè)消息的xml以及最終的xml.就是這些了,代碼如下:

if(mysql_num_rows($messages) == 0) $status_code = 2; 
else $status_code = 1; 

echo "<?xml version="1.0"?>n"; 
echo "<response>n"; 
echo "t<status>$status_code</status>n"; 
echo "t<time>".time()."</time>n"; 
while($message = mysql_fetch_array($messages)) 
{ 
   echo "t<message>n"; 
   echo "tt<author>$message[user]</author>n"; 
   echo "tt<text>$message[msg]</text>n"; 
   echo "t</message>n"; 
} 
echo "</response>";

最終的代碼在壓縮包里,所以不需要復(fù)制上面的代碼.現(xiàn)在后端程序完成了,下面我們就該更有趣的工作了--使用html和jQuery!

最新評(píng)論