首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

PHP使用反向Ajax技术实现在线客服系统详解

Posted in PHP onJuly 01, 2019

本文实例讲述了PHP使用反向Ajax技术实现在线客服系统。分享给大家供大家参考，具体如下：

反向Ajax技术，又称为服务器推技术，server push等。一般用于“在线客服”、“消息推送”、“即时通信”等功能中，比如新浪微博的私信功能，就是客户端不断的请求服务器并创建连接，去查看服务器有没有返回的信息，建立连接比较浪费服务器资源，下面我将根据客户端创建连接的不同性来介绍一下实现反向Ajax的三种思路。

三种思路：

1、间隔固定时间创建连接

这种方式就是按照固定时间不断的去请求服务器，当创建第一个连接时，不管是否有数据返回，此次连接都会失效，然后隔一段时间发出第二个请求，不断重复此动作，此法最浪费资源。

PHP使用反向Ajax技术实现在线客服系统详解

2、长连接方式

这种方式始终只创建一个连接，而这个连接不断开，被称为长时连接，以此不断获取服务器推送的数据，这种方式只创建一个连接，比第一种方法较好。

PHP使用反向Ajax技术实现在线客服系统详解

3、长连接+长轮询方式

这种方式始终创建连接，而这个连接也是长时连接，但是如果获得服务器推送的数据，此连接断开，然后隔固定时间创建第二此连接，这种方式最好，新浪微博的私信功能用的就是这种方法。

PHP使用反向Ajax技术实现在线客服系统详解

在线客服系统

实现思路：

（1）咨询用户端发出问题，把问题存入数据库，把咨询内容显示到客服人员的聊天窗口中
（2）客服人员看到聊天窗口后，选择咨询用户，进行回复，然后把回复内容显示到客服人员窗口中

实现方法：

此系统我采用上述思想中的第二种和第三种方式共同实现，咨询用户端采用第三种方式实现，客服人员端采用第二种方式实现。

数据库信息：

mid：主键，pos表示发送人，rec表示接收人，isread表示是否已读，content表示咨询/回复内容。

PHP使用反向Ajax技术实现在线客服系统详解

项目结构图：

PHP使用反向Ajax技术实现在线客服系统详解

客服人员界面（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使用反向Ajax技术实现在线客服系统详解

更多关于PHP相关内容可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

PHP使用反向Ajax技术实现在线客服系统详解

- Author -

webbc

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
用 php 编写的日历
Oct 09 PHP
让你的PHP同时支持GIF、png、JPEG
Oct 09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
Dec 06 PHP
php中的一个中文字符串截取函数
Feb 14 PHP
php中的MVC模式运用技巧
May 03 PHP
JS中encodeURIComponent函数用php解码的代码
Mar 01 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
Jun 20 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
Mar 10 PHP
PHP环境中Memcache的安装和使用
Nov 05 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
May 17 PHP
php连接mysql数据库
Mar 21 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
Apr 06 PHP
PHP封装cURL工具类与应用示例
Jul 01 #PHP
PHP session垃圾回收机制实例分析
Jun 28 #PHP
PHP常用的类封装小结【4个工具类】
Jun 28 #PHP
php实现网页上一页下一页翻页过程详解
Jun 28 #PHP
php输出控制函数和输出函数生成静态页面
Jun 27 #PHP
php生成静态页面并实现预览功能
Jun 27 #PHP
PHP创建对象的六种方式实例总结
Jun 27 #PHP
分析统计(1) i5 10400(1) win10(43) 窗口函数(3) 排名(1) 速龙(1) ipad(1) win11(40) Tomcat(18) i5 9400(1)
You might like
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php输入数据统一类实例
2015/02/23 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[01:45]DOTA2众星出演！DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
利用python画一颗心的方法示例
2017/01/31 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
python基于openpyxl生成excel文件
2020/12/23 Python
Clarks西班牙官方在线商店：clarks鞋
2019/05/03 全球购物
L’urv官网：精品女性运动服品牌
2019/07/07 全球购物
新学期校长寄语
2014/01/18 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js