PHP使用反向Ajax技术实现在线客服系统详解
本文实例讲述了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请求，向数据库插入一条回复信息，回复成功后并显示到聊天窗口中。
<?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();
//服务器调用函数
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相关内容可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家PHP程序设计有所帮助。
相关推荐
-
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
Mini AJAX Chatroom By Longbill http://www.longbill.cn Longbill all rights reserved 2006-08-16 演示地址: http://longbill.cn/down/sample/chat.php 打开文件进行具体设置 使用方法,将这个程序传到服务器上,运行就可以了. 默认的数据保存路径为 rooms/ 目录 调用时后加参数 room=房间名 , 比如 chat.php?room=php,此时就程序就会自
-
基于PHP技术开发客服工单系统
相关知识:客顺通php在线客服系统 v2.0.0 PESCMS Ticket PESMCS Ticket(下称PT)是一款基于GPLv2协议发布的开源客服工单系统.PT基于PESCMS2为核心进行开发,以全新的设计理念,实现一句JS即可嵌入任意页面中,让工单系统变得更加轻便. 运行环境 PHP 5.4及以上版本 Mysql 5.5及以上版本 浏览器不能低于IE8含8 快速使用 登入系统后台--工单模型--创建工单 .创建完毕后,点击'生成JS'按钮.将JS文件保存到本地.最后在任意的页面中,引入
-
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
在线聊天室(online chatrooms)是一个共多人进行沟通交流的网络平台,随着越来越多的新技术的发明和成熟运用,在线聊天室也出现使用各种不同技术的, 这篇文章我想简单总结一下. 首先说一下前台技术,最新的当然是基于HTML5的websocket,它实现了浏览器与服务器全双工通信(full-duplex).WebSocket通信协议于2011年被IETF定为标准 RFC 6455,WebSocketAPI被W3C定为标准.在WebSocket API中,浏览器和服务器只需要做一个握手的动作
-
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
为更好的运用这两天学到的Ajax的相关的知识,就做了个简单的在线网络聊天室. 思路 实现聊天室,基本上就是通过Ajax来传递数据,让PHP来实现对数据的差入和查找,再交给前端JavaScript实现页面的更新,达到即时聊天的功能. 消息显示区 消息显示区就是一个DIV块,我们会借助Ajax获取到服务器端信息之后,使用JavaScript来更新页面. <h3>消息显示区</h3> <div id="up"> </div> <hr /&
-
php 微信公众平台开发模式实现多客服的实例代码
其实微信公众平台的多客服功能已经出来好久了,并且一出来的时候我就已经为自己的公众号实现了,原本以为大家都已经会了,但是今天还是有人问起这个多客服功能怎么使用,我找了下网上也没什么好的教程,今天我就给大家发一篇比较简单易懂的教程吧 在这篇微信公众平台开发教程中,我们将介绍如何使用开发模式实现多客服系统. 一.回复多客服消息 在新的微信协议中,开发模式也可以接入客服系统. 开发者如果需要让用户使用客服系统,需要在接收到用户发送的消息时,返回一个MsgType为transfer_customer_se
-
PHP+jquery+ajax实现即时聊天功能实例
本文实例讲述了PHP+jquery+ajax实现即时聊天功能的方法.分享给大家供大家参考.具体如下: 这是一个简单的利用jquery与php做的一个聊天室的源码,我们这里定时利用ajax读取数据库并进行刷新了,下面直接参上源码,实例代码如下: index.html页面如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
-
反向Ajax 30分钟快速掌握
场景1:当有新邮件的时候,网页自动弹出提示信息而无需用户手动的刷新收件箱. 场景2:当用户的手机扫描完成页面中的二维码以后,页面会自动跳转. 场景3:在类似聊天室的环境中有任何人发言,所有登录用户都可以即时看见信息. 与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验.本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket.文章旨在演示如何实现以上两种技术手段,Struts2或SpringMVC中的应用
-
PHP+mysql+ajax轻量级聊天室实现方法详解
本文实例讲述了PHP+mysql+ajax轻量级聊天室实现方法.分享给大家供大家参考,具体如下: 做了一个QQ聊天交友网站,想加个聊天的功能,于是做完用PHP做了简单又强大的聊天室 1. 创建mysql数据库表: 复制代码 代码如下: create table chat( id bigint AUTO_INCREMENT,username varchar(20), chatdate datetime,msg varchar(500), primary key(id)); 2.编写建议连接数据库函
-
值得分享的php+ajax实时聊天室
非常经典的一款php+ajax实时聊天室,其中使用PHP文件保存聊天记录,按天划分,PHP实现聊天的功能只有一个文件,整合了PHP与AJAX技术,也就是说只要运行这一个文件就可以启动PHP的聊天室了,关于代码上面也是非常的简单,但是实现了聊天室一般的功能,聊天时的昵称,更改昵称的颜色,聊天字号大小,字体,加粗,窗体的变大变小等等,如果你想搞个聊天室来玩玩,这个源码完全可以满足普通的需求. 具体的效果看如下图: 关键代码: <?php header('content-type:text/html;
-
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 ,会显示所有与店主对话的顾客:该列表可以移动:有新消息时会提示:也可以清空该聊天记录 (2)点击列表里的顾客进入右边的对话框界面,显示与该顾客的聊天信息 在实现功能之前,来说一下我用到的两张表: 解释一下:bkid在此处没有用到:isok列是用来判断消息是否已读,未读为0: 现在,来说一下步骤:(分前