Ajax在线聊天室

àì夳堔傛蜴生んèń 2022-05-19 05:44 216阅读 0赞

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

![70][]

**区域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+" 对 "+jn_info[i].receiver+" 说：";
    					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信息传递给服务器端：

![70 1][]

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

![70 2][]

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

![70 3][]

### 3、聊天室优化： ###

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

![70 4][]

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

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

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

![WEBRESOURCEa1c4254ab084fb5e7e6f1dacad8d3aa3][]

**github源码地址：[https://github.com/DuFanFan1/ajax-talk][https_github.com_DuFanFan1_ajax-talk]**

[70]: /images/20220519/ba68c83bc87141f9adf823bb13fa7ec9.png
[70 1]: /images/20220519/3633633d61f54d32822b610f08d849e7.png
[70 2]: /images/20220519/fd7ebf5ea29a4b04a732eb5e523559e8.png
[70 3]: /images/20220519/1c6e911173ba4446a3545191c8faca74.png
[70 4]: /images/20220519/ebae96ba8a1c44df968d8f30704fabf4.png
[WEBRESOURCEa1c4254ab084fb5e7e6f1dacad8d3aa3]: https://note.youdao.com/yws/res/5155/WEBRESOURCEa1c4254ab084fb5e7e6f1dacad8d3aa3
[https_github.com_DuFanFan1_ajax-talk]: https://github.com/DuFanFan1/ajax-talk