聊天室的实现（消息实时刷新）

最新推荐文章于 2024-05-22 09:49:02 发布

hpugym

最新推荐文章于 2024-05-22 09:49:02 发布

阅读量5.6k

点赞数 1

分类专栏： Web开发

本文链接：https://blog.csdn.net/hpugym/article/details/50427874

版权

Web开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

简单的对话框：实现消息的两秒一刷新，获取消息记录；

页面加载时，消息框中的滑块处于最低端，向上滑动可以查看历史信息，此时刷新信息的时候，不在刷新滑块，使其仍处于最底层，也就是说，当滑块滚动的时候，不在受实时刷新的控制。当输入新的信息的时候，启动滑块的刷新，使其刷新到最底层（当前DIV的最底层）。另外，内容发送会显示发送状态，2秒后自动消失。

代码实现：

index.html

<html>
   <head>
      <title>聊天室</title> 
	  <meta http-equiv="content-type" content="text/html;charset=utf-8">
	  <script type="text/javascript">
	        var maxID=0;
	        var kongzhi = 1;
	        function show(){
			    var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function (){
				   if(xhr.readyState==4){
				       //alert(xhr.responseText);
					   eval("var jn_info = "+xhr.responseText);
					   var s="";
					   for(var i=0 ; i<jn_info.length;i++){
						   s+="<p style='color #233434'>"+jn_info[i].from;
						   s+="对"+jn_info[i].to+"说："+jn_info[i].content;
					       s+="</p>";  
						   maxID = jn_info[i].id; 
					   }
					var showview=document.getElementById('view');
					showview.innerHTML += s;
					if(kongzhi==1){//控制加载时，消息内容处于最底层，而且只进行一次
						showview.scrollTop=showview.scrollHeight;	
						kongzhi++;
					}else{
						//
					}
					
				   }
				}
				xhr.open('get','./data.php?maxID='+maxID);
				xhr.send(null);
			}
			window.οnlοad= function(){
			    show();
				//轮转查询
				setInterval("show()",2000);
			}
			
	  </script>
   </head>
   <body>
        <div id ="view" style="border:1px solid silver; margin:0 auto; width:400px; height:500px; overflow-y: scroll; word-break: break-all;word-wrap: break-word;">
		<h1>欢迎光临聊天室</h1>
		<p style="color:red;">小编祝大家幸福</p>
		</div>
		<div style=" margin:0 auto; border:1px solid silver; width:400px ;height:60px;" onmousewheel="stop()">
		    <form id="form"> 
			               <input type="hidden" name="from" value="周杰伦">
						   <input type="hidden" name="to" value="李长江">
			    聊天内容：<input type="text" name="content" id="content"><input type="button" name="submit" value="发送" onClick="send()">
				 <span id="re"></span>
			</form>
		</div>
   </body>
</html>
<script type="text/javascript">
    function send(){
    	var showview=document.getElementById('view');
	    var fm = document.getElementById('form');//不要通过TagName获取表单
		var fd = new FormData(fm);
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function (){
		   if(xhr.readyState==4){
				   //alert(xhr.responseText);
				  document.getElementById('re').innerHTML=xhr.responseText;
				  document.getElementById('content').value="";
				  setTimeout(function(){hidden()},2000)
		          }
		   }
		xhr.open('post','./action.php');
		xhr.send(fd);
		showview.scrollTop=showview.scrollHeight;
	}
    function hidden(){
    	document.getElementById('re').innerHTML="";
    }
    function stop(){
    	showview.scrollTop=showview.scrollHeight;
    }
</script>

data.php

<?php
   error_reporting(0);
   $conn=@mysql_connect("localhost","root" ,"guo941102");
   mysql_select_db('test',$conn);
   mysql_query("set names utf8") or die(mysql_errno());
   $maxID= $_GET['maxID'];
   $sql="select * from msg where id >'$maxID'";
   $res=mysql_query($sql);
   $info= array();
   while($row=mysql_fetch_assoc($res)){
      // $temp=array();
      // foreach($row as $key => $value){
	    //   $temp[$key]=urlencode($value);
	  // }
	  // $info[]=$temp;
	  $info[]= $row;
   }
   //通过json格式传递数据
  // var_dump($info);
   //
//   echo urldecode(json_encode($info)); 
     echo json_encode($info);

?>

action.php

<?php
    header("Content-type: text/html; charset=utf-8"); 
    error_reporting(0);
    $conn=@mysql_connect("localhost","root" ,"guo941102");
    mysql_select_db('test',$conn);
    mysql_query("set names utf8") or die(mysql_errno());
	//print_r($_POST);
	$from    =$_POST['from'];
	$to      =$_POST['to'];
	$content =$_POST['content'];
    $sql = "insert into msg values(null,'$from','$to','$content',now())";
	if(mysql_query($sql)){
	   echo "发表成功";
	}
	else{
	    echo "发表失败";
	}
?>

只是为了功能的实现，所以界面并不是那么好看。欢迎建议。。。