Ajax在线聊天室

最新推荐文章于 2023-08-21 11:46:57 发布

杜小白Zero

最新推荐文章于 2023-08-21 11:46:57 发布

阅读量5.2k

点赞数 8

分类专栏： AJAX 文章标签： ajax聊天室

本文链接：https://blog.csdn.net/dff1993/article/details/81142456

版权

AJAX 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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

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

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

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

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

数据表：聊天信息表

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

二、具体实现：

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

<?php
error_reporting(E_ALL ^ E_DEPRECATED);
//获得最新的聊天内容
$link = mysql_connect('localhost','root','');
mysql_select_db('test',$link);
mysql_query('set names utf8');

$maxID = $_GET['maxID'];
//每次都请求新的聊天记录（不要获得旧的信息）
//本次请求的记录结果id需要大于上次已经获得记录的最大id
$sql = "select * from message where id>'$maxID'";
$qry = mysql_query($sql);

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax实现聊天室</title>
	<link rel="stylesheet" type="text/css" href="./talk.css">
	<script type="text/javascript">
	//通过ajax无刷新方式获得最新的聊天内容
	var maxID = 0;
	function showmessage(){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				//string——>实体内容
				eval("var jn_info="+xhr.responseText);
				//遍历jn_info的数组，把内容的信息与页面内容做结合
				// alert(eval);
				var s = "";
				for(var i=0;i<jn_info.length;i++){
					s += "<p style='color:"+jn_info[i].color+"'>";
					s += jn_info[i].sender+"&nbsp;对&nbsp;"+jn_info[i].receiver+"&nbsp;说：";
					s += jn_info[i].msg+"("+jn_info[i].add_time;
					s += ")</p>";
					//把已经获得记录的最大id值赋给maxID
					maxID = jn_info[i].id;
				}
				var showmsg = document.getElementById('show_msg');
				showmsg.innerHTML += s;

				//设置滚动条卷起高度
				//卷起高度等于div本身高度，就可以使得滚动条始终在最下边显示
				showmsg.scrollTop = showmsg.scrollHeight;
			}
		}
		xhr.open('get','./data.php?maxID='+maxID);
		xhr.send(null);
	}
	window.onload = function(){
		 setInterval("showmessage()",2000);//制作轮询（推技术）
	}
	</script>
</head>
<body>
<div id="content">
	<h2>Ajax聊天室</h2><hr/>
	 <div id="show_msg"></div>
	 <div id="send">
	 	<form id="uploadform">
			<div id="control">
				颜色：
				<select name="color">
					<option value="">请选择</option>
					<option style="color:#FF8888" value="#FF8888">爱的暗示</option>
					<option style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option>
					<option style="color:#0000FF" value="#0000FF">碧空蓝天</option>
					<option style="color:#9F88FF" value="#9F88FF">灰蓝种族</option>
					<option style="color:#D2691E" value="#D2691E">黄金岁月</option>
					<option style="color:#FF0000" value="#FF0000">红旗飘飘</option>
					<option style="color:#990099" value="#990099">红的发紫</option>
				</select>
				聊天对象：
				<select name="receiver">
					<option value="所有人">所有人</option>
					<option value="恶魔">恶魔</option>
					<option value="天天">天天</option>
					<option value="郁金香">郁金香</option>
				</select>
				<br/>
				<textarea id="msg" name="msg"></textarea>
				<input type="button" value="发送" onclick="sendmsg()" />
				<span id="sendresult"></span>
			</div>
	 	</form>
	 </div>
</div>
</body>
</html>
<script type="text/javascript">
function sendmsg(){
	var fm = document.getElementById('uploadform');
	var fd = new FormData(fm);//收集数据
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				document.getElementById('sendresult').innerHTML = xhr.responseText;
				//表单域信息归位
				document.getElementsByTagName('select')[0].value="";//颜色
				document.getElementsByTagName('select')[1].value="";//聊天对象
				document.getElementById('msg').value="";//消息
				//3秒后使得发表留言的信息消失
				setTimeout("hideresult()",3000);
			}
		}
		xhr.open('post','./send.php');
		xhr.send(fd);
}
//使得发表留言的标志信息消失
function hideresult(){
	document.getElementById('sendresult').innerHTML = "";
}
</script>

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

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

<?php
error_reporting(E_ALL ^ E_DEPRECATED);
//获得最新的聊天内容
$link = mysql_connect('localhost','root','');
mysql_select_db('test',$link);
mysql_query('set names utf8');

//接收表单信息并存储
// print_r($_POST);

$msg = $_POST['msg'];
$color = $_POST['color'];
// $biaoqing = $_POST['biaoqing'];
$receiver = $_POST['receiver'];

$sql = "insert into message values(null,'$msg','admin','$receiver','$color',now())";
if(mysql_query($sql)){
	echo "发表留言成功";
}else{
	echo "发表留言失败";
}

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

杜小白Zero

关注

8
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
Ajax在线聊天室

一、聊天室功能需求分析：区域1：及时显示大家的聊天信息，页面在不刷新的情况下把聊天信息给追加进来。利用反向推技术，每间隔2s就去服务器查看是否有新的聊天信息，有则请求回来并显示。实现：给ajax做一个轮询（setInterval()）。区域2：在页面不刷新的情况下，把信息提交给服务器存储，同时在区域1中显示对应的内容。实现：ajax无刷新方式获得聊天Form表单...
复制链接

扫一扫