Ajax实现模拟客服聊天系统
2016-09-05 14:55 一望无际丶 阅读(479) 评论(0) 编辑 收藏 举报1.信息读取主要的知识要点
comet反向Ajax技术
反向Ajax的目的是允许服务器端向客户端推送信息。Ajax请求在缺省情况下是无状态的，且只能从客户端向服务器端发出请求。你可以通过使用技术模拟服务器端和客户端之间的响应式通信来绕过这一限制。
应用了服务器推技术
ob_flush();//强迫php把内容发给apache服务器
flush(); //强迫apache服务器吧内容发给浏览器
长轮询技术
长轮询----当没有新数据时，服务器端并不立即响应，而是用循环语句(while)+sleep轮询数据源，在这个等待的过程中，debugger网络选项卡会显示这个请求正处于pending状态。当发现新数据时就会中断循环，并且将数据给浏览器响应，浏览器收到响应后再发起同样的请求。
也就是说，“长轮询” 长指的是在每次请求连接中不会马上断开，而是收到数据后再断开，所以请求的时间长，其http链接不是频繁的断开，重连，从而减少了http连接’三次握手‘的性能损耗。
2.信息发送用的是ajax技术
客服端代码
主要用到的是comet反向ajax
<?php setcookie(\'res\',\'admin\') ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html > <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style > #jilu{ width: 500px; height: 400px; border:solid 1px gray; overflow: scroll; margin-bottom: 10px; float: left; } </style> <script type=\'text/javascript\'> function comet(msg){ //读取发来的信息 var str=\'<a onclick="huifuname(\\'\'+msg.res+\'\\')">\'+msg.res+\'</a>\'; str+=\': \'; str+=msg.content+\'</br>\'; document.getElementById("jilu").innerHTML+=str; } function msgup(){ //信息回复 var pos=document.getElementById(\'res\').innerHTML; //获取回复名字 var cont=document.getElementsByTagName(\'textarea\')[0].value;//获取回复的信息内容 if( pos== \'\' || cont==\'\'){ //判断是否为空 alert(\'请选择回复，并内容不能为空!\'); return; } var xhr=new XMLHttpRequest();//创建XHR对象 xhr.open(\'POST\',\'msgup.php\',true);//建立连接 xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencoded\');//设置头信息 xhr.onreadystatechange=function(){ if (this.readyState==4) { if(this.responseText==\'ok\'){ var str=\'你回复\'+pos+\': \'+cont+\'</br>\'; document.getElementById(\'jilu\').innerHTML+=str; document.getElementsByTagName(\'textarea\')[0].value=\'\'; } } } xhr.send(\'pos=\'+pos+\'&content=\'+cont); } function huifuname(huifuname){ document.getElementById(\'res\').innerHTML=huifuname; } </script> </head> <body> <h2>在线客服质询:客服端</h2> <div id="jilu"> </div> <div> 回复:<span id=\'res\'></span> <br></br> <textarea></textarea> <input type="button" value="回复" onclick=\'msgup()\'> </div> <iframe src="kehu.php" frameborder="0px"> </iframe> </body> </html>
iframe框架下的kehu.php
<?php set_time_limit(0); require \'conn.php\'; while(true){ $sql=\'select *from msg where pos="admin" and isread=0 limit 1\'; $res=$mysqli->query($sql); $row=$res->fetch_assoc(); if(!empty($row)){ $sql1="update msg set isread=1 where id=".$row[\'id\']; $mysqli->query($sql1); //将取出的数据转换成json格式 $row=json_encode($row); //输出js代码 echo "<script type=\'text/javascript\'>"; echo "window.parent.comet(".$row.")"; echo "</script>"; ob_flush();//强迫php把内容发给apache服务器 flush(); //强迫apache服务器吧内容发给浏览器 } sleep(1); } ?>
用户端代码
主要用到长轮询
<?php $str=\'客户\'.rand(1000,9999).substr(str_shuffle(\'abcdefghijklmnopqrstuvwsyz\'),0,4); setcookie(\'res\',$str); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript"> function msgup(){ //发送信息 var cont=document.getElementsByTagName(\'textarea\')[0].value; //创建XHR对象 var xhr=new XMLHttpRequest(); xhr.open(\'POST\',\'msgup.php\',true); //设置头信息 xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencoded\'); xhr.onreadystatechange=function(){ if (this.readyState==4) { if(this.responseText==\'ok\'){ var str=\'你说: \'+cont+\'</br>\'; document.getElementById(\'jilu\').innerHTML+=str; document.getElementsByTagName(\'textarea\')[0].value=\'\'; } } } xhr.send(\'pos=\'+\'admin\'+\'&content=\'+cont); } </script> <script type=\'text/javascript\'> //ajax长轮询 aa(); //网页一打开就加载函数 function aa(){ var xhr=new XMLHttpRequest(); xhr.open(\'GET\',\'custom.php\',true); xhr.onreadystatechange=function(){ if (this.readyState==4) { var cont=eval(\'(\'+this.responseText+\')\');//将传过来的文本转换为对象 var str=\'客服:\'+cont.content+\'</br>\'; document.getElementById(\'jilu\').innerHTML+=str; aa(); //重新加载函数 } } xhr.send(null); } </script> <style > #jilu{ width: 500px; height: 400px; border:solid 1px gray; overflow: scroll; margin-bottom: 10px; float: left; } </style> </head> <body> <h2>在线客服质询:用户端</h2> <div id="jilu"> </div> <div> <textarea></textarea> <input type="button" value="发送" onclick=\'msgup()\'> </div> </body> </html>
长轮询php核心代码
<?php $pos=$_COOKIE[\'res\']; require \'conn.php\'; $sql="select *from msg where pos=\'$pos\' and isread=0 limit 1"; //sql语句 while(true){ $res=$mysqli->query($sql); $row=$res->fetch_assoc(); if(!empty($row)){ $sql1=\'update msg set isread=1 where id=\'.$row[\'id\']; /**/ $mysqli->query($sql1); echo json_encode($row); break; } sleep(2); } ?>
信息上传到数据库核心代码
<?php require \'conn.php\'; if(!isset($_POST)){ exit; } $pos=$_POST[\'pos\']; $res=$_COOKIE[\'res\']; $content=$_POST[\'content\'];
$sql="insert into msg(res,pos,content) values(\'$res\',\'$pos\',\'$content\')"; echo $mysqli->query($sql)?\'ok\':\'fail\'; ?>