Ajax在线聊天室

一、聊天室功能需求分析：

区域1：及时显示大家的聊天信息，页面在不刷新的情况下把聊天信息给追加进来。利用反向推技术，每间隔2s就去服务器查看是否有新的聊天信息，有则请求回来并显示。

    实现：给ajax做一个轮询（setInterval()）。

区域2：在页面不刷新的情况下，把信息提交给服务器存储，同时在区域1中显示对应的内容。

    实现：ajax无刷新方式获得聊天Form表单内容并提交。

数据表：聊天信息表

id、发送者、发送内容、接收者、颜色、发送时间

二、具体实现：

1、从服务器端获取聊天内容data.php：

'$maxID'";
$qry = mysql_query($sql);

$info = array();
while ($rst = mysql_fetch_assoc($qry)) {
	$info[]=$rst;
}

//通过json格式提供数据给客户端
echo json_encode($info);

 2、客户端聊天室页面index.html：

	
	
	
	



	
Ajax聊天室

	 

	 

	 	

			

				颜色：
				
					请选择
					爱的暗示
					忧郁的蓝
					碧空蓝天
					灰蓝种族
					黄金岁月
					红旗飘飘
					红的发紫
				
				聊天对象：
				
					所有人
					恶魔
					天天
					郁金香
				
				

				
				
				
			
	 	
	 

 3、发送信息并提交到服务器存储send.php：

通过ajax无刷新方式获得聊天的各个表单域信息，并提交给服务器存储，该信息会被“轮询”机制给查询出来并做显示。

 4、样式表talk.css：

#send{
	height: 120px;
	width: 700px;
	margin-left: 200px;
	background: rgb(51,175,234);
}
#control{
	position: relative;
	left:20px;
	margin-left: 5px;
	top: 18px;
}
select,textarea{
	border: 1px solid gray;
}
#msg{
	height: 52px;
	width: 410px;
	margin-left: 5px;
	margin-top: 5px;
}
#show_msg{
	width:698px;
	height: 326px;
	margin-left: 200px;
	margin-top:10px;
	font-size: 14px;
	font-weight: bold;
	overflow: auto;
	border: 1px solid gray;
}
h2{
	margin-left: 400px;
}

三、需注意的地方：

1、及时显示聊天内容

注意：要避免获得重复的聊天信息

解决：获得已经查询的记录的最大id信息，下次就只获得大于已经获得最大id的聊天信息记录。

• 避免获得重复聊天信息，要把已经获得的记录的最大id信息传递给服务器端：

   

• 避免获得重复记录在服务器端做对比查询：

   

2、ajax+FormData实现无刷新方式发表聊天内容：

   

 

3、聊天室优化：

• 设置滚动条，避免消息溢出（高度height/溢出属性overflow）

      

• 显示聊天内容的时候，滚动条始终在最下边

      div.scrollHeight       获得div高度（包括滚动高度） 

      div.scrollTop = div.scrollHeight    设置滚动条卷起的高度

      

 

github源码地址：https://github.com/DuFanFan1/ajax-talk