PHP使用反向Ajax技術(shù)實(shí)現(xiàn)在線客服系統(tǒng)詳解
本文實(shí)例講述了PHP使用反向Ajax技術(shù)實(shí)現(xiàn)在線客服系統(tǒng)。分享給大家供大家參考，具體如下：
反向Ajax技術(shù)，又稱為服務(wù)器推技術(shù)，server push等。一般用于“在線客服”、“消息推送”、“即時(shí)通信”等功能中，比如新浪微博的私信功能，就是客戶端不斷的請(qǐng)求服務(wù)器并創(chuàng)建連接，去查看服務(wù)器有沒有返回的信息，建立連接比較浪費(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è)連接不斷開，被稱為長(zhǎng)時(shí)連接，以此不斷獲取服務(wù)器推送的數(shù)據(jù)，這種方式只創(chuàng)建一個(gè)連接，比第一種方法較好。
3、長(zhǎng)連接+長(zhǎng)輪詢方式
這種方式始終創(chuàng)建連接，而這個(gè)連接也是長(zhǎng)時(shí)連接，但是如果獲得服務(wù)器推送的數(shù)據(jù)，此連接斷開，然后隔固定時(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)?，resp()是回復(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ù)人或填寫回復(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)耍?lt;span 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ù)寫入到數(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）
主要功能是保持連接永不斷開，然后不斷的從數(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();//打開輸出緩存過(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)容寫入數(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常見數(shù)據(jù)庫(kù)操作技巧匯總》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
- 反向Ajax 30分鐘快速掌握
- 基于PHP技術(shù)開發(fā)客服工單系統(tǒng)
- php 微信公眾平臺(tá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)易在線聊天室
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了php驗(yàn)證碼函數(shù)，還分享了PHP生成圖片驗(yàn)證碼的函數(shù)，供大家參考，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了PHP session會(huì)話操作技巧,結(jié)合實(shí)例形式詳細(xì)總結(jié)分析了php中session會(huì)話操作的原理、配置方法、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-09-09
php實(shí)現(xiàn)讀取手機(jī)客戶端瀏覽器的類
這篇文章主要介紹了php實(shí)現(xiàn)讀取手機(jī)客戶端瀏覽器的類,可實(shí)現(xiàn)取手機(jī)號(hào)碼,瀏覽器報(bào)頭信息,取得手機(jī)類型,取得手機(jī)IP等功能,需要的朋友可以參考下2015-01-01
php 數(shù)組隨機(jī)取值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇php 數(shù)組隨機(jī)取值的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
一家之言的經(jīng)驗(yàn)之談php＋mysql扎實(shí)個(gè)人基本功
在學(xué)習(xí)php的過(guò)程中，我們開始就需要注意的問(wèn)題2008-03-03
這篇文章主要介紹了微信公眾平臺(tái)之快遞查詢功能用法,實(shí)例分析了微信公眾平臺(tái)實(shí)現(xiàn)快遞查詢的相關(guān)技巧與具體用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
php前后臺(tái)分離技術(shù)2008-04-04
基于python發(fā)送郵件的亂碼問(wèn)題的解決辦法
本篇文章小編為大家介紹了，基于python發(fā)送郵件的亂碼問(wèn)題的解決辦法。需要的朋友參考下2013-04-04
Cakephp執(zhí)行主要流程,學(xué)習(xí)cakephp的朋友可以參考下。2010-03-03
提示Trying to clone an uncloneable object of class Imagic的解決
使用網(wǎng)上流傳的一個(gè)程序?qū)崿F(xiàn)pdf截圖為png，需要使用Imagic擴(kuò)展，安裝后出現(xiàn)Trying to clone an uncloneable object of class Imagic提示，下面是具體的解決方法分享。2011-10-10