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

来源：互联网发布：知乎金庸古龙编辑：程序博客网时间：2024/06/05 16:26

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

页面加载时，消息框中的滑块处于最低端，向上滑动可以查看历史信息，此时刷新信息的时候，不在刷新滑块，使其仍处于最底层，也就是说，当滑块滚动的时候，不在受实时刷新的控制。当输入新的信息的时候，启动滑块的刷新，使其刷新到最底层（当前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.onload= 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 "发表失败";}?>

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

0 0