[原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造（二）

最新推荐文章于 2021-08-06 14:26:59 发布

IT伟哥

最新推荐文章于 2021-08-06 14:26:59 发布

阅读量7.5k

点赞数 1

文章标签：聊天 ajax php json 数据库 mysql

本文链接：https://blog.csdn.net/liwei3gjob/article/details/6519939

版权

接上文，我们提出了实现聊天室必须要解决的问题，下面我们来一起探讨下，这些问题将如何解决。

1）关于数据存储的问题。数据存储可以采用多种形式，如：xml、写入文件，在其他语言中还是可以用application这个全局变量，而在PHP中没有这个全局变量，需要自己封装，还用使用数据库存储数据。本人比较懒惰，呵呵，使用数据库技术实现对数据的存储，这样即有利于数据的永久保存，更方便我们书写代码。

2）数据显示的问题。数据显示的问题也可以通过多种方法来实现，比如：可以定时让网页刷新，每次刷新从数据库中读取数据，但是这种方法的最大问题是，每次可能会从数据库中取出所有的聊天信息，这样效率太差了。如果同时有几百个人同时在线，那么这个聊天室就会很慢很卡了，还有一种技术是采用Ajax技术实现局部刷新技术，动态的读取所需要的数据，这里应该说明一点要，实现聊天室一定要考虑性能、效率问题，所以读取数局决不能读取所有数据，而是要每次读取最后一条或者几条最新的数据...
我的这个聊天室已经实现这部分，请大家继续往下看。

3）判断用户何时在线，何时离线。我们的在线用户列表中显示的是在线的用户，那何时判断用户在线情况的呢，我们这里是这样处理的，首先当用户进入聊天室的时候，需要初始化聊天室信息，以后每隔一段时间读取一次数据库，而我正是利用这点每次把用户的IP插入和当前时间插入到数据库中，当然，当当前用户IP已经存在当前表中，则我直接更新用户的最后一次登录时间，所以当用户没有离开这个页面，我都认为是在线。否则的情况是离线，离线的时候应该从用户在线表中删除当前用户的信息，最后把所有的用户显示到在线列表中。

4）聊天室的一些特殊的处理。这里特殊处理包括当文字内容特别多的时候，会出现滚动条，让滚动条跟随内容滚动到底部，处理一些快捷键，直接可以发送信息等。

下面直接看源码：

聊天室登录页面

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>欢迎使用AJAX聊天室</title>
</head>
<body>
<form action="chatindex.php" name="form1" method="post">
<table width="400" border="1" align="center">
<tr>
<th height="52" colspan="2" scope="col">欢迎使用AJAX聊天室</th>
</tr>
<tr>
<td width="107">用户名：</td>
<td width="277"><input type="text" name="username" /></td>
</tr>
<tr>
<td>密　码：</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="进入聊天室" /> <input type="reset" value="取消"></td>
</tr>
</table>
</form>
<p align="center">河北软件职业技术学院CSDN学院PHP方向版权所有 copyright 2011</p>
</body>
</html>

聊天室首页：

Code:

<?php
session_start();
if(!isset($_SESSION['user']))
{
$_SESSION['user']=$_POST['username'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>欢迎使用AJAX聊天室</title>
<style>
.content{
height:300px;
width:616px;
font-size:14px;
color:#666666;
overflow:scroll;
background-color:#FFFF99;
}
.sendtext{
color: #009900;
background-color:#CCFFCC;
font-size:14px;
}
.users{
width:170px;
}
.send{
width:60px;
height:50px;
color:#0033CC;}
</style>
</head>
<body>
<table width="800" height="360" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#993399">
<tr>
<th width="616" height="31" bgcolor="#FFFFFF" scope="col">欢迎, <?php echo $_SESSION['user']; ?> 进入聊天室
<input type="hidden" id="user" value="<?php echo $_SESSION['user']; ?>" /></th>
<th width="184" rowspan="3" valign="middle" bgcolor="#FFFFFF" scope="col"><select id="userlist" class="users" size="27"><option>所有人</option></select></th>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div id="content" class="content"></div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><table width="800%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" align="right"><strong>我说：</strong></td>
<td width="60%"><textarea id="sendtext" class="sendtext" cols="60" rows="3" οnkeypress="send1()"></textarea></td>
<td width="25%" align="center"><input type="button" class="send" value="发送" οnclick="sengMsg()" /></td>
</tr>
</table></td>
</tr>
</table>
<p align="center">河北软件职业技术学院CSDN学院PHP方向版权所有 copyright 2011<br>聊天室采用ajax+json技术实现</p>
</body>
</html>
<script language="javascript" type="text/javascript" src="firefoxEvent.js"></script>
<script language="javascript" type="text/javascript" src="../include/ajax.js"></script>
<script language="javascript" type="text/javascript">
/*
将用户输入的信息保存到数据库
*/
function sengMsg(){
//定义对象
var xhr=new XMLHttpRequest();
//接受用户输入的内容
var msg=$("sendtext").value;
//获取当前用户名
var user=$("user").value;
//定义请求的URL
var url=$$("./sendMsg.php?msg="+msg+"&user="+user+"&r="+Math.random());
//打开请求
xhr.open("get",url,true);
xhr.send(null);
$("sendtext").value="";
}
/*
动态的查询数据库，两秒查询一次
*/
var maxid=0;
function getMsg(){
//获取当前用户名
var user=$("user").value;
var url="./getMsg.php";
var params="maxid="+maxid+"&user="+user;
ajaxget(url,params,getMsgProcess);
}
function getMsgProcess(xhr){
var msgObj=eval("("+xhr.responseText+")");
var msg=msgObj.Msgs;
var msgstr=$("content").innerHTML;
for(var i=0;i<msg.length;i++){
msgstr+=" <b>"+msg[i].spkname+"</b> ["+msg[i].theip+"]"+" "+msg[i].createTime+" 说：<br>"+" <font color='blue'>"+msg[i].content+"</font><br>";
maxid=msg[i].id;
}
//
$("content").innerHTML=msgstr;
//设置让滚动条跟随文字滚动
$("content").scrollTop=$("content").scrollHeight;
}
setInterval("getMsg()",2000);
/*
捕捉文本框按下或者按住事件
*/
function send1(){
//重写event事件
var event = arguments[0]||window.event;
//获得当前的ASC码
var curKey = event.charCode||event.keyCode;
//判断是否等于13，如如果是13则发送信息
if(curKey==13){
//调用发送方法
sengMsg();
}
}
//****************************处理在线用户信息************************
function getUsers(){
//获取当前用户名
var user=$("user").value;
var url="./getUsers.php";
var params="aa=1";
ajaxget(url,params,getUsersProcess);
}
function getUsersProcess(xhr){
var userlist=eval("("+xhr.responseText+")");
//重新设置在线用户下拉菜单的长度
$("userlist").length=1;
for(var i=0;i<userlist.length;i++){
//产生一个选项
var opt=new Option(userlist[i].username,userlist[i].username);
//添加选项
$("userlist").add(opt,null);
}
}
setInterval("getUsers()",2000);
</script>

Ajax异步发送聊天信息页面：

Code:

<?php
//连接数据库
include("../include/dbconn.php");
//定义sql
$sql="insert into chat(spkname,theip,content,createTime)
values('{$_GET['user']}','{$_SERVER['REMOTE_ADDR']}','{$_GET['msg']}',now())";
//执行插入语句
mysql_query($sql);
?>

Ajax异步读取数据服务端：

Code:

<?php
//连接数据库
include("../include/dbconn.php");
/*
1) 判断一下当前用户是否已经在，useronline中存在，如果存在我们直接更新的他的名称、最后活跃时间
2）如果不存在，我们直接添加一条在线信息
3）判断是否离线，取出最后的时间和当前得时间的时间差，如果是大于设定的时间，表明已经离线，
则我们要删除离线用户的信息
*/
$rs=mysql_query("select id from useronline where theip ='{$_SERVER['REMOTE_ADDR']}'");
//判断
if(mysql_num_rows($rs)){
//查询到，直接更新数据
mysql_query("update useronline set username='{$_GET['user']}',lastTime=now() where theip ='{$_SERVER['REMOTE_ADDR']}'");
}else{
mysql_query(" insert into useronline(username,theip,lastTime) values('{$_GET['user']}','{$_SERVER['REMOTE_ADDR']}',now())");
}
//删除不在线
mysql_query("delete from useronline where TIME_TO_SEC(now())-TIME_TO_SEC(lastTime)>10");
//定义sql
$sql="select id,spkname,theip,content,createTime from chat where id>{$_GET['maxid']}";
//执行插入语句
$rs=mysql_query($sql);
$arr=array();
while($row=mysql_fetch_assoc($rs)){
$arr[]=$row;
}
$arr2=array("Msgs"=>$arr);
echo json_encode($arr2);
?>

得到当前在线用户列表：

Code:

<?php
//连接数据库
include("../include/dbconn.php");
$sql="select username,theip from useronline";
$rs=mysql_query($sql);
while($row=mysql_fetch_assoc($rs)){
$arr[]=$row;
}
echo json_encode($arr);
//{{},{},}
?>

以上文件为完整代码，部分包含文件没有贴出，但是能够在我前几篇帖子中找到。敬请查看。

[原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造（一）

[原创地址] [源码下载] [更多原创，多多支持多]

IT伟哥

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
10
评论
[原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造（二）

接上文，我们提出了实现聊天室必须要解决的问题，下面我们来一起探讨下，这些问题将如何解决。 1）关于数据存储的问题。数据存储可以采用多种形式，如：xml、写入文件，在其他语言中还是可以用application这个全局变量，而在PHP中没有这个全局变量，需要自己封装，还用使用数据库存储数据。本人比较懒惰，呵呵，使用数据库技术实现对数据的存储，这样即有利于数据的永久保存，更
复制链接

扫一扫