javascript和jQuery实现网页实时聊天的ajax长轮询


Posted in Javascript onJuly 20, 2016

介绍

大家都知道,HTTP协议是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点:

1、支持客户/服务器模式;

2、简单快速;

3、灵活;

4、无连接;

5、无状态。

所以一次的请求都是一个单独的事件,和前后都没有联系。所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息。

一直以来的方式无非有这么几种:

1、长连接,即服务器端不断开联系,PHP服务器端用ob系列函数来不停的读取输出,但是相当耗费服务器资源。

2、Flash socket,flash的as3语言,创建一个socket服务器用来处理信息。

3、轮询,顾名思义就是不停地发送查询消息,一有新消息立刻更新,但是会有多次无用请求。

4、长轮询,是轮询的升级版,需要服务器端的配合。

5、websocket,HTML5的通信功能,建立一个与服务器端的专用接口ws协议来进行通讯,兼容可能成为问题。

这篇博文总结一下用JS和JQ两种方式(其实不同就是js和jq的实现),实现AJAX长轮询。

长轮询的思想:

javascript和jQuery实现网页实时聊天的ajax长轮询

如图:用AJAX发送询问信息,服务器在没有信息要返回的时候进入无限等待。由于AJAX异步的特性,PHP在服务器端执行等待不会影响到页面的正常处理。一旦服务器查询到返回信息,服务器返回信息,AJAX用回调函数处理这条信息,同时迅速再次发送一个请求等待服务器处理。

与传统轮询相比,长轮询在服务器没的返回信息的时候进入等待,减少了普通轮询服务器无数次的空回复。可以这样认为,长轮询使服务器每次的返回更有目的性,而不是盲目返回。

长轮询的服务器端实现:

聊天信息存储:

数据库设计为信息ID(msgid),发送人(sender),接收人(receiver),信息内容(content),设置senderRead和receiverRead的目的是标记信息是否已被读取,读取后改变标记,以区别信息是否已经被读取。

create table msg{

msgid int not null primary key auto_increment,


sender char(16) not null,


receiver char(16) not null,


content text, //信息内容用text类型,存储量可达到65535字符


senderRead tinyint enum(0,1) default 0,


receiverRead tinyint enum(0,1) default 0 //设置一个是否已读的flag标记

}

PHP脚本:

 脚本的主要目的是处理来自ajax的每次询问,ajax每次询问就查询一下数据库,看有没有新的信息,如果没有,刚用usleep()函数等待一秒后再次查询,直到有新信息插入数据库并被查到,脚本返回查询到的数据,并退出无限循环,结束脚本。

set_time_limit(0);//设置脚本超时时间为无限,不然在过了超时时间后脚本会自动关闭,轮询失败。
 $link=new mysqli("host","user","password","database");
 $search="select sender,receiver,content from msg where receiverRead=0 limit 1";//限制每次读出一条数据,便于修改其已读flag
 $change="update chat set receiverRead=1 where receiverRead=0 limit 1";
 while (true) { //进入无限循环
 
$res=$link->query($sql); //查询结果
  
 if($res->num_rows!=0){ //当有未读信息时读取信息
  


$link->query($change);//将信息的已读flag设为1
  


$msg=$res->fetch_assoc();
  


$jsonstr=json_encode($msg);//取到信息,将信息用转码为json格式,返回给JS
  


echo $jsonstr;
  


break;//输出信息后退出while循环,结束当前脚本
 

}
 
usleep(1000);//如果没有信息不会进入if块,但会执行一下等待1秒,防止PHP因循环假死。
 }

客户端实现:

客户端的主要任务是设置一个ajax请求函数,每次查询时被调用,当没有信息返回时,服务器端被搁置,当前页面正常执行;当有信息返回时,函数处理返回的数据,并迅速再次调用此函数发送一次请求。

用原生JS:

function link(){
 var xhr=null;//先设置xhr为空,为了轮询时再次调用函数对xhr重用,引发错误
 xhr=new XMLHttpRequest();
 xhr.open('GET','serviceback.php',true);//第三个参数一定要设置为true,异步不阻塞,不会影响到后面JS的执行。
 xhr.send();
 xhr.onreadystatechange=function(){
 
if (xhr.readyState==4) { 严密也可加使用(xhr.readyState==4 && xhr.status ==200)限定服务器响应码为200时才进行处理。
    

if(xhr.responseText!=''){
   



process... //服务器端返回信息,且返回信息不为空,则开始处理返回信息。
  


}
  
setTimeout("link()",300);
//递归再次调用link()函数,用setTimeOut()设置延时是因为服务器端进行sql操作时会耗时,当有新信息时,在服务器将要置已读flag为1还未成功时,AJAX可能已经又发出多条查询信息了,会导致一条信息多次返回。
  
}
 };
}

用jQuery插件实现:

var link={ 



//jQuery的AJAX执行的配置对象
  type:"GET",


//设置请求方式,默认为GET,
  async:true,


//设置是否异步,默认为异步
  url:"customback.php",
  dataType:"json",

//设置期望的返回格式,因服务器返回json格式,这里将数据作为json格式对待
  success:function (msg){
   
 process...
   
setTimeout("link()",300);
  }






//成功时的回调函数,处理返回数据,并且延时建立新的请求连接
}
$.ajax(link);




//执行ajax请求。
]

程序扩充:

添加发送聊天窗口:

新建一个函数用来处理ajax的POST请求,用ajax将发信人,每次发送的信息,收信人发送到服务器端,并设置一个单独的PHP脚本处理信息,将信息插入数据库。

需要注意的是,用JS原生实现POST请求发送信息时,要设置ajax对象的HTTP头,模拟表单提交的操作:

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

聊天室消息处理:

为了防止每次都查询到全部信息,我们对数据库的查询操作更改一下,设置idflag=0,每次查询后,设置idflag为查询到的数据的id,查询时我们查询比idflag大的ID,即,新添加进去的信息。

好了,本文到此就结束了,利用本文的示例代码一个简单的聊天室程序就做好了,感兴趣的可以快快实践下了。

Javascript 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
生成二维码方法汇总
Dec 26 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
Node.js如何自动审核团队的代码
Jul 20 #Javascript
js只执行1次的函数示例
Jul 20 #Javascript
JQuery为元素添加样式的实现方法
Jul 20 #Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 #Javascript
javaScript给元素添加多个class的简单实现
Jul 20 #Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 #Javascript
JavaScript DOM 对象深入了解
Jul 20 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
一步一步学习PHP(8) php 数组
2010/03/05 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python中list初始化方法示例
2016/09/18 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python中 map()函数的用法详解
2018/07/10 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
企业管理培训感言
2014/01/27 职场文书
安全生产大检查方案
2014/05/07 职场文书
师范类求职信
2014/06/21 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
小学毕业教师寄语
2019/06/21 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers