聊天室的实现(消息实时刷新)
来源:互联网 发布:九州娱乐软件下载 编辑:程序博客网 时间:2024/06/16 21:45
简单的对话框:实现消息的两秒一刷新,获取消息记录;
页面加载时,消息框中的滑块处于最低端,向上滑动可以查看历史信息,此时刷新信息的时候,不在刷新滑块,使其仍处于最底层,也就是说,当滑块滚动的时候,不在受实时刷新的控制。当输入新的信息的时候,启动滑块的刷新,使其刷新到最底层(当前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>
- <?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);
- ?>
- <?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
- 聊天室的实现(消息实时刷新)
- 聊天室的实现(消息实时刷新)
- 聊天室的实现(消息实时刷新)
- ajax实现消息实时刷新
- 实现聊天室无刷新的JavaScript技术
- 无刷新聊天室的技术实现
- 实现实时刷新的效果
- Swing实时刷新的实现
- zTree实现节点修改的实时刷新
- zTree实现节点修改的实时刷新
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- java日期格式转换
- 用html5进行硬件加速
- 结构型模式总结篇
- 关于myeclipse10.X破解失败问题,或破解成功却依然提示要激活问题,或subscriber无法改变问题
- Android 各种时间格式转化和获取时间戳
- 聊天室的实现(消息实时刷新)
- easyui的异步tree加载
- 8个小球找其中一个较重的,其余小球质量相等
- 数据结构——单循环链表的逆置
- 树莓派-通过Web控制GPIO针脚输出高低电平(改进版)
- 选项卡 模板
- 枚举--JAVA
- GitHub 万星推荐:黑客成长技术清单
- Ubuntu16.04开机蓝屏问题解决