江苏龙网

  1. 主页 > 生活百科 > >

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

反向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=https://www.isolves.com/it/cxkf/yy/php/2020-04-18/"">
<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('请重新选择回复人或填写回复内容');


推荐阅读


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

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