视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript数据推送Comet技术详解_javascript技巧
2020-11-27 20:53:14 责编:小采
文档


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



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



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 '
'; ob_flush(); //
输出缓存,必须和flush()一起使用 flush(); //缓存吐到浏览器 } ?>

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



下载本文
显示全文
专题