웹 실시간 통신 방법 총결산

1. 개요
1. 웹 사이트 인스턴트 메시징 기술
실시간 통신 기술은 간단하게 말하면 이런 기능을 실현한다. 서버 측은 데이터의 업데이트나 변화를 클라이언트에게 실시간으로 반응할 수 있다. 예를 들어 메시지의 실시간 전송 등 기능은 모두 이런 기술을 통해 실현된다.그러나 웹에서 브라우저의 제한으로 인해 실시간 통신을 실현하려면 몇 가지 방법을 빌려야 한다.이러한 제한이 발생하는 주요 원인은 일반적인 웹 통신은 브라우저가 먼저 요청을 서버에 보내고 서버가 응답하여 데이터의 현실 업데이트를 완성하는 것이다.
2. 웹 사이드의 실시간 통신을 실현하는 방법
실시간 통신을 실현하는 데는 주로 네 가지 방식이 있는데 그것이 바로 짧은 폴링, 긴 폴링(comet), 긴 연결(SSE), 웹소켓이다.그것들은 크게 두 종류로 나눌 수 있는데 하나는 HTTP를 바탕으로 이루어진 것으로 짧은 윤문,comet과 SSE를 포함한다.HTTP 기반이 아닌 다른 하나는 WebSocket입니다.다음은 이 네 가지 윤문 방식과 각자의 장단점을 소개한다.
(1) 짧은 폴링
짧은 윤문의 기본적인 사고방식은 브라우저가 일정 시간마다 브라우저에 http 요청을 보내는 것이다. 서버 측은 요청을 받은 후에 데이터 업데이트가 있든 없든 직접 응답한다.이런 방식으로 이루어진 실시간 통신은 본질적으로 브라우저가 요청을 보내고 서버가 요청을 받아들이는 과정이다. 클라이언트가 끊임없이 요청을 하게 함으로써 클라이언트가 실시간으로 서버 측의 데이터를 받는 변화를 모의할 수 있다.
이런 방식의 장점은 비교적 간단하고 이해하기 쉬우며 실현하기에 기술적인 난점도 없다는 것이다.단점은 뻔하다. 이런 방식은 http 연결을 끊임없이 구축해야 하기 때문에 서버 측과 클라이언트의 자원을 심각하게 낭비했다.특히 클라이언트의 경우 거리로 볼 때 수량급이 비교적 큰 사람에게 짧은 휠체어 조회를 기반으로 하는 응용에 위치하고 싶다면 모든 사용자의 클라이언트는 서버 측에 http 요청을 미친 듯이 보내고 끊기지 않을 것이다.인원수가 많을수록 서버 측의 압력이 높아지는 것은 매우 불합리하다.
따라서 짧은 폴링은 온라인 사용자 수가 많고 성능을 중시하는 웹 응용 프로그램에는 적용되지 않는다.
(2)comet
comet은 서버가 클라이언트가 보낸 요청을 받은 후 직접 응답하지 않고 이 요청을 끊고 서버 측 데이터가 업데이트되었는지 판단하는 것을 말한다.업데이트가 있으면 응답하고, 데이터가 없으면 일정한 시간 제한(서버 측 설정)에 도달한 후 연결을 닫습니다.
긴 문의와 짧은 문의에 비해 불필요한 http 요청 횟수가 현저히 줄어들었고 이에 비해 자원을 절약했다.긴 윤문의 단점은 연결이 끊겨도 자원의 낭비를 초래할 수 있다는 점이다.
(3)SSE
SSE는 HTML5에 추가된 기능으로 모두 Server-SentEvents라고 합니다.그것은 서비스가 클라이언트에게 데이터를 전송할 수 있도록 허용할 수 있다.SSE는 본질적으로 이전의 긴 문의, 짧은 문의와 달리 http 프로토콜을 바탕으로 하지만 문의는 클라이언트가 먼저 요청을 보내야 한다.SSE의 가장 큰 특징은 클라이언트가 요청을 보내지 않아도 서버 측 데이터가 업데이트되면 바로 클라이언트에게 보낼 수 있다는 것이다.
SSE의 장점은 매우 뚜렷하다. 대량의 클라이언트가 서버로 보내는 요청을 구축하거나 유지할 필요가 없고 많은 자원을 절약하여 응용 성능을 향상시킨다.그리고 SSE의 구현은 매우 간단하며 다른 플러그인에 의존할 필요가 없다고 설명할 것입니다.
(4)WebSocket
웹소켓은 HTML5가 정의한 새로운 프로토콜로 전통적인 http 프로토콜과 달리 이 프로토콜은 서버와 클라이언트 간의 전이중 통신을 실현할 수 있다.간단하게 말하자면 우선 클라이언트와 서버에 연결을 구축해야 하는데 이 부분은 http가 필요하다.연결이 일단 구축되면 클라이언트와 서버 측은 평등한 위치에 있고 서로 데이터를 보낼 수 있으며 요청과 응답의 차이가 없다.
WebSocket의 장점은 양방향 통신을 실현했다는 것이다. 단점은 서버 측의 논리가 매우 복잡하다는 것이다.현재 백그라운드 언어에 따라 다른 플러그인을 사용할 수 있습니다.
3. 네 가지 웹 인스턴트 통신 기술 비교
호환성 측면에서 볼 때 짧은 폴링 > 긴 폴링 > 긴 연결 SSE > WebSocket;
성능 측면에서 WebSocket > 긴 연결 SSE > 긴 폴링 > 짧은 폴링
2. 짧은 폴링
1. 원리
짧은 문의는 http의 요청/응답 모드를 이용하여 일정한 시간마다 서버에 요청을 발송하여 서버 데이터의 업데이트를 얻는다.개발 과정에서 aax를 이용하여 setInterval () 방법을 통해 일정 시간마다 서버에 요청을 보내는 기능을 실현할 수 있다.
2. 실현
백엔드는 php를 예로 들어 실현된다.
클라이언트 코드:

    

        

    


    function showUnreadNews(){
            $(document).ready(function() {
// jquery ajax 
                $.ajax({
                  type: "GET",
                  url: “do.php",  // php 
                  dataType: "json",
       // ， 
                  success: function(msg) {
                      $.each(msg, function(id, title) {
                          $("#news").append("<a>" + title + "</a><br>");
                      });
                  }
               });
            });
        }
 // 2s showUnreadNews() ， 
        setInterval('showUnreadNews()',2000);

서버 사이드 코드(php):

' ','text'=>' ');   // 
echo json_encode($arr);  // öson 
?>

3. comet
1. 원리
comet과 전통적인ajax의 차이점은 클라이언트는 서버 측과 긴 연결을 유지하고 클라이언트가 필요로 하는 데이터가 업데이트될 때만 서버가 자발적으로 데이터를 클라이언트에게 전달할 수 있다는 것이다.comet의 실현은 두 가지 방식이 있는데 하나는 aax를 바탕으로 하는 긴 윤문이고, 다른 하나는 Iframe와 htmlfile를 바탕으로 하는 흐름 방식이다.aax를 기반으로 하는 장거리 조회 방식에서 서버 측은 클라이언트 aax가 보낸 요청을 받은 후 즉시 응답으로 돌아가지 않고 시간이 초과되거나 데이터 업데이트가 있을 때까지 요청을 막습니다.서버 측이 상기 상황에서 응답을 되돌린 후 클라이언트는 js를 통해 다시 요청을 보내서 연결을 만들고 상기 절차를 반복합니다.
2. 실현
클라이언트 코드:

 


$(function(){
        $("#btn").bind('click',{btn:$('#btn')},function(e){
            $.ajax({
                type: 'POST',
                dataType: 'json',               
                url: 'ajax.php',
                timeout: '20000',// 
                data: {time: '2000000'},//  ， 
                success: function(data,status){
// 
                    if(data.success == '1'){
                    $("#msg").append('<br>[ ]'+data.text);
                    e.data.btn.click();  // 
                }
                    //  
                      if(data.success == '0'){
                        $("#msg").append('<br>[ ]');
                            e.data.btn.click();
                    }
                },
                // ajax , 
                error:function(XMLHttpRequest,textStatus,errorThrown){
                     if(textStatus == "timeout"){
                        $("#msg").append(' ');
                        e.data.btn.click();
                     }
                }
          });
        });
    });


 (php)：

'1','name'=>' ','text'=>$rand);
          echo json_encode($arr);
          exit();
      }else{
          $arr = array('success'=>'0','name'=>' ','text'=>$rand);
          echo json_encode($arr);
          exit();
      }
   }
?>

4, SSE
1. 원리
SSE는 클라이언트에 의존하여 서버에 요청을 보낼 필요가 없고 서버 측에서 데이터 업데이트가 있을 때 클라이언트에게 직접 발송할 수 있다. 이는 윤문의'데이터 끌기'에 비해 낮은 지연과 고성능의 장점을 가진다.
이런 방법의 서버 측은 매우 간단하여 한 서버와 클라이언트 간의 협의를 유지하면 된다.프런트엔드에서 EventSource 객체를 사용합니다.
서버 측에서 제공해야 할 프로토콜 기본 코드는 다음과 같습니다.
data:firstevent
data:secondevent
id:100
event:myevent
data:thirdevent
id:101
:thisisacomment
data:fourthevent
data:fourtheventcontinue
다음은 기본 용법을 설명해 드리겠습니다.각 이벤트를 정의하려면 각 이벤트 간에 줄 바꿈으로 구분합니다.모든 이벤트 내부에 여러 줄이 있을 수 있으며, 모든 줄은 type:value의 형식입니다.유형에는 다음 세트가 있습니다.
(1) 유형은 공백으로 처리될 때 무시되는 행이 주석임을 나타냅니다.
(2) 형식은 데이터로 이 줄에 데이터가 포함되어 있음을 나타낸다.데이터로 시작하는 줄은 여러 번 나타날 수 있습니다.이 모든 줄은 이 사건의 데이터입니다.
(3) 형식은 이벤트로 이 줄이 이벤트를 설명하는 형식을 나타냅니다.브라우저에서 데이터를 받을 때 해당 유형의 이벤트가 발생합니다.
(4) 형식은 id로 이 줄이 이벤트를 설명하는 식별자를 표시합니다.
(5) 형식은retry입니다. 이 줄은 브라우저가 연결이 끊긴 후에 다시 연결하기 전의 대기 시간을 표시하는 데 사용됩니다.
예를 들어 위의 첫 번째 이벤트는 하나의 데이터만 전송했고 데이터 내용은firstevent이다.서버 측은 이 목록을 통해 클라이언트에게 보내면 전단을 통해 새로운 데이터 읽기, 인터페이스 업데이트 등 응답 처리를 할 수 있다.
클라이언트는 EventSource 객체를 JavaScript에서 사용해야 합니다.
먼저 EventSource 객체를 초기화해야 합니다. 인스턴스화할 때 상호 작용하는 서버 측의 파일 주소를 전송해야 합니다. 예를 들어
vares=newEventSource(“sse.php”);
다음은 사건에 대한 감청이 가능하다.EventSource는 다음과 같은 세 가지 표준 이벤트를 제공합니다.
open 서버와 연결에 성공했을 때 실행
메시지 서버에서 보내는 이벤트를 받았을 때 실행
오류가 발생했을 때 error 실행
일반적인 이벤트와 마찬가지로 다음 두 가지 방법으로 이러한 이벤트를 사용할 수 있습니다.
es.onmessage=function(e){};
es.addEventListener(“message”,function(e){});
2. 실현
서버 사이드 코드(php):
header('Content-Type: text/event-stream');//이것은 sse를 위한 데이터 형식입니다. $time =date ('Y-m-d H:i:s');//다음 echo에서 나온 것은 위에서 말한 서버 측과 클라이언트 간의 프로토콜 echo'retry: 3000'입니다.PHP_EOL;//retry 형식의 데이터로 브라우저가 연결이 끊어진 후에 다시 연결하기 전의 대기 시간 echo'data: The server time is:'.$를 지정합니다.time.PHP_EOL.PHP_EOL; ?> 콘텐츠-type을 text/event-stream으로 설정해야 합니다. 이것은 SSE를 위한 데이터 전송 형식입니다.
다음은 php의 echo 출력 프로토콜을 통해 위의 코드가 출력한 결과는 다음과 같습니다.
retry:3000
data:Theservertimeis...
이벤트를 출력했습니다. 이 이벤트에서 각각retry 형식과 데이터 형식의 줄을 정의했습니다.
클라이언트 코드: var es = new EventSource("sse.php"); es.addEventListener("message",function(e){ document.getElementById("content").innerHTML += "
"+e.data; });
위의 코드는 먼저 EventSource 대상을 실례화하고 통신하는 서버 쪽 파일sse로 전송합니다.php.addEventListener () 방법을 사용하여 대상에 메시지 이벤트를 연결합니다. (위에서 언급한 메시지는 서버에서 보낸 이벤트를 받을 때 실행됩니다.)클라이언트가 서버에서 전송된 프로토콜을 받았을 때 페이지에 데이터를 추가합니다. e.data를 통해 서버 측 파일에서 프로토콜 테이블의 데이터 형식에 대한 정의된 데이터, 즉 Theservertimeis...
5. WebSocket
1. 원리
WebSocket의 연결은 쌍방 통신의 기능을 실현했다.먼저 클라이언트가 WebSocket 요청을 보내고 서버 측이 응답하여 TCP 악수와 같은 동작을 실현한다.이 연결이 일단 구축되면 클라이언트와 서버 사이를 유지하고 양자 간에 데이터의 상호 전송을 직접 할 수 있다.서버 측의 논리는 비교적 복잡하다.java나node 개발이라면 봉인된 구성 요소가 많이 사용된다.
2. 프런트엔드 API
(1) WebSocket 객체 만들기
varws=newWebSocket(“ws//localhost:8080”);
WebSocket은 HTTP와 다른 프로토콜로 매개 변수 전달의 ws://접두사는 http:/와 유사하며 프로토콜을 위한 성명입니다.
(2) 이벤트 작업
WebSocket은 다음과 같은 네 가지 이벤트 작업을 제공합니다.
onmessage가 서버 응답을 받았을 때 실행
onerroe 이상 발생 시 실행
onopen 연결 시 실행
onclose 연결 해제 시 실행