聊天室的实现(消息实时刷新)
2015-12-29 17:15
781 查看
简单的对话框:实现消息的两秒一刷新,获取消息记录;
页面加载时,消息框中的滑块处于最低端,向上滑动可以查看历史信息,此时刷新信息的时候,不在刷新滑块,使其仍处于最底层,也就是说,当滑块滚动的时候,不在受实时刷新的控制。当输入新的信息的时候,启动滑块的刷新,使其刷新到最底层(当前DIV的最底层)。另外,内容发送会显示发送状态,2秒后自动消失。
代码实现:
index.html
页面加载时,消息框中的滑块处于最低端,向上滑动可以查看历史信息,此时刷新信息的时候,不在刷新滑块,使其仍处于最底层,也就是说,当滑块滚动的时候,不在受实时刷新的控制。当输入新的信息的时候,启动滑块的刷新,使其刷新到最底层(当前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 "发表失败"; } ?>只是为了功能的实现,所以界面并不是那么好看。欢迎建议。。。
相关文章推荐
- rgb32编程写为bmp文件
- Oracle 11.2.0.4 RAC上调整SCAN 及 遇到的问题 on Oracle Linux 6
- 有用吧? 写了个比sqrtf()快一倍的sqrt()函数
- android实例开发之公交查询笔记(一)
- STM32之keil MDK下建立第一个工程
- JAVA序列化的总结
- 51单片机的WR、RD问题
- 两种高效的并发模式:半同步/半异步和领导者/追随者
- fiter 编码
- 老李推荐:第8章3节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动AndroidDebugBridge 3
- C#中的转译字符以及字符串前面@的作用
- 获取status bar的高度
- iOS中UIImage和UIColor之间的转换
- lcd驱动程序之显示图片
- 【ITOO】为什么使用EF?
- JAVA card 应用开发(三) 把APPLET(CAP文件)装载到卡片
- ssh端口映射,本地转发
- filter 静态资源
- Castor实现XML与Java的互转
- 关于*R的那些概念科普:VR、MR、CR、AR AR/VR技术红利时代 再一次全行业集体踏空?