PHP打造多人在线聊天室[一]

Ajax异步传输可实现无刷新更新页面内容，加上php可轻松实现多人网页聊天室，类似QQ群聊功能。

思路

|- 用户第一次访问站点，提示输入一用户名作为自己的昵称.

|- 只需判断一下用户cookie是否保存，我采用了js的设置cookie和获取cookie。具体代码可参考w3c手册

用户输入一用户名后，即可参与聊天，布局类似QQ聊天框

对显示聊天信息的div，在页面第一次加载时，主要发送ajax请求服务器文件，获取数据库所有信息，显示在div下的ul中，随后每一秒再向服务器请求用户最新发表的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//ajax()为封装的一ajax穿件及简化操作函数，具体请查看源代码
ajax({      
url:'showMsg.php', //服务器端文件
isAsyn:true,
onSuccess:function(data){
if(data){
//将新加入的信息添加在ul中
oDivMsg.innerHTML+=data;
//把滚动条固定在底部
DivMsg.scrollTop=oDivMsg.scrollHeight;
}
},
//lastId即为ul下最后一li的对应数据库id号，
//用此id即可查询下一信息内容
data:'lastId='+aSpan.innerHTML
})

对服务器端代码：

1
2
$lastId=$_POST['lastId'];
$lastId=$lastId+1;        //获取发送的ul中最后一li的id号

接下来查询id为$lastId的数据即可
而向数据库添加操作即可在button上加ajax请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
oBtn.onclick=function(){
varo Txta=document.getElementsByTagName('textarea')[0];
if(oTxta.value.length>0){
ajax({
url:'addMsg.php',
isAsyn:true,
onSuccess:function(data){
if(data){
//清空编辑框
oTxta.value='';
}
},
//发送用户名及发言内容
data:"name="+oBtn.value+"&content="+oTxta.value
);
}
}

到这，聊天室的基本功能已经实现了，具体页面布局，或者其他的一些改善，就自己发挥吧。不过经过我测试，向服务器发送 的定时请求（新数据）还存在一问题，特别是在网速比较差的时候，会出现，点击提交按钮后程序执行时间过长，可能导致数据重复添加，最重要的一个问题是，数据添加后在显示面板显示的时候可能会出现重复现象，不过并不是想数据库添加了几条一模一样的信息，经我分析可能是查询新数据的执行过程大于一秒，导致数据，待新数据并未显示在前台界面时，又发送了相同请求，所以对请求新数据的代码做一修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ajax({
url:'showMsg.php',
isAsyn:true,
onSuccess:function(data){
if(data){
//获取每条信息中的id号
//此id为数据库对应id号，也是查询新数据时所需id
varisAdd=
data.substring(data.indexOf('')+6,
data.indexOf(''));
//如果最后一li的id号等于返回数据中的id号相等
//则不予添加
if(isAdd!=aSpan.innerHTML){
oDivMsg.innerHTML+=data;
}
oDivMsg.scrollTop=oDivMsg.scrollHeight;
}
},
data:'a='+'upd'+'&lastId='+aSpan.innerHTML
})

不过问题依然没有很好的解决，在一些情况下仍旧会出现此问题. 下一篇PHP打造多人在线聊天室[二]将着重讲解此Bug解决.