欢迎在php严程序 - php教程学习AJAX教程, 本节课讲解：php开发客服系统(持久连接+轮询+反向ajax)

php开发客服系统(下载源码)

用户端(可直接给客户发送消息)
客服端(点击用户名.即可给该用户回复消息)

讲两种实现方式：
一：iframe + 服务器推技术comet(反向ajax,即服务器向浏览器推送数据)
二：ajax持久连接 + 长轮询

客服端采用第一种方式:iframe + 服务器推技术
思路：
1：新建comentbyiframe.php 该用文件使用while(true)一直连接到服务器不断开.
如果在while的过程中查到了新数据.使用ob_flush推给apache服务器.apache再用flush推给浏览器.
2：新建html页面,插入一个iframe. 该iframe的src为comentbyiframe.php。
并隐藏iframe。comentbyiframe.php获取的数据用js输出到父窗口中的某个函数.该函数把信息追加到指定的聊天窗口中
3：只要客户端收到用户发来的数据. 就显示为"xx对你说..". 客服端只要点击用户名。即可给该用户发送数据.

用户端采用第二种方式：ajax持久连接 + 长轮询
ajax持久连接：文档加载完毕后(或其他时机)，使用ajax请求一个php文件
被请求的php文件通过while(true)循环.迟迟不给apache返回数据的目的.
轮询指：请求服务器的时候.如果服务器没有数据.则一直等.当服务器有数据后.就返回给客户端.
这样请求、响应过后就完成了一次HTTP请求. 还没完.客户端收到数据后又到服务器要数据.这就是轮询
就好像一个乞丐一样. 不给他钱，他就一直跟着你要. 你给他钱以后.他还不满足，又跑来找你要.
实现思路：
进入用户端后.如果没有用户名.使用setcookie设置一个用户名.然后通过ajax持久连接. 不停向服务器索要数据(即客服发送给该用户的记录)

数据表设计：
create table liao(
id int auto_increment primary key,
rec varchar(10) not null default '' comment '接收者',
pos varchar(10) not null default '' comment '发送者',
content varchar(30) not null default '' comment '发送内容',
isread tinyint not null default 1 comment '0已读1未读'
)engine myisam charset utf8;

客服端首页：index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
  <script>
    // 将用户发来的数据写到聊天对话框中
    function write_msg(msg){
        msg = eval('('+msg+')');
        $('<p><a href="javascript:;" onclick="setRec(\''+msg.pos+'\');">'+(msg.pos)+'</a>对你说：<br />&nbsp;&nbsp;'+(msg.content)+'</p>').appendTo($('#msgzone'));
    }
    // 添加回复人
    function setRec(pos){
        $('#rec').val(pos);
        $('#comment_btn').val('回复给：'+pos);
    }
    // 回复
    function comment(){
        var rec = $('#rec').val();      // 回复给谁
        var cont = $('#cont').val();    // 回复内容
        if (rec ==''){
            alert('请先选择回复对象');
            return;
        }
        if (cont==''){
            alert('说点什么吧');
            return;        
        }
         
        $.post('comment.php',{rec:rec,cont:cont},function(msg){
            if (msg == 'ok'){
                $('<p>你对'+rec+'说：<br />'+(cont)+'</p>').appendTo($('#msgzone'));
                $('#cont').val('');
            }
        });
    }
 
  </script>
  <style type="text/css">
      #msgzone {width:500px; height:300px; border:1px solid #ccc; padding:10px; overflow:scroll;}
  </style>
 </head>
 
 <body>
  <h1>客服系统 - 客服端</h1>
  <div id="msgzone"></div>
  <iframe src="byiframe.php" width="0" height="0" frameborder="0"></iframe>
  <textarea cols="50" rows="6" id="cont"></textarea>
  <input type="button" value="回复给：" id="comment_btn" onclick="comment();" />
  <input type="hidden" id="rec" value="" />
 </body>
</html>

服务器不断推送未读记录 byiframe.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
/*
客服端
iframe + 服务器推技术 comet、反向ajax
*/
require 'conn.php';
set_time_limit(0);
ob_start();
echo str_repeat(' ',4000);
//ob_flush();
ob_end_flush();
flush();
 
while (true){
    // 查询用户给客服端发送的数据
    $sql = 'select * from liao where isread="1" and rec="admin" order by id desc limit 1';
    $rs = mysql_query($sql,$conn);
    $row = mysql_fetch_assoc($rs);
    if ($row){
        // 将消息设置为已读
        $setRead = 'update liao set isread=0 where id='.$row['id'];
        mysql_query($setRead,$conn);
        $json = json_encode($row);
        echo '<script>parent.write_msg(\''.$json.'\');</script>';
        ob_flush();     // 推给apache
        flush();        // 推给浏览器
    }
 
    sleep(1);
}
?>

客服给用户回复消息comment.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
/*
给用户回复消息
*/
require 'conn.php';
 
$rec = $_POST['rec'];
$pos = 'admin';
$cont = $_POST['cont'];
 
$sql = "insert into liao (rec,pos,content) values ('$rec','$pos','$cont')";
$rs = mysql_query($sql,$conn);
if ($rs){
    echo 'ok';
}
?>

持久连接,如果有信息才把信息返回给客户端.之后连接断开 getuser.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
/*
ajax调用本文件不断向服务器索要数据.如果成功后.break退出循环.
还没完,服务器返回以后.ajax再次调用继续索取
*/
 
if (!isset($_COOKIE['pos'])){
    exit();
}
 
set_time_limit(0);
 
require 'conn.php';
$pos = htmlspecialchars($_COOKIE['pos']);
 
while (true){
    $sql = 'select id,content from liao where isread=1 and rec="'.$pos.'" order by id desc limit 1';
    $rs = mysql_query($sql,$conn);
    $find = mysql_fetch_assoc($rs);
    if ($find){
        $setRead = 'update liao set isread=0 where id='.$find['id'];
        mysql_query($setRead,$conn);
        echo json_encode($find);
        break;
    }
     
    sleep(1);
}
 
?>

不让断开,用户端不断调用getuser.php索要记录 byajax.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
/*
客户端
*/
// 给该用户随机分配一个用户名
if (!isset($_COOKIE['pos'])){
    setcookie('pos','user'.mt_rand(1,100));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
  <script>
     
    // 轮循索要数据
    $(function(){
        var setting = {
            url:'getuser.php',
            dataType:'json',
            success:function(msg){
                $('<p>客服对你说：<br />&nbsp;&nbsp;'+msg.content+'</p>').appendTo($('#msgzone'));
                // 关键：服务器返回信息以后.再去服务器索要.即：轮询
                $.ajax(setting);
            }
        }
        $.ajax(setting);
    })
 
    // 给客服发送数据
    function say(){
        var cont = $('#cont');
        if (cont.val() == ''){
            alert('说点什么吧');
            return;
        }
         
        $.post('toadmin.php',{content:cont.val()},function(msg){
            if (msg!=''){
                $('<p>你对客服说：<br />'+msg+'</p>').appendTo($('#msgzone'));
                cont.val('');
            }
        });
 
    }
  </script>
  <style type="text/css">
      #msgzone {width:500px; height:300px; border:1px solid #ccc; padding:10px; overflow:scroll;}
  </style>
 </head>
 
 <body>
  <h1>客服系统 - 用户端</h1>
  <div id="msgzone"></div>
  <textarea cols="50" rows="6" id="cont"></textarea>
  <input type="button" value="发送" onclick="say();" />
 </body>
</html>

用户向客服发送消息 toadmin.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
/*
向客服发送消息
*/
 
require 'conn.php';
 
if (!isset($_COOKIE['pos'])){
    exit();
}
 
$pos = htmlspecialchars($_COOKIE['pos']);   // 发送者
$rec = 'admin';         // 接收者
$cont = htmlspecialchars($_POST['content']); // 发送内容
 
$sql = "insert into liao (pos,rec,content) value ('$pos','$rec','$cont')";
mysql_query($sql,$conn);
echo $cont;
?>

php开发客服系统(持久连接+轮询+反向ajax)的更多相关文章

  1. php开发客服系统(持久连接+轮询+反向ajax 转载 http://www.tuicool.com/articles/2mU7v2R)

    php开发客服系统( 下载源码 ) 用户端(可直接给客户发送消息) 客服端(点击用户名.即可给该用户回复消息) 讲两种实现方式: 一:iframe + 服务器推技术comet(反向ajax,即服务器向 ...

  2. 用SignalR 2.0开发客服系统[系列2:实现聊天室]

    前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...

  3. 用SignalR 2.0开发客服系统[系列3:实现点对点通讯]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 真的很感谢大家的支持,今天发表系列3 ...

  4. 用SignalR 2.0开发客服系统[系列5:使用SignalR的中文简体语言包和其他技术点]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...

  5. 用SignalR 2.0开发客服系统[系列4:负载均衡的情况下使用SignalR]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...

  6. 用SignalR 2.0开发客服系统[系列1:实现群发通讯]

    前言 交流群:195866844 先说一下我为什么会写这个博客吧,(首先说一下,我是一个小菜鸟,讲的不好请指导 - -,)  前段时间公司的项目涉及到在B/S上使用即时通讯,(其实就是做一个B/S的客 ...

  7. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  8. Linux + .net core 开发升讯威在线客服系统：同时支持 SQL Server 和 MySQL 的实现方法

    前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...

  9. .net core 和 WPF 开发升讯威在线客服系统【私有化部署免费版】发布

    希望 .net 和 WPF 技术时至今日,还能有一些存在感. 这个项目源于2015年前后,当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作.WPF ...

随机推荐

  1. NSSet和NSMutableSet 确保数据的唯一性--备

    NSSet和NSMutableSet是无序的, 但是它保证数据的唯一性.当插入相同的数据时,不会有任何效果.从内部实现来说是hash表,所以可以常数时间内查找一个数据. 1.NSSet的使用 [NSS ...

  2. Android菜单详解（一）——理解android中的Menu

    前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至 ...

  3. 关于 "Context" 模式（基于COM思想IUnknown思想）

    有同事很喜欢用Context模式,觉得是自己"首创", 我有些自己的想法, 或者大家可以发表下自己的观点.   什么是Context模式? 23种设计模式中没有这个模式, 是同事自 ...

  4. 通过JS触发TextBox的ontextchanged事件，并获取TextBox所在GridView的那一行

    protected void txtInsNum_TextChanged(object sender, EventArgs e) { TextBox t = (TextBox)sender; Grid ...

  5. 2015.9.11模拟赛 codevs 4159【hzwer的迷の数列】

    题目描述 Description hzwer找了一个人畜无害的迷の数列…… 现在hzwer希望对这个数列进行一些操作,请你来回答hzwer的问题. 操作一:查询第i个数的大小 操作二:把第i个数的大小 ...

  6. Havel定理

    先贴一个百度百科的注释 Havel定理编辑 本词条缺少概述.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 中文名 Havel定理 外文名 Canisters theorem 特    ...

  7. 关于apriori算法的一个简单的例子

    apriori算法是关联规则挖掘中很基础也很经典的一个算法,我认为很多教程出现大堆的公式不是很适合一个初学者理解.因此,本文列举一个简单的例子来演示下apriori算法的整个步骤. 下面这个表格是代表 ...

  8. [置顶] 如何运行用记事本写的java程序

               今天用记事本写了一个java程序,测试能运行,现在把它分解成几个步骤,利于大家理解:           1. 新建一个记事本,后缀名是  .java  :然后在里面写一段jav ...

  9. Gulp-livereload:实时刷新编码

    实现功能 监听指定目录下的所有文件,实时动态刷新页面 安装(Install) 功能的实现是借助 gulp-connect 插件完成的;所以,首先通过下面命令完成插件安装: npm install -- ...

  10. [置顶] 对于最新的Android病毒，Smack完全可以抵御

    我写的有关Smack和Android系统结合的技术博客,希望有志之士可以参透其中奥妙,Smack作为Linux内核安全模块,已经可以移植到Android系统中,如果大家弄清我写的Smack安全策略,可 ...