介紹
聊天應用程式在網上非常常見。開發人員在建構這類應用程式時的選擇也很多。這篇文章介紹了如何實作基于php-ajax的聊天應用程式,并且不需要重新整理頁面就可以發送和接收消息。
核心邏輯
在定義應用程式的核心功能之前,先來看一看聊天應用程式的基本外觀,如以下截圖所示:
通過聊天視窗底部的輸入框輸入聊天文本。點選send按鈕,就開始執行函數set_chat_msg。這是一個基于ajax的函數,是以無需重新整理頁面就可以将聊天文本發送到伺服器。程式在伺服器中執行chat_send_ajax.php以及使用者名和聊天文本。
//
// set chat message
function set_chat_msg()
{
if(typeof xmlhttprequest != "undefined")
{
oxmlhttpsend = new xmlhttprequest();
}
else if (window.activexobject)
oxmlhttpsend = new activexobject("microsoft.xmlhttp");
if(oxmlhttpsend == null)
alert("browser does not support xml http request");
return;
var url = "chat_send_ajax.php";
var strname="noname";
var strmsg="";
if (document.getelementbyid("txtname") != null)
strname = document.getelementbyid("txtname").value;
document.getelementbyid("txtname").readonly=true;
if (document.getelementbyid("txtmsg") != null)
strmsg = document.getelementbyid("txtmsg").value;
document.getelementbyid("txtmsg").value = "";
url += "?name=" + strname + "&msg=" + strmsg;
oxmlhttpsend.open("get",url,true);
oxmlhttpsend.send(null);
}
php子產品從query string(查詢字元串)中接收表單資料,更新到命名為chat的資料庫表中。chat資料庫表有命名為<code>id</code>、<code>username</code>、<code>chatdate</code>和<code>msg</code>的列。id字段是自動遞增字段,是以這個id字段的指派将自動遞增。目前的日期和時間,會更新到chatdate列。
require_once('dbconnect.php');
db_connect();
$msg = $_get["msg"];
$dt = date("y-m-d h:i:s");
$user = $_get["name"];
$sql="insert into chat(username,chatdate,msg) " .
"values(" . quote($user) . "," .
quote($dt) . "," . quote($msg) . ");";
echo $sql;
$result = mysql_query($sql);
if(!$result)
throw new exception('query failed: ' . mysql_error());
exit();
為了接收來自資料庫表中所有使用者的聊天消息,timer函數被設定為循環5秒調用以下的javascript指令,即每隔5秒時間執行get_chat_msg函數。
var t = setinterval(function(){get_chat_msg()},5000);
get_chat_msg是一個基于ajax的函數。它執行chat_recv_ajax.php程式以獲得來自于資料庫表的聊天資訊。在
onreadystatechange屬性中,另一個javascript
函數get_chat_msg_result被連接配接起來。在傳回來自于資料庫表中的聊天消息的同時,程式控制進入到
get_chat_msg_result函數。
// general ajax call
var oxmlhttp;
var oxmlhttpsend;
function get_chat_msg()
oxmlhttp = new xmlhttprequest();
oxmlhttp = new activexobject("microsoft.xmlhttp");
if(oxmlhttp == null)
alert("browser does not support xml http request");
oxmlhttp.onreadystatechange = get_chat_msg_result;
oxmlhttp.open("get","chat_recv_ajax.php",true);
oxmlhttp.send(null);
在chat_recv_ajax.php程式中,來自于使用者的聊天消息會通過sql <code>select</code>指令進行收集。為了限制行數,在sql查詢中還給出了限制子句(limit 200),即要求聊天資料庫表中的最後200行。所獲得的消息再傳回給ajax函數,用于在聊天視窗中顯示内容。
$sql = "select *, date_format(chatdate,'%d-%m-%y %r')
as cdt from chat order by id desc limit 200";
$sql = "select * from (" . $sql . ") as ch order by id";
$result = mysql_query($sql) or die('query failed: ' . mysql_error());
// update row information
$msg="";
while ($line = mysql_fetch_array($result, mysql_assoc))
$msg = $msg . "" .
"" .
"";
$msg=$msg . "<table style="color: blue; font-family: verdana, arial; " .
"font-size: 10pt;" border="0">
<tbody><tr><td>" . $line["cdt"] .
" </td><td>" . $line["username"] .
": </td><td>" . $line["msg"] .
"</td></tr></tbody></table>";
echo $msg;
資料準備就緒的同時,javascript函數會收集來自于php接收到的資料。這些資料将被安排置于div标簽内。oxmlhttp.responsetext會保留從php程式接收到的聊天消息,并複制到div标簽的document.getelementbyid(“div_chat”).innerhtml屬性。
function get_chat_msg_result(t)
if(oxmlhttp.readystate==4 || oxmlhttp.readystate=="complete")
if (document.getelementbyid("div_chat") != null)
{
document.getelementbyid("div_chat").innerhtml = oxmlhttp.responsetext;
oxmlhttp = null;
}
var scrolldiv = document.getelementbyid("div_chat");
scrolldiv.scrolltop = scrolldiv.scrollheight;
下面的sql create table指令可用于建立名為chat的資料庫表。所有由使用者輸入的資訊都會進入到資料庫表中。
create table chat( id bigint auto_increment,username varchar(20),
chatdate datetime,msg varchar(500), primary key(id));
興趣點
這段用于實作聊天應用程式的代碼非常有意思。它可以改進成為一個完全成熟的http聊天應用程式。建立該應用程式的邏輯也非常簡單。即使是初學者了解起來也不會有任何困難。
作者:王國峰
來源:51cto