江苏龙网

  1. 主页 > 生活百科 > >

PHP使用反向Ajax技术实现在线客服系统( 三 )

反向Ajax


  $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=https://www.isolves.com/it/cxkf/yy/php/2020-04-18/"">
<script src=https://www.isolves.com/it/cxkf/yy/php/2020-04-18/"http://libs.baidu.com/jquery/1.7.2/jquery.min.js">
<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=https://www.isolves.com/it/cxkf/yy/php/2020-04-18/"咨询" onclick="ask();" />


</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'];


推荐阅读


上一篇：全站 HTTPS 没你想象的那么简单

下一篇：高并发服务器逻辑处理瓶颈，如何解决？