JavaScript数据推送Comet技术详解


Posted in Javascript onApril 07, 2016

JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地。

数据推送进化史:

1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求

2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性

3. SSE(Server-Send Event):服务器推送数据的新方式 

Comet:基于 HTTP 长连接的服务器推送技术
本课时介绍Comet:基于 HTTP 长连接的服务器推送技术,Comet 是一种 Web 应用架构。服务器端会主动以异步的方式向客户端程序推送数据(Ajax请求死循环),而不需要客户端显式的发出请求。Comet 架构非常适合事件驱动的 Web 应用,以及对交互性和实时性要求很强的应用,如股票交易行情分析、聊天室和 Web 版在线游戏等。

 1.先来看一个最简单的ajax请求json数据例子:

index.html

<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
  }
 });
</script>

data.php

<?php 
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
?>

这样前端就能获取后端数据并输出。下面我们来模拟后端不断推送数据到前端:

一种办法是前端循环不断发送ajax请求

2.前端jQuery的Ajax不断发送请求:

index.html

<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function conn(){
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
   conn();
  }
 });
}
conn(); 
</script>

data.php

<?php 
header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //设置没有缓存
sleep(1);
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
?>

但是这样的连接轮询,网络请求浪费非常明显,我们也可以让后端服务器来循环做这件事情,看下面例子

3.原生Ajax,服务器隔一段时间推送一次(后端循环,用ob_flush()和flush()吐数据)

data.php

<?php 
// header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //设置没有缓存
$i = 0;
while ($i<9) {
 $i++;
 // $res = array('success'=>'ok', 'text'=>'我是测试的文本');
 // echo json_encode($res);
 sleep(1);
 $radom = rand(1,999);
 echo $radom;
 echo '<br/>';
 ob_flush(); //输出缓存,必须和flush()一起使用
 flush(); //缓存吐到浏览器
}
?>

前台js(原生js实现ajax,并当状态改变时,进行输出) 参考:https://3water.com/article/82085.htm

var getXmlHttpRequest = function() {
 if (window.XMLHttpRequest) {
  //主流浏览器提供了XMLHttpRequest对象
  return new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  //低版本的IE浏览器没有提供XMLHttpRequest对象
  //所以必须使用IE浏览器的特定实现ActiveXObject
  return new ActiveXObject("Microsoft.XMLHttpRequest");
 }

};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
 console.log(xhr.readyState);
 if (xhr.readyState === 3 && xhr.status === 200) {
  //获取成功后执行操作
  //数据在xhr.responseText
  console.log(xhr.responseText);
 }
};
xhr.open("get", "data.php", true);
xhr.send("");

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
关于vue面试题汇总
Mar 20 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
js实现商品抛物线加入购物车特效
Nov 18 #Javascript
js类式继承与原型式继承详解
Apr 07 #Javascript
javascript原型继承工作原理和实例详解
Apr 07 #Javascript
浅析JS原型继承与类的继承
Apr 07 #Javascript
AngularJs 弹出模态框(model)
Apr 07 #Javascript
详解AngularJS 模态对话框
Apr 07 #Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 #Javascript
You might like
PHP 读取文件的正确方法
2009/04/29 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
php 数据结构之链表队列
2017/10/17 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python二分查找详解
2015/09/13 Python
python实现内存监控系统
2021/03/07 Python
django修改models重建数据库的操作
2020/03/31 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
python时间time模块处理大全
2020/10/25 Python
python pillow库的基础使用教程
2021/01/13 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
总裁岗位职责
2013/12/04 职场文书
运动会广播稿80字
2014/01/23 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
环卫处个人工作总结
2015/03/04 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL