欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript数据推送Comet技术详解_javascript技巧

程序员文章站 2022-04-15 21:33:47
...
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

'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
?>

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

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

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

index.html

data.php

'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
?>

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

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

data.php

'ok', 'text'=>'我是测试的文本');
 // echo json_encode($res);
 sleep(1);
 $radom = rand(1,999);
 echo $radom;
 echo '
'; ob_flush(); //输出缓存,必须和flush()一起使用 flush(); //缓存吐到浏览器 } ?>

前台js(原生js实现ajax,并当状态改变时,进行输出) 参考:http://www.jb51.net/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程序设计有所帮助。