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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript版代码高亮
2006/06/26 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python正则表达式使用经典实例
2016/06/21 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python如何调用JS文件中的函数
2019/08/16 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
八一演出活动方案
2014/02/03 职场文书
2014信息公开实施方案
2014/02/22 职场文书
世博会口号
2014/06/20 职场文书
公司文体活动总结
2015/05/07 职场文书
怎样写好工作计划
2019/04/10 职场文书