反向ajax实现即时聊天程序的业务流程

常规ajax是指客户端->服务端

反向ajax是指服务端->客户端

以下是文件：

1.client.php

<title>用户窗口</title>

<center>

<div>

<div>

<h3>屌丝窗口</h3>

</div>

<div>

<textarea cols="50" rows="8" id="textarea1"></textarea>

</div>

<div>

<textarea cols="40" rows="4" id="textarea2"></textarea>

</div>

<div>

<input type="button" id="btn" value="发送">

</div>

</div>

<center>

<script type="text/javascript" src="./js/jquery.js"></script>

<script type="text/javascript">

$(function(){

$("#btn").on("click",function(){

var content=$("#textarea2").val();

if(content==""){

alert("发送的内容不能为空");die;

}

$.ajax({

type:"post",

url:"toServer.php",

data:"content="+content,

success:function(msg){

var msg=eval(msg);

$("#textarea1").append("你向客服发送:"+msg+"\r\n");

$("#textarea2").val("");

}

})

})

//用ajax轮询的方式从数据库读取客服是否有消息发送给用户

var setting={

"url":"fromServer.php",

"dataType":"json",

success:function(res){

var obj=eval(res);

$("#textarea1").append("客服向你发送:"+obj.content+"\r\n");

$.ajax(setting);

}

};

$.ajax(setting);

})

</script>

2.toserver.php

<?php

//用户向客服发送消息

//连接数据库

require("./connect.php");

//接受数据

$content=$_POST['content'];

//判断数据是否为空

if(!empty($content)){

//添加数据库

$sql="insert into chat_log(rec,sender,content) values('admin','user','$content')";

mysql_query($sql);

echo json_encode($content);

}

3.server.php

<title>客服窗口</title>

<center>

<iframe src="./fromClient.php" width="0" height="0"></iframe>

<div>

<div>

<h3>客服美眉窗口</h3>

</div>

<div>

<textarea cols="50" rows="8" id="textarea1"></textarea>

</div>

<div>

<textarea cols="40" rows="4" id="textarea2"></textarea>

</div>

<div>

<input type="button" id="btn" value="发送">

</div>

</div>

<center>

<script type="text/javascript" src="./js/jquery.js"></script>

<script type="text/javascript">

function showMsg(msg){

var obj=eval(msg);

$("#textarea1").append("user向你发送:"+obj.content+"\r\n");

}

$(function(){

$("#btn").on("click",function(){

var content=$("#textarea2").val();

if(content==""){

alert("发送的内容不能为空");die;

}

$.ajax({

type:"post",

url:"toClient.php",

data:"content="+content,

success:function(msg){

var msg=eval(msg);

$("#textarea1").append("你向用户发送:"+msg+"\r\n");

$("#textarea2").val("");

}

})

})

})

</script>

4.fromclient.php

<?php

//反向ajax原理---http长连接+ob缓存

//实时查询是否有用户向客服发送消息

require('./connect.php');

ob_start();

echo str_repeat("",4096);//填充一些字符串，默认缓存大小为4096

ob_end_flush();

ob_flush();

//$i=1;//死循环

while(true)

{

//echo $i++;

$sql="select * from chat_log where rec='admin' and is_new=1 order by log_id limit 1";

$res=mysql_query($sql,$link);

if($row=mysql_fetch_assoc($res))

{

$sql="update chat_log set is_new=0 where log_id=".$row['log_id'];

mysql_query($sql,$link);

echo "<script>parent.showMsg(".json_encode($row).");</script>";

ob_flush();//ob刷新到web服务器

flush();//输出到浏览器

sleep(1);//每秒刷新一次

}

}

5.toclient.php

<?php

//客服向用户发送消息

//连接数据库

require("./connect.php");

//接受数据

$content=$_POST['content'];

//判断数据是否为空

if(!empty($content)){

//添加数据库

$sql="insert into chat_log(rec,sender,content) values('user','admin','$content')";

mysql_query($sql);

echo json_encode($content);

}

6.fromServer.php

<?php

//查询客服是否有消息发送给用户

require("./connect.php");

set_time_limit(0);

while(true){

$sql="select * from chat_log where rec='user' and is_new=1 order by log_id limit 1";

$res=mysql_query($sql);

if($row=mysql_fetch_assoc($res)){

$sql="update chat_log set is_new=0 where log_id=".$row['log_id'];

mysql_query($sql);

die(json_encode($row));

}

}

7.connect.php

<?php

//连接数据库

$link=mysql_connect('localhost','root','');

mysql_query("set names utf8",$link);

mysql_select_db('mytest');