佳木斯湛栽影视文化发展公司

主頁(yè) > 知識(shí)庫(kù) > PHP使用反向Ajax技術(shù)實(shí)現(xiàn)在線客服系統(tǒng)詳解

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

熱門標(biāo)簽:團(tuán)購(gòu)網(wǎng)站 科大訊飛語(yǔ)音識(shí)別系統(tǒng) 服務(wù)器配置 電子圍欄 Mysql連接數(shù)設(shè)置 銀行業(yè)務(wù) Linux服務(wù)器 阿里云

本文實(shí)例講述了PHP使用反向Ajax技術(shù)實(shí)現(xiàn)在線客服系統(tǒng)。分享給大家供大家參考,具體如下:

反向Ajax技術(shù),又稱為服務(wù)器推技術(shù),server push等。一般用于“在線客服”、“消息推送”、“即時(shí)通信”等功能中,比如新浪微博的私信功能,就是客戶端不斷的請(qǐng)求服務(wù)器并創(chuàng)建連接,去查看服務(wù)器有沒(méi)有返回的信息,建立連接比較浪費(fèi)服務(wù)器資源,下面我將根據(jù)客戶端創(chuàng)建連接的不同性來(lái)介紹一下實(shí)現(xiàn)反向Ajax的三種思路。

三種思路:

1、間隔固定時(shí)間創(chuàng)建連接

這種方式就是按照固定時(shí)間不斷的去請(qǐng)求服務(wù)器,當(dāng)創(chuàng)建第一個(gè)連接時(shí),不管是否有數(shù)據(jù)返回,此次連接都會(huì)失效,然后隔一段時(shí)間發(fā)出第二個(gè)請(qǐng)求,不斷重復(fù)此動(dòng)作,此法最浪費(fèi)資源。

2、長(zhǎng)連接方式

這種方式始終只創(chuàng)建一個(gè)連接,而這個(gè)連接不斷開(kāi),被稱為長(zhǎng)時(shí)連接,以此不斷獲取服務(wù)器推送的數(shù)據(jù),這種方式只創(chuàng)建一個(gè)連接,比第一種方法較好。

3、長(zhǎng)連接+長(zhǎng)輪詢方式

這種方式始終創(chuàng)建連接,而這個(gè)連接也是長(zhǎng)時(shí)連接,但是如果獲得服務(wù)器推送的數(shù)據(jù),此連接斷開(kāi),然后隔固定時(shí)間創(chuàng)建第二此連接,這種方式最好,新浪微博的私信功能用的就是這種方法。

在線客服系統(tǒng)

實(shí)現(xiàn)思路:

(1)咨詢用戶端發(fā)出問(wèn)題,把問(wèn)題存入數(shù)據(jù)庫(kù),把咨詢內(nèi)容顯示到客服人員的聊天窗口中
(2)客服人員看到聊天窗口后,選擇咨詢用戶,進(jìn)行回復(fù),然后把回復(fù)內(nèi)容顯示到客服人員窗口中

實(shí)現(xiàn)方法:

此系統(tǒng)我采用上述思想中的第二種和第三種方式共同實(shí)現(xiàn),咨詢用戶端采用第三種方式實(shí)現(xiàn),客服人員端采用第二種方式實(shí)現(xiàn)。

數(shù)據(jù)庫(kù)信息:

mid:主鍵,pos表示發(fā)送人,rec表示接收人,isread表示是否已讀,content表示咨詢/回復(fù)內(nèi)容。

項(xiàng)目結(jié)構(gòu)圖:

客服人員界面(16-kefu-amdin.php):

此處采用長(zhǎng)連接。頁(yè)面中主要有一個(gè)div,用于顯示聊天信息,還有一個(gè)隱藏的iframe標(biāo)簽,這個(gè)iframe實(shí)現(xiàn)反向Ajax模型,用于發(fā)送長(zhǎng)時(shí)連接,當(dāng)服務(wù)器有數(shù)據(jù)時(shí),服務(wù)器將調(diào)用comet()方法,此方法顯示咨詢內(nèi)容,choose()方法是選擇咨詢?nèi)耍瑀esp()是回復(fù)方法,在這里會(huì)向16-kefu-sendmsg.php頁(yè)面發(fā)出ajax請(qǐng)求,向數(shù)據(jù)庫(kù)插入一條回復(fù)信息,回復(fù)成功后并顯示到聊天窗口中。

?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>說(shuō):'+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('請(qǐng)重新選擇回復(fù)人或填寫(xiě)回復(fù)內(nèi)容');
      return;
    }
    //ajax提交請(qǐng)求
    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+長(zhǎng)連接/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>

發(fā)送咨詢/回復(fù)消息(16-kefu-sendmsg.php)

主要是接受信息,把數(shù)據(jù)寫(xiě)入到數(shù)據(jù)庫(kù)中

?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';
?>

客戶人請(qǐng)求咨詢信息(16-kefu-iframe.php)

主要功能是保持連接永不斷開(kāi),然后不斷的從數(shù)據(jù)庫(kù)讀取一條未讀的咨詢消息,如果有消息,先設(shè)置該消息為已讀,返回js腳本,影響iframe的父窗體

?php
/**
 * 通過(guò)iframe來(lái)實(shí)現(xiàn)反向Ajax
 * @author webbc
 */
header('Content-type:text/html;charset=utf-8');
set_time_limit(0);//設(shè)置頁(yè)面永久執(zhí)行
//ob_start();//打開(kāi)輸出緩存過(guò)了,就不需要使用此函數(shù)了
//由于瀏覽器是根據(jù)內(nèi)容大小才先顯示,可以先顯示4000個(gè)空白字符串讓瀏覽器可以繼續(xù)顯示
echo str_repeat(' ', 4000),"br/>";
ob_flush();
flush();
while(true){
  //從數(shù)據(jù)庫(kù)讀取一條未讀的咨詢消息
  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();//強(qiáng)制讓php返回給apache
    flush();//強(qiáng)制讓web服務(wù)器返回給瀏覽器
  }
  sleep(1);//隔1s循環(huán)查1次
}
?>

咨詢?nèi)藛T界面(16-kefu-user.php):

此處采用長(zhǎng)連接+長(zhǎng)輪詢的方式。當(dāng)頁(yè)面加載就發(fā)出一條ajax請(qǐng)求,如果該請(qǐng)求有數(shù)據(jù)返回,則顯示到聊天窗口中,延時(shí)1s后重新發(fā)送請(qǐng)求,如果點(diǎn)擊咨詢,就發(fā)出ajax請(qǐng)求將咨詢內(nèi)容寫(xiě)入數(shù)據(jù)庫(kù)中。

?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('請(qǐng)輸入咨詢內(nèi)容');
    return ;
  }
  $.post('./16-kefu-sendmsg.php',{rec:'admin',content:askContent},function(res){
    if(res == 'ok'){
      $('p style="text-align:right">你對(duì)客服說(shuō):'+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+長(zhǎng)連接+長(zhǎng)輪詢/h2>
  div id="chatArea">
  /div>
  p>textarea id="askContent">/textarea>/p>
  p>input type="button" value="咨詢" onclick="ask();" />/p>
/body>
script>
  //長(zhǎng)連接+長(zhǎng)輪詢
  var setting = {
    url:'16-kefu-ajax.php',
    dataType:'json',
    success:function(res){
      $('p style="text-align:left">客服對(duì)你說(shuō):'+res.content+'/p>').appendTo($('#chatArea'));
      var func = function(){$.ajax(setting)};
      window.setTimeout(func,1000);//延時(shí)1s后重新發(fā)送連接
    }
  }
  $.ajax(setting);
/script>
/html>

咨詢?nèi)苏?qǐng)求回復(fù)信息界面(16-kefu-ajax.php):

通過(guò)ajax+長(zhǎng)輪詢實(shí)現(xiàn)反向Ajax。請(qǐng)求數(shù)據(jù),獲取數(shù)據(jù)后,將數(shù)據(jù)置為已讀,然后返回,結(jié)束本次連接。

?php
/**
 * 通過(guò)ajax+長(zhǎng)輪詢實(shí)現(xiàn)反向Ajax
 * @author webbc
 */
set_time_limit(0);//不設(shè)置請(qǐng)求超時(shí)時(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次
}
?>

數(shù)據(jù)庫(kù)連接文件(conn.php):

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

運(yùn)行結(jié)果圖:

更多關(guān)于PHP相關(guān)內(nèi)容可查看本站專題:《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《PHP基本語(yǔ)法入門教程》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫(kù)操作入門教程》及《php常見(jiàn)數(shù)據(jù)庫(kù)操作技巧匯總》

希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:
  • 反向Ajax 30分鐘快速掌握
  • 基于PHP技術(shù)開(kāi)發(fā)客服工單系統(tǒng)
  • php 微信公眾平臺(tái)開(kāi)發(fā)模式實(shí)現(xiàn)多客服的實(shí)例代碼
  • PHP+Mysql+Ajax實(shí)現(xiàn)淘寶客服或阿里旺旺聊天功能(前臺(tái)頁(yè)面)
  • PHP+jquery+ajax實(shí)現(xiàn)即時(shí)聊天功能實(shí)例
  • 發(fā)布一個(gè)迷你php+AJAX聊天程序[聊天室]提供下載
  • Ajax PHP JavaScript MySQL實(shí)現(xiàn)簡(jiǎn)易無(wú)刷新在線聊天室
  • 值得分享的php+ajax實(shí)時(shí)聊天室
  • PHP+mysql+ajax輕量級(jí)聊天室實(shí)現(xiàn)方法詳解
  • 基于javascript、ajax、memcache和PHP實(shí)現(xiàn)的簡(jiǎn)易在線聊天室

標(biāo)簽:棗莊 廣元 衡水 蚌埠 萍鄉(xiāng) 大理 衢州 江蘇

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《PHP使用反向Ajax技術(shù)實(shí)現(xiàn)在線客服系統(tǒng)詳解》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    甘南县| 溆浦县| 东乡| 潞城市| 常山县| 泊头市| 馆陶县| 临江市| 宜良县| 丽江市| 乾安县| 高雄市| 龙门县| 金寨县| 承德市| 北安市| 和林格尔县| 边坝县| 青浦区| 安化县| 彰武县| 涟水县| 南乐县| 龙门县| 攀枝花市| 堆龙德庆县| 西峡县| 阜阳市| 蒙城县| 怀柔区| 苏州市| 纳雍县| 江北区| 绥芬河市| 兴海县| 黄石市| 通渭县| 柳河县| 遂宁市| 建水县| 秀山|