小笙's Blog

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

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解决.


  • 正在加载用户留言,请稍后~
点击这里取消回复

  • 请选择邮箱类型
  • @qq.com
  • @163.com
  • @sina.com
  • @126.com
  • @vip.qq.com
  • @sina.com.cn

:love: :kiss: :twist: :top: :shake: :bye: :han: :sleep: :lula: :rou: :happy: