PHP使用反向Ajax技術(shù)實現(xiàn)在線客服系統(tǒng)詳解

?php
setcookie('username','admin');
?>
!DOCTYPE html>
html>
head>
  meta charset="utf-8">
  meta http-equiv="X-UA-Compatible" content="IE=edge">
  title>客服功能——客服人員端/title>
  link rel="stylesheet" href="">
script>
  var xhr = new XMLHttpRequest();
  //服務(wù)器調(diào)用函數(shù)
  function comet(json){
    var content = 'p style="text-align:left">span onclick="choose(\''+ json.pos +'');">' + json.pos + '/span>說：'+json.content+'/p>';
    var old = document.getElementById('chatArea').innerHTML;
    document.getElementById('chatArea').innerHTML = old + content;
  }
  //咨詢?nèi)诉x擇函數(shù)
  function choose(pos){
    document.getElementById('postman').innerHTML = pos;
  }
  //客服人員回復(fù)函數(shù)
  function resp(){
    var respContent = document.getElementById('respContent').value;
    var pos = document.getElementById('postman').innerHTML;
    if(respContent == '' || pos == ''){
      alert('請重新選擇回復(fù)人或填寫回復(fù)內(nèi)容');
      return;
    }
    //ajax提交請求
    xhr.open('POST','16-kefu-sendmsg.php',true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.onreadystatechange = function (){
      if(this.readyState == 4  this.status == 200){
        if(this.responseText == 'ok'){
          //回復(fù)成功，把回復(fù)信息顯示到聊天界面中
          var content = 'p style="text-align:right">你回復(fù)'+ pos + '：'+respContent+'/p>';
          var old = document.getElementById('chatArea').innerHTML;
          document.getElementById('chatArea').innerHTML = old + content;
          document.getElementById('respContent').value = '';//給回復(fù)內(nèi)容重新置空
        }
      }
    }
    var sendData = 'rec=' + pos + 'content='+respContent;
    xhr.send(sendData);
  }  
/script>
style>
  #chatArea{
    width:500px;
    height:400px;
    border:1px solid black;
    overflow: scroll;
  }
/style>
/head>
body>
  h1>客服功能——客服人員端/h1>
  h2>原理：iframe+長連接/h2>
  div id="chatArea">
  /div>
  iframe width="0" height="0" frameborder="0" name="frame" src="./16-kefu-iframe.php">/iframe>
  p>咨詢?nèi)耍簊pan id="postman">/span>/p>
  p>textarea id="respContent">/textarea>/p>
  p>input type="button" value="回復(fù)" onclick="resp();" />/p>
/body>
/html>

?php
/**
 * 客服回復(fù)咨詢?nèi)?咨詢?nèi)俗稍兛头?
 * @author webbc
 */
header('Content-type:text/html;charset=utf-8');
require('./conn.php');
$rec = $_POST['rec'];//咨詢?nèi)俗優(yōu)榻邮照?
$pos = $_COOKIE['username'];//客服人員變?yōu)榘l(fā)送者
$respContent = $_POST['content'];//客服人員的回復(fù)內(nèi)容
$sql = "insert into msg (pos,rec,content) values ('$pos','$rec','$respContent')";
echo mysql_query($sql) ? 'ok':'fail';
?>

?php
/**
 * 通過iframe來實現(xiàn)反向Ajax
 * @author webbc
 */
header('Content-type:text/html;charset=utf-8');
set_time_limit(0);//設(shè)置頁面永久執(zhí)行
//ob_start();//打開輸出緩存過了，就不需要使用此函數(shù)了
//由于瀏覽器是根據(jù)內(nèi)容大小才先顯示，可以先顯示4000個空白字符串讓瀏覽器可以繼續(xù)顯示
echo str_repeat(' ', 4000),"br/>";
ob_flush();
flush();
while(true){
  //從數(shù)據(jù)庫讀取一條未讀的咨詢消息
  require('./conn.php');
  $sql = "select * from msg where rec = 'admin' and isread = 0 limit 0,1";
  $result = mysql_query($sql);
  $msg = mysql_fetch_assoc($result);
  //如果有消息
  if(!empty($msg)){
    //設(shè)置該消息為已讀
    $sql = 'update msg set isread = 1 where mid = '.$msg['mid'];
    mysql_query($sql);
    $json = json_encode($msg);//把數(shù)組轉(zhuǎn)換為json數(shù)據(jù)
    //返回js腳本，影響iframe的父窗體
    echo 'script>';
    echo 'parent.window.comet(',$json,');';
    echo '/script>';
    ob_flush();//強制讓php返回給apache
    flush();//強制讓web服務(wù)器返回給瀏覽器
  }
  sleep(1);//隔1s循環(huán)查1次
}
?>

?php
  setcookie('username','user'.rand(10000,99999));
?>
!DOCTYPE html>
html>
head>
  meta charset="utf-8">
  meta http-equiv="X-UA-Compatible" content="IE=edge">
  title>客服功能——客服人員端/title>
  link rel="stylesheet" href="">
script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js">/script>
script>
//咨詢方法
function ask(){
  var askContent = $('#askContent').val();
  if(askContent == ''){
    alert('請輸入咨詢內(nèi)容');
    return ;
  }
  $.post('./16-kefu-sendmsg.php',{rec:'admin',content:askContent},function(res){
    if(res == 'ok'){
      $('p style="text-align:right">你對客服說：'+askContent+'/p>').appendTo($('#chatArea'));
      $('#askContent').val('');
    }
  });
}
/script>
style>
  #chatArea{
    width:500px;
    height:400px;
    border:1px solid black;
    overflow: scroll;
  }
/style>
/head>
body>
  h1>客服功能——用戶端/h1>
  h2>原理：ajax+長連接+長輪詢/h2>
  div id="chatArea">
  /div>
  p>textarea id="askContent">/textarea>/p>
  p>input type="button" value="咨詢" onclick="ask();" />/p>
/body>
script>
  //長連接+長輪詢
  var setting = {
    url:'16-kefu-ajax.php',
    dataType:'json',
    success:function(res){
      $('p style="text-align:left">客服對你說：'+res.content+'/p>').appendTo($('#chatArea'));
      var func = function(){$.ajax(setting)};
      window.setTimeout(func,1000);//延時1s后重新發(fā)送連接
    }
  }
  $.ajax(setting);
/script>
/html>

?php
/**
 * 通過ajax+長輪詢實現(xiàn)反向Ajax
 * @author webbc
 */
set_time_limit(0);//不設(shè)置請求超時時間
require('./conn.php');
$rec = $_COOKIE['username'];
$sql = "select * from msg where rec = '$rec' and isread = 0 limit 0,1";
while(true){
  $result = mysql_query($sql);
  $msg = mysql_fetch_assoc($result);
  //如果有客服人員的回復(fù)信息
  if(!empty($msg)){
    //把該信息置為已讀
    $sql = "update msg set isread = 1 where mid = ".$msg['mid'];
    mysql_query($sql);
    echo json_encode($msg);//返回json數(shù)據(jù)
    exit();//如果此次連接獲取數(shù)據(jù)，就結(jié)束本次連接
  }
  sleep(1);//隔一秒循環(huán)1次
}
?>

?php
$conn = mysql_connect('localhost','root','1234');
mysql_query('use test;');
mysql_query('set names utf8');
?>