本文實例講述了PHP使用反向Ajax技術實現在線客服系統。分享給大家供大家參考，具體如下：
反向Ajax技術，又稱為服務器推技術，server push等。一般用于“在線客服”、“消息推送”、“即時通信”等功能中，比如新浪微博的私信功能，就是客戶端不斷的請求服務器并創建連接，去查看服務器有沒有返回的信息，建立連接比較浪費服務器資源，下面我將根據客戶端創建連接的不同性來介紹一下實現反向Ajax的三種思路。
三種思路：
1、間隔固定時間創建連接
這種方式就是按照固定時間不斷的去請求服務器，當創建第一個連接時，不管是否有數據返回，此次連接都會失效，然后隔一段時間發出第二個請求，不斷重復此動作，此法最浪費資源。
2、長連接方式
這種方式始終只創建一個連接，而這個連接不斷開，被稱為長時連接，以此不斷獲取服務器推送的數據，這種方式只創建一個連接，比第一種方法較好。
3、長連接+長輪詢方式
這種方式始終創建連接，而這個連接也是長時連接，但是如果獲得服務器推送的數據，此連接斷開，然后隔固定時間創建第二此連接，這種方式最好，新浪微博的私信功能用的就是這種方法。
在線客服系統
實現思路：
（1）咨詢用戶端發出問題，把問題存入數據庫，把咨詢內容顯示到客服人員的聊天窗口中
（2）客服人員看到聊天窗口后，選擇咨詢用戶，進行回復，然后把回復內容顯示到客服人員窗口中
實現方法：
此系統我采用上述思想中的第二種和第三種方式共同實現，咨詢用戶端采用第三種方式實現，客服人員端采用第二種方式實現。
數據庫信息：
mid：主鍵，pos表示發送人，rec表示接收人，isread表示是否已讀，content表示咨詢/回復內容。
項目結構圖：
客服人員界面（16-kefu-amdin.php）：
此處采用長連接。頁面中主要有一個div，用于顯示聊天信息，還有一個隱藏的iframe標簽，這個iframe實現反向Ajax模型，用于發送長時連接，當服務器有數據時，服務器將調用comet()方法，此方法顯示咨詢內容，choose()方法是選擇咨詢人，resp()是回復方法，在這里會向16-kefu-sendmsg.php頁面發出ajax請求，向數據庫插入一條回復信息，回復成功后并顯示到聊天窗口中。
<?phpsetcookie('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(); //服務器調用函數 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; } //咨詢人選擇函數 function choose(pos){ document.getElementById('postman').innerHTML = pos; } //客服人員回復函數 function resp(){ var respContent = document.getElementById('respContent').value; var pos = document.getElementById('postman').innerHTML; if(respContent == '' || pos == ''){ alert('請重新選擇回復人或填寫回復內容'); 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'){ //回復成功，把回復信息顯示到聊天界面中 var content = '<p style="text-align:right">你回復'+ pos + '：'+respContent+'</p>'; var old = document.getElementById('chatArea').innerHTML; document.getElementById('chatArea').innerHTML = old + content; document.getElementById('respContent').value = '';//給回復內容重新置空 } } } 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>咨詢人：<span id="postman"></span></p> <p><textarea id="respContent"></textarea></p> <p><input type="button" value="回復" onclick="resp();" /></p></body></html>發送咨詢/回復消息（16-kefu-sendmsg.php）
主要是接受信息，把數據寫入到數據庫中
<?php/** * 客服回復咨詢人,咨詢人咨詢客服 * @author webbc */header('Content-type:text/html;charset=utf-8');require('./conn.php');$rec = $_POST['rec'];//咨詢人變為接收者$pos = $_COOKIE['username'];//客服人員變為發送者$respContent = $_POST['content'];//客服人員的回復內容$sql = "insert into msg (pos,rec,content) values ('$pos','$rec','$respContent')";echo mysql_query($sql) ? 'ok':'fail';?>客戶人請求咨詢信息（16-kefu-iframe.php）
主要功能是保持連接永不斷開，然后不斷的從數據庫讀取一條未讀的咨詢消息，如果有消息，先設置該消息為已讀，返回js腳本，影響iframe的父窗體
<?php/** * 通過iframe來實現反向Ajax * @author webbc */header('Content-type:text/html;charset=utf-8');set_time_limit(0);//設置頁面永久執行//ob_start();//打開輸出緩存過了，就不需要使用此函數了//由于瀏覽器是根據內容大小才先顯示，可以先顯示4000個空白字符串讓瀏覽器可以繼續顯示echo str_repeat(' ', 4000),"<br/>";ob_flush();flush();while(true){ //從數據庫讀取一條未讀的咨詢消息 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)){ //設置該消息為已讀 $sql = 'update msg set isread = 1 where mid = '.$msg['mid']; mysql_query($sql); $json = json_encode($msg);//把數組轉換為json數據 //返回js腳本，影響iframe的父窗體 echo '<script>'; echo 'parent.window.comet(',$json,');'; echo '</script>'; ob_flush();//強制讓php返回給apache flush();//強制讓web服務器返回給瀏覽器 } sleep(1);//隔1s循環查1次}?>咨詢人員界面（16-kefu-user.php）：
此處采用長連接+長輪詢的方式。當頁面加載就發出一條ajax請求，如果該請求有數據返回，則顯示到聊天窗口中，延時1s后重新發送請求，如果點擊咨詢，就發出ajax請求將咨詢內容寫入數據庫中。
<?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('請輸入咨詢內容'); 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后重新發送連接 } } $.ajax(setting);</script></html>咨詢人請求回復信息界面（16-kefu-ajax.php）：
通過ajax+長輪詢實現反向Ajax。請求數據，獲取數據后，將數據置為已讀，然后返回，結束本次連接。
<?php/** * 通過ajax+長輪詢實現反向Ajax * @author webbc */set_time_limit(0);//不設置請求超時時間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); //如果有客服人員的回復信息 if(!empty($msg)){ //把該信息置為已讀 $sql = "update msg set isread = 1 where mid = ".$msg['mid']; mysql_query($sql); echo json_encode($msg);//返回json數據 exit();//如果此次連接獲取數據，就結束本次連接 } sleep(1);//隔一秒循環1次}?>數據庫連接文件（conn.php）：
<?php$conn = mysql_connect('localhost','root','1234');mysql_query('use test;');mysql_query('set names utf8');?>運行結果圖：
希望本文所述對大家PHP程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
