JavaScript 데이터 푸시에 대한 자세한 설명 Comet technology_javascript 기술

JavaScript 데이터 푸시는 주로 webapp의 온라인 푸시 서비스 전용입니다. 매번 서버에 Ajax 요청을 보내고 서버에서 로컬로 데이터를 적극적으로 푸시할 필요가 없습니다.

데이터 푸시의 진화 역사:

1. HTTP 프로토콜 단순 폴링, 링크 유지 또는 프론트엔드를 통해 백엔드로 지속적으로 요청 전송

2. H5 업데이트 이후 WebSocket은 양방향 및 단방향 데이터 푸시 편의성이 대폭 향상되었습니다

3. SSE(Server-Send Event): 서버가 데이터를 푸시하는 새로운 방식

Comet: HTTP 긴 연결 기반 서버 푸시 기술
이 수업에서는 Comet을 소개합니다. Comet은 HTTP 긴 연결을 기반으로 하는 서버 푸시 기술입니다. 서버는 클라이언트가 명시적으로 요청하지 않고도 비동기 방식(Ajax 요청 무한 루프)으로 클라이언트 프로그램에 데이터를 적극적으로 푸시합니다. Comet 아키텍처는 주식 거래 분석, 채팅방 및 웹 기반 온라인 게임과 같이 강력한 상호 작용과 실시간 성능이 필요한 이벤트 중심 웹 애플리케이션 및 애플리케이션에 매우 적합합니다.

1. 먼저 json 데이터를 요청하는 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">
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
  }
 });
</script>

data.php

<&#63;php 
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
&#63;>

이런 방식으로 프런트엔드는 백엔드 데이터를 얻어서 출력할 수 있습니다. 지속적으로 데이터를 프런트엔드로 보내는 백엔드를 시뮬레이션해 보겠습니다.

한 가지 방법은 프런트엔드 루프에서 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

<&#63;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);
&#63;>

그러나 이러한 연결 폴링은 매우 명백하게 네트워크 요청을 낭비합니다. 또한 백엔드 서버가 루프에서 이 작업을 수행하도록 할 수도 있습니다

3. 기본 Ajax, 서버가 가끔씩 푸시합니다(백엔드 루프, ob_flush() 및 플러시()를 사용하여 데이터를 뱉어냄)

data.php

<&#63;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(); //缓存吐到浏览器
}
&#63;>

프런트엔드 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("");

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.