我先说一下实现的整体思路,然后是详细的源代码----
首先客户端是两处Ajax请求---
(1)是发生在客户点击"发送"后的,把聊天信息提交到后台处理
(2)是没4s就自动请求一下后台,并看有没有新的内容,如有就更新聊天框
然后介绍一下后台,很简单,就不多说了.....
下面看下源代码吧,我都加了详细注释了--------
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`)
);
index代码:
<html>
<head>
<title>AJAX with jQuery Example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
timestamp = 0;
updateMsg();
$("form#chatform").submit(function(){
$.post("backend.php",{ //jQuery的post函数,是不是使AJAX变得如此简单了??
message: $("#msg").val(),
name: $("#author").val(),
action: "postmsg",
time: timestamp
}, function(xml) {
$("#msg").attr("value",""); //清空信息框
addMessages(xml);
});
return false;
});
});
function addMessages(xml) {
if($("status",xml).text() == "2") return;
timestamp = $("time",xml).text(); //当返回信息后,设置时间戳,请求的时候带着这个时间戳请求
//这样通过服务器端的比较可以知道是否需要更新聊天框!
$("message",xml).each(function(id) {
message = $("message",xml).get(id);
$("#messagewindow").prepend("<b>"+$("author",message).text()+
"</b>: "+$("text",message).text()+
"<br />");
});
}
function updateMsg() {
// alert(timestamp);
$.post("backend.php",{ time: timestamp }, function(xml) {
$("#loading").remove(); //取出load
addMessages(xml); //在聊天框中增加聊天记录
});
setTimeout('updateMsg()', 4000); //在没有提交的情况下,是自动4s查询一下,如果有新的就更新聊天框
}
</script>
<style type="text/css">
#messagewindow {}{
height: 500px;
border: 1px solid;
padding: 5px;
overflow: auto;
}
#wrapper {}{
margin: 35px auto;
width: 438px;
}
</style>
</head>
<body>
<div align="center">
<div id="wrapper" align="left">
<p id="messagewindow"><span id="loading">Loading</span></p>
<form id="chatform">
姓名:
<input type="text" id="author" size="6" />
信息: <input type="text" id="msg" size="30" />
<input type="submit" value="发送" /><br />
</form>
</
backend.php
<?php
// Configuration
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "7897896";
$dbname = "jqchat";
$store_num = 10;
$display_num = 10;
// Script
error_reporting(E_ALL); //开启PHP的错误和警告检测,关闭用error_reporting(0);
header("Content-type: text/xml"); //因为是输出xml格式
header("Cache-Control: no-cache"); //为了防止IE缓存,经测试,这句的确不能少!!
$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname,$dbconn);
foreach($_POST as $key => $value)
{
$$key = mysql_real_escape_string($value, $dbconn);
//明白了!!!---$($key)----$key依次遍历为anction,所以就得到了下面的$action
//注意:mysql_real_escape_string — 转义 SQL 语句中使用的字符串中的特殊字符,并考虑到连接的当前字符集
//看个例子就明白了:
//$item = "Zak's and Derick's Laptop";
// $escaped_item = mysql_real_escape_string($item);
//printf ("Escaped string: %s\n", $escaped_item);
//----输出:Escaped string: Zak\'s and Derick\'s Laptop
//另外:mysql_escape_string------>和 mysql_real_escape_string() 完全一样,除了 mysql_real_escape_string() 接受的是//一个连接句柄并根据当前字符集转移字符串之外
}
if(@$action == "postmsg") //index中有两处ajax的地方,其中之一是-----提交按钮,然后提交到这里
{
mysql_query("INSERT INTO messages (`user`,`msg`,`time`)
VALUES ('$name','$message',".time().")",$dbconn); //插入新的
mysql_query("DELETE FROM messages WHERE id <= ".
(mysql_insert_id($dbconn)-$store_num),$dbconn); //删除10条的那些
}
//不管是哪个ajax请求,都会执行下面这个!---注意其中的time>$time,是指比起已经发回客户端的信息新增的数据
$messages = mysql_query("SELECT user,msg
FROM messages
WHERE time>$time
ORDER BY id ASC
LIMIT $display_num",$dbconn);
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";
if($status_code == 1)
{
while($message = mysql_fetch_array($messages))
{
$message['msg'] = htmlspecialchars(stripslashes($message['msg']));
//(1)stripslashes()可去掉字符串中的反斜线字符。若是连续二个反斜线,则去掉一个,留下一个。
//若只有一个反斜线,就直接去掉。(即:将用addslashes()函数处理后的字符串返回原样。)
//(2)htmlspecialchar---->将特殊字符转成 HTML 的字符串格式 ( &.; )。最常用到的场合可能就是处理客户留言的留言版了。
//& (和) 转成 &
//" (双引号) 转成 "
//< (小于) 转成 <
//> (大于) 转成 >
//此函数只转换上面的特殊字符,并不会全部转换成 HTML 所定的 ASCII 转换。
//这样之后,输入<a href=#><font color=red>ggsdg</font></a> 就直接输出原样了,而返回到客户端就可以看到效// 果了
echo "\t<message>\n";
echo "\t\t<author>$message[user]</author>\n";
echo "\t\t<text>$message[msg]</text>\n";
echo "\t</message>\n";
}
}
echo "</response>";
?>