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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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
php调用c接口无错版介绍
2014/03/11 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
前端性能优化建议
2020/09/17 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
你常见到的runtime exception
2016/09/05 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
软件售后服务方案
2014/05/29 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
党建工作整改措施
2014/10/28 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
环保宣传语大全
2015/07/13 职场文书
公司人事管理制度
2015/08/05 职场文书
护士业务学习心得体会
2016/01/25 职场文书