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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
js漂浮广告实现代码
Aug 15 Javascript
H5上传本地图片并预览功能
May 08 Javascript
jQuery手风琴的简单制作
May 12 jQuery
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php设计模式 Composite (组合模式)
2011/06/26 PHP
提高php编程效率技巧
2015/08/13 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python实现八大排序算法(2)
2017/09/14 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
学python需要去培训机构吗
2020/07/01 Python
简述python Scrapy框架
2020/08/17 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
军训自我鉴定
2013/12/14 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
亮剑观后感600字
2015/06/05 职场文书
《西门豹》教学反思
2016/02/23 职场文书