일반적인 웹 애플리케이션의 경우 대부분의 개발자는 낯선 사람이 아닙니다. 웹 응용 프로그램에서 대화식 요청/ 응답 모드는 브라우저와 서버간에 사용됩니다. 브라우저는 요청을 발행하고 서버는 요청에 따라 해당 응답을 생성합니다. 브라우저는 사용자에 대한 응답 수신으로 처리됩니다. 응답 형식은 HTML, XML 또는 JSON 일 수 있습니다. REST 아키텍처 스타일과 AJAX의 인기를 통해 서버는 JSON을 응답 데이터 형식으로 사용합니다. 웹 응용 프로그램은 XMLHTTPREQUEST 객체를 사용하여 요청을 보내고 서버에서 반환 한 데이터에 따라 페이지의 내용을 동적으로 업데이트합니다. 일반적으로, 마우스를 클릭하거나 이동하는 것과 같은 페이지의 사용자의 작업은 해당 이벤트를 트리거합니다. 요청은 xmlhttprequest 객체에 의해 발행되며 서버가 응답 한 후 페이지에 로컬 업데이트가 있습니다. 이 방법의 결함은 서버에서 생성 된 데이터에 제 시간에 브라우저를 알릴 수 없지만 다음 요청이 전송 될 때까지 브라우저에서 얻어야한다는 것입니다. 시간 데이터 요구 사항이 높은 일부 응용 프로그램의 경우이 지연은 용납 할 수 없습니다. 이러한 애플리케이션의 요구를 충족시키기 위해서는 서버에서 브라우저로 데이터를 푸시하여 서버 측의 데이터를 처음으로 사용자에게 알릴 수 있도록 몇 가지 방법이 필요합니다. 두 가지 범주로 나눌 수있는 많은 일반적인 솔루션이 있습니다. 이 두 방법의 차이점은 HTTP 프로토콜을 기반으로하는지 여부입니다. HTTP 프로토콜을 사용하지 않는 관행은 HTML 5의 새로운 WebSocket 사양을 사용하는 것이며 HTTP 프로토콜을 사용하는 방법에는 간단한 회전, 혜성 기술 및이 기사에 설명 된 HTML 5 서버 푸시 이벤트가 포함됩니다. 이 기술은 아래에 소개됩니다.
간단한 소개HTML 5 서버 푸시 이벤트를 도입하기 전에 먼저 위에서 언급 한 서버 -사이드 데이터 푸시 기술 수를 소개합니다. 첫 번째는 WebSocket입니다. WebSocket 사양은 HTML 5의 중요한 부분이며 많은 주류 브라우저에서 지원되었으며 WebSocket을 기반으로 개발 한 많은 응용 프로그램이 개발되었습니다. 이름이 표현되는 것처럼 WebSocket은 TCP 프로토콜을 기반으로 재킷 연결을 사용합니다. WebSocket을 사용한 후 실제로 서버와 브라우저간에 일련의 워드 연결을 구축하며, 이는 두 가지 방법 데이터로 전송할 수 있습니다. WebSocket의 기능은 매우 강력하며 사용하기에 유연하며 다양한 시나리오에 적합 할 수 있습니다. 그러나 WebSocket 기술은 서버의 구현 및 일반 웹 응용 프로그램과 다른 브라우저 측면을 포함하여 상대적으로 복잡합니다.
WebSocket을 제외하고 다른 구현 방법은 실시간 푸시의 효과를 달성하기위한 HTTP 프로토콜을 기반으로합니다. 첫 번째 방법은 간단한 회전입니다. 즉, 브라우저는 수시로 서버에 요청을 보내서 데이터 업데이트가 있는지 확인합니다. 이 접근법은 비교적 간단하며 문제를 어느 정도 해결할 수 있습니다. 그러나 회전의 시간 간격을 신중하게 고려하십시오. 회전 간격이 너무 길면 사용자가 제 시간에 업데이트 된 데이터를 수신하지 않으면 쿼리 요청이 너무 많아서 서버 측의 부담이 증가합니다.
혜성 기술은 긴 휠 텍스트를 사용하여 간단한 회전의 단점을 향상 시켰습니다. 긴 회전에 대한 각 요청에 따라 서버는 응답이 완료된 직후에 닫지 않고 일정 시간 동안 연결을 유지합니다. 이점의 장점은 연결이 열리는 기간 내에 서버에서 생성 된 데이터 업데이트를 제 시간에 브라우저로 반환 할 수 있다는 것입니다. 긴 연결이 닫히면 브라우저는 즉시 새로운 긴 연결을 열어 요청을 계속합니다. 그러나 혜성 기술을 구현하려면 서버와 브라우저 측에서 세 번째 파티 라이브러리를 지원해야합니다. 요약 비교에서, 위에서 언급 한 4 가지 기술은 결함으로 인해 사용하는 것이 권장되지 않습니다. 혜성 기술은 HTML 5 표준의 일부가 아닙니다. WebSocket 사양 및 서버 푸시 기술은 HTML 5 표준의 일부입니다. 그러나 WebSocket 사양은 더 복잡하고 복잡 해야하는 장면과 2 개의 웨이 데이터 통신에 적합합니다. 간단한 서버 데이터 푸시 시나리오의 경우 서버 푸시 이벤트를 사용하는 것으로 충분합니다.
브라우저 지원 측면에서, 서버 푸시 이벤트는 IE를 제외한 대부분의 데스크탑 및 모바일 브라우저에서 지원되었습니다. 지원 서버 푸시 이벤트의 브라우저 및 버전에는 Firefox 6.0+, Chrome 6.0+, Safari 5.0+, Opera 11.0+, iOS Safari 4.0+, Opera Mobile 11.1+, Android 25.0+ 용 Chrome, Andr Andr Oid 19.0 용 Chrome. + 및 BlackBerry 브라우저 7.0+ et al. IE의 지원에는 다음 장에서 자세한 소개가 소개됩니다.
서버 푸시 이벤트 사양의 다음 사양이 지정되어 있습니다.
사양서버에 대한 이벤트 사양은 HTML 5 사양의 필수 부분입니다. 이 사양은 주로 두 부분으로 구성된 비교적 간단합니다. 첫 번째 부분은 서버와 브라우저 측의 통신 프로토콜이며, 두 번째 부분은 브라우저에서 JavaScript를 사용하는 데 사용하는 EventSource 객체입니다. 통신 프로토콜은 순수한 텍스트를 기반으로 한 간단한 프로토콜입니다. 서버의 응답 내용은 텍스트/이벤트 스트림입니다. 응답 텍스트의 내용은 다른 이벤트로 구성된 이벤트 흐름으로 간주 될 수 있습니다. 각 이벤트는 유형과 데이터의 두 부분으로 구성되며 각 이벤트에는 선택적 식별자가있을 수 있습니다. 다른 이벤트의 내용은 자동차 입력과 왕실 기호 만 포함하는 빈 줄 (/r/n)으로 분리됩니다. 각 이벤트의 데이터는 여러 줄로 구성 될 수 있습니다. 코드 목록 1은 서버 -사이드 응답의 예를 제공합니다.
서버 -사이드 응답의 예데이터 : 첫 번째 EventData : SecondId : 100Event : MyEventData : Third EventID : 101 : 이것은 주석 데이터 : Fouteh EventData : Fours Event Contoint입니다.
목록 1에 표시된 것처럼 각 이벤트는 빈 줄로 분리됩니다. 각 선에 대해, 결장 (:)는 이전 선의 유형이며 결장 뒤의 해당 값입니다. 가능한 유형은 다음과 같습니다.
위의 코드에는 Data First 이벤트가 포함되어 있으며, 두 번째 이벤트는 100입니다 이 행사는 Fours Event/Nfounth Eovent는 계속됩니다. 여러 줄의 데이터 라인이 있으면 실제 데이터는 라인 변경에 대한 데이터로 연결됩니다.
서버에서 반환 한 데이터에 이벤트의 식별자가 포함 된 경우 브라우저는 최근에 수신 된 이벤트의 식별자를 기록합니다. 서버에 대한 연결이 중단되면 브라우저 종료가 다시 연결되면 HTTP Head-Event-ID가 이벤트를 마지막으로 얻는 로고입니다. 서버는 브라우저 측에서 전송 된 이벤트 식별자에 의해 결정될 수 있으므로 연결을 계속하기 시작하는 이벤트를 결정합니다.
서버 측에서 반환 된 응답의 경우 브라우저 측은 처리를 위해 javaScript의 eventSource 객체를 사용해야합니다. EventSource는 표준 이벤트 모니터링 방법을 사용하여 해당 이벤트 처리 방법 만 객체에 추가하면됩니다. EventSource는 표 1과 같이 세 가지 표준 이벤트를 제공합니다.
표 1. EventsOURCE 객체가 제공하는 표준 이벤트| 이름 | 설명 | 이벤트 처리 방법 |
| 열려 있는 | 서버와의 연결이 성공적으로 설정되면 | Onopen |
| 메시지 | 이벤트가 서버가 보낸시 | onmessage |
| 오류 | 오류가 발생한 경우 | onerror |
앞에서 언급했듯이 서버는 사용자 정의 유형 이벤트를 반환 할 수 있습니다. 이러한 이벤트의 경우 addeventListener 메소드를 사용하여 해당 이벤트 처리 방법을 추가 할 수 있습니다. 코드 목록 2는 EventsOURCE 객체의 예를 제공합니다.
EventsOURCE 객체의 예var es = 새로운 이벤트 소스 ( 'Events'); 데이터);});
위에서 볼 수 있듯이 EventSource 객체를 구체적으로 작성한 후, 이벤트 처리 방법을 OnMessage 및 addeventListener 메소드를 통해 추가 할 수 있습니다. 서버에 새 이벤트가 있으면 해당 이벤트 처리 방법이 호출됩니다. EventSource 객체의 OnMessage 속성의 역할은 addeventListener ( 'Message')의 역할과 유사하지만 OnMessage 속성은 하나의 이벤트 처리 방법 만 지원합니다. 서버 푸시 이벤트의 사양 내용을 도입 한 후 서버 구현이 아래에 소개됩니다.
서버 및 브라우저 엔드 구현이전 섹션의 통신 프로토콜에 대한 설명에서 서버 푸시 이벤트가 더 간단한 프로토콜임을 알 수 있습니다. 서버 측의 구현은 비교적 간단합니다. 오픈 소스 커뮤니티에서 다양한 서버 -사이드 기술을 찾을 수 있습니다. 스스로 개발하는 것은 어렵지 않습니다. 이 기사는 Java를 서버의 구현 언어로 사용합니다. 오픈 소스 기반 이벤트 소스 서비스 프로젝트를 구현하면 참조 리소스를 참조하십시오. 다음은 Jetty-Eventsource-Servlet 프로젝트를 사용하는 방법을 설명하기위한 구체적인 예입니다. 이 예는 제한된 공간에서 물체의 임의의 움직임을 시뮬레이션하는 데 사용됩니다. 물체는 임의의 위치에서 시작한 다음 위, 하단, 왼쪽 및 오른쪽 방향에서 한 방향을 임의로 선택 하고이 방향으로 임의의 거리를 이동합니다. 서버는 객체의 위치를 지속적으로 변경하고 위치 정보를 브라우저로 푸시하는데, 이는 브라우저에서 표시됩니다.
서버 구현arg ： 一部分是用来产生数据的 org.eclipse.jetty.servlets.eventSource 接口的实现 接口的实现, org.eclipse.jetty.servlets.eventsourceservlet 类的서블릿 구현. 다음 코드는 EventSource 인터페이스의 구현 클래스를 제공합니다.
EventSource 인터페이스 구현 클래스 MovementEventSource
공개 MovementEventsource int int int int int x = 0; getLogger (getClass () .nextint (width); y = random.nextint (height);} public void onopen (Emit (lasteventID); // 시작 위치 쿼리 업데이트 (이미 터); .split (,); pos.length> 1) {int xpos = -1; pos [1], 10);} catch (numberformatexception e) {} if (isvalidmove (xpos, ypos)) {x = xpos}} private void query (Emitter Emitter); while) {imiter.com (); .Data (id) 위치에 따른 위치; // 위치 정보 데이터를 시도하십시오 {strook.sleep (2000);} catch (InterpruptedException e) {logger.log (level.warning, /movement query 스레드가 중단됩니다. 연결을 닫으십시오. , e); getmove (); int ynext = y + 이동 [xnext (xnext)) {x = xnext; 현재 이동 위치가 합법적인지 판단하면 rn x> = 0 && x <= width && y> = 0 && y <= height;} // 다음 모바일 위치를 무작위로 생성합니다. xdir = int [] ydir = int int dir = random.nextint [dir] * random.nextint (stepmax )};}}MovementEventsource는 이벤트 소스 인터페이스의 Onopen, Onresume 및 Onclose 메소드를 구현해야합니다. Onopen 및 OnResume 메소드에는 EventSource.emitter 인터페이스의 매개 변수가 있으며 데이터를 전송하는 데 사용할 수 있습니다. EventSource.emitter 인터페이스에 포함 된 방법에는 데이터, 이벤트, 댓글, ID 및 Close가 각각 통신 프로토콜의 다양한 유형에 해당합니다. OnResume 메소드에는 또한 추가 매개 변수가 포함되어 있으며 Last-Event-ID 헤더가 보낸 최신 이벤트의 식별자를 나타냅니다.
MovementEventSource 클래스에서 이벤트에서 생성 된 이벤트의 주요 논리는 쿼리 메소드에 있습니다. 이 방법에는 2 초마다 위치를 변경하는 무제한 사이클이 포함되어 있으며 동시에 EventsOURCE.emitter 인터페이스의 데이터 메소드를 통해 업데이트 위치의 데이터 메소드를 통해 업데이트 된 위치를 브라우저 끝으로 보냅니다. 각 이벤트에는 해당 식별자가 있으며 식별자의 값은 위치 자체입니다. 연결이 끊어진 후 브라우저가 다시 연결되면 객체를 마지막 위치에서 이동할 수 있습니다.
MovementEventSource 클래스에 해당하는 서비스의 서비스를 구현하는 것은 간단합니다. NewEventSource 메소드의 구현에서 MovementEventSource 클래스를 아래와 같이 반환해야합니다. 브라우저가 설정 될 때마다 서비스는 요청을 처리하기 위해 새로운 MovementEventSource 클래스의 객체를 만듭니다.
MovementServlet의 서블릿 구현 공개 클래스 MOVENTERVLET EXTENDERDERCESORCESERVLET {@Override Protected EventSource NewsSource (httpservletRequest, String ClientId) RETERTE NEW MOVENTEVENTSOURCE (800, 600, 20);}}}서버 구현에서 해당 서버 필터 지원을 추가해야합니다. 이것은 부두 이벤트 소스 프로젝트가 의존하는 부두 연속 프레임 워크의 요구 사항입니다. 그렇지 않으면 케이스에 오류가 발생합니다. 필터를 추가하는 방법은 web.xml 파일에 표시된대로 구성 컨텐츠를 추가하는 것입니다.
Jetty Continuations에 필요한 서비스 필터의 구성<Filter> <Filter-Name> Continuation </Filter-Name> <Filter-Class> org.eclipse.jetty.continuation.continuationFilter </filter-class> </필터> <Filter-Ma pping> <filter-name> 연속 </filter-name> <Url-pattern>/sse/*</url-pattern> </filter-mapping>브라우저 엔드 구현
브라우저 측의 구현은 비교적 간단합니다. 다음 코드는 해당 구현을 제공합니다. 페이지의 사각형을 사용하여 객체를 나타냅니다. 새 이벤트가 수신되면 이벤트 데이터에 주어진 좌표 정보에 따라 블록의 위치가 페이지에 있습니다.
브라우저 측의 구현 코드 var es = 새로운 이벤트 소스 ( 'sse/movement'); es.addeventListener ( 'message', function (var pos = e.data.split ( ','), y = pos. [1]; $ {#box ') ({왼쪽 : x +'px ', 상단 : y +'px '});});기본 서버 측 및 브라우저 엔딩을 소개 한 후 아래에 더 중요한 IE 지원이 소개됩니다.
IE 지원브라우저의 기본 이벤트 소스 객체를 사용하는 큰 문제는 IE가 지원을 제공하지 않는다는 것입니다. IE에 대해 동일한 지원을 제공하기 위해 일반적으로 두 가지 방법이 있습니다. 첫 번째 방법은 다른 브라우저에서 원래 이벤트 소스 객체를 사용하는 것입니다. IE에서 간단한 회전 또는 혜성 기술을 사용하는 것입니다. . 이 기사는 Polyfill 기술을 사용하여 페이지에 세 번째 파티 JavaScript 라이브러리를로드하면됩니다. 브라우저 사이드 코드 적용을 변경할 필요는 없습니다. 이러한 방식으로 서버 측에는 하나의 구현 기술 만 필요하기 때문에 일반적으로 두 번째 방법을 사용하는 것이 좋습니다.
IE에서 유사한 기본 이벤트 소스 객체를 제공하는 것은 쉽지 않습니다. 이론적으로, 서버 측의 응답 내용을 얻으려면 xmlhttprequest 객체 만 필요하며, 텍스트 분석을 통해 해당 이벤트를 추출하고 해당 이벤트 처리 방법을 트리거 할 수 있습니다. 문제는 IE의 xmlhttprequest 객체가 획득 부품의 응답 내용을 지원하지 않는다는 것입니다. 응답이 완료된 후에 만 얻을 수 있습니다. 서버 푸시 이벤트는 긴 연결을 사용하기 때문입니다. 연결이 항상 열려있는 경우 XMLHTTPREQUEST 객체를 통해 해당 이벤트를 트리거 할 수 없으며 해당 이벤트를 트리거 할 수 없습니다. 보다 구체적으로, XMLHTTPREQUEST 객체의 ReadyState가 3 (ReadyState_interactive) 인 경우 ResponseText 속성을 얻을 수 없습니다.
IE에서 Xmlhttprequest 객체의 문제를 해결하려면 IE 8에 도입 된 XdomainRequest 객체를 사용해야합니다. XdomainRequest 객체의 역할은 Cross -Domain Ajax 요청을 보내는 것입니다. XdomainRequest 객체는 OnProgress 이벤트를 제공합니다. OnProgress 이벤트가 발생하면 응답 속성을 통해 응답의 일부 내용을 얻을 수 있습니다. 이것은 XdomainRequest 객체와 Xmlhttprequest 객체의 가장 큰 차이점입니다. XdomainRequest 객체를 사용하여 서버 측에 연결을 열면 서버에서 새 데이터가 생성되면 XdomainRequest 객체의 OnProgress 이벤트로 처리 할 수 있습니다.
그러나 XdomainRequest 객체의 원래 목적으로 인해 Cross -Domain Access의 보안 문제를 고려하여 Cross -Domain Ajax 요청을 발행하는 것입니다. 이러한 제한은 EventSource 객체로서의 구현에 영향을 미칩니다. 특정 제한 및 솔루션은 다음과 같습니다.
XdomainRequest 객체에 대한 이러한 제한으로 인해 서버의 구현도 해당 변경을 수행해야합니다. 이러한 변경 사항에는 Access-Control-Origin 헤드를 반환하는 것이 포함됩니다.
이 기사에 사용 된 PolyFill 라이브러리는 Github의 Yaffle에서 개발 한 Eventsource 프로젝트입니다. PolyFill 라이브러리를 사용하고 서버 측의 구현을 수정 한 후 서버를 사용하여 브라우저 IE 8 이상에서 이벤트를 푸시 할 수 있습니다. IE 7을 지원 해야하는 경우 간단한 문의 또는 혜성 기술 만 사용할 수 있습니다. 이 기사의 예제 코드의 참조 리소스를 참조하십시오.
요약서버에서 브라우저로 데이터를 푸시 해야하는 경우 HTML 5 사양 표준을 기반으로 사용할 수있는 기술에는 WebSocket 및 서버 푸시 이벤트가 포함됩니다. 개발자는 응용 프로그램의 특정 요구에 따라 올바른 기술을 선택할 수 있습니다. 서버에서 데이터를 푸시 해야하는 경우 서버 푸시 이벤트의 표준은 더 간단하고 달성하기 쉽습니다. 이 기사는 서버 푸시 이벤트의 표준 컨텐츠, 서버 및 브라우저 측면의 구현을 자세히 소개했으며 IE 브라우저를 지원하는 방법도 분석했습니다.