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 Object与Function使用
Jan 11 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
js正则表达式的使用详解
Jul 09 Javascript
JavaScript网页定位详解
Jan 13 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
JS控制GIF图片的停止与显示
Oct 24 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python抽象类的新写法
2015/06/18 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
专项法律服务方案
2014/06/11 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
党员自我评价范文2015
2015/03/03 职场文书
病假证明模板
2015/06/19 职场文书
高一地理教学工作总结
2015/08/12 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
MySql分区类型及创建分区的方法
2022/04/13 MySQL
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python