이벤트 스트림에 연결하려면 아래와 같이 EventSource 생성자를 호출하십시오. 구독 할 이벤트 스트림의 URL을 지정해야합니다. 생성자는 자동으로 연결을 열어야합니다.
이벤트 핸들러
연결을 설정 한 후 이벤트 소스의 이벤트 핸들러가 호출됩니다. 이벤트 핸들러는 이벤트를 유일한 매개 변수로 엽니 다. 다음 예제는 공통 이벤트 핸들러를 보여줍니다.
eventSource 이벤트 핸들러는 메소드를 사용하여 작성할 수도 있습니다. 이 대체 구문은 보다 낫습니다. 여러 핸들러가 동일한 이벤트에 첨부 될 수 있기 때문입니다. 다음은
를 사용하여 이전 이벤트 핸들러를 다시 작성합니다.
수신 메시지 <code class="language-javascript">function supportsSSE() {
return !!window.EventSource;
}</code> 클라이언트는 이벤트 스트림을 일련의 DOM 메시지 이벤트로 해석합니다. 서버에서받은 각 이벤트는 EventSource 용 이벤트 핸들러를 트리거합니다. 핸들러는 메시지 이벤트를 유일한 매개 변수로 취합니다. 다음 예제는 이벤트 핸들러를 만듭니다. onmessage
onmessage
메시지 이벤트에는 데이터, 원산지 및 lasteventid의 세 가지 중요한 속성이 포함되어 있습니다. 이름에서 알 수 있듯이 데이터에는 실제 메시지 데이터 (문자열 형식)가 포함됩니다. 데이터는 JSON 문자열 일 수 있으며 json.parse () 메소드로 전달 될 수 있습니다. Origin 속성에는 리디렉션 후 이벤트 스트림의 최종 URL이 포함됩니다. 메시지가 예상 소스에서만 수신되는지 확인하기 위해 원점을 확인해야합니다. 마지막으로, LastEventID 속성에는 이벤트 스트림에 표시된 마지막 메시지 식별자가 포함되어 있습니다. 서버는이 속성을 사용하여 개별 메시지에 식별자를 추가 할 수 있습니다. 식별자가 보이지 않으면 LasteventID가 빈 문자열이됩니다. 이벤트 핸들러는 onmessage 메소드를 사용하여 작성할 수도 있습니다. 다음 예제는 를 사용하여 다시 작성한 이벤트 핸들러를 보여줍니다.
<code class="language-javascript">function supportsSSE() {
return !!window.EventSource;
}</code>
이름 지정 이벤트
이름 이벤트 onmessage를 구현함으로써 단일 이벤트 스트림은 다양한 유형의 이벤트를 지정할 수 있습니다. 명명 된 이벤트는 메시지 이벤트 핸들러에 의해 처리되지 않습니다. 대신, 각 유형의 명명 이벤트는 고유 한 핸들러로 처리됩니다. 예를 들어, 이벤트 스트림에 FOO라는 이벤트가 포함 된 경우 다음 이벤트 핸들러가 필요합니다. FOO 이벤트 핸들러는 이벤트 유형이 다르다는 점을 제외하고는 메시지 이벤트 핸들러와 동일합니다. 물론, 다른 유형의 명명 된 메시지에는 별도의 이벤트 핸들러가 필요합니다. addEventListener()
addEventListener()
처리 오류 onmessage
이벤트 흐름에 문제가있는 경우 eventsource의
이벤트 핸들러가 트리거됩니다. 오류의 일반적인 원인은 연결 중단입니다. EventSource 객체가 자동으로 서버에 다시 연결하려고 시도하지만 연결이 끊어지면 오류 이벤트가 트리거됩니다. 다음 예제는 이벤트 핸들러를 보여줍니다. <code class="language-javascript">EventSource(url);</code>
물론 이벤트 핸들러는 아래와 같이 를 사용하여 다시 작성할 수도 있습니다.
분리
클라이언트는 메소드를 호출하여 언제든지 이벤트 소스 연결을 종료 할 수 있습니다. 의 구문은 다음과 같습니다. 메소드는 매개 변수를 허용하지 않으며 값을 반환하지 않습니다.
<code class="language-javascript">source.onopen = function(event) {
// 处理打开事件
};</code>
연결 상태
이벤트 소스 연결 상태는 ReadyState 속성에 저장됩니다. 수명주기의 어느 시점에서든 연결은 가능한 세 가지 상태 중 하나 (In, On 및 Off에있을 수 있습니다. 다음 목록은 각 상태를 설명합니다.
연결 - - EventsOURCE 객체가 생성되면 처음에는 연결 상태가 입력됩니다. 이 기간 동안 연결이 설정되지 않았습니다. 연결된 연결이 손실되면 EventsOurce도 연결 상태로 전환됩니다. 연결에서 Eventsocket의 ReadyState 값은 0입니다. 이 값은 Constant EventsOUrce.connecting으로 정의됩니다.
Open - 확립 된 연결을 Open이라고합니다. 열린 이벤트 소스 객체는 데이터를 수신 할 수 있습니다. ReadyState 값 1은 개방 상태에 해당합니다. 이 값은 Constant EventSource.open으로 정의됩니다.
- Close - 연결이 설정되지 않고 재 연결이 시도되지 않으면 이벤트 소스를 닫습니다. 이 상태는 일반적으로 메소드를 호출하여 입력됩니다. 폐쇄 된 상태에서 이벤트 소스의 ReadyState 값은 2입니다. 이 값은 constant eventsource.closed로 정의됩니다.
-
다음 예제는 ReadyState 속성을 사용하여 EventSource 연결을 확인하는 방법을 보여줍니다. 하드 코딩 된 준비 상태 값을 피하기 위해이 예는 상태 상수를 사용합니다.
결론
close()
이 기사에서는 SSE의 클라이언트 측면을 소개합니다. SSE에 대해 더 많이 배우고 싶다면 Server SSE를 읽는 것이 좋습니다. 또한 Node.js에서 SSE에 대한보다 실용적인 기사를 썼습니다. 즐기다!
SSE를 사용하여 푸시 기술 (FAQ)을 구현하는 것에 대해 자주 묻는 질문
SSE를 구현하기위한 전제 조건은 무엇입니까? <code class="language-javascript">function supportsSSE() {
return !!window.EventSource;
}</code>
SSE를 구현하려면 JavaScript 및 Node.js에 대한 기본적인 이해가 필요합니다. 또한 HTTP의 개념과 작동 방식에 익숙해야합니다. 또한 SSE 가이 개념을 기반으로하기 때문에 이벤트 중심 프로그래밍을 이해하는 것이 유리할 수 있습니다.
SSE는 WebSockets와 어떻게 다릅니 까?
SSE와 WebSocket이 모두 실시간 데이터 업데이트를 제공하지만 기능 및 사용 사례는 다양합니다. Websockets는 클라이언트와 서버간에 양방향 통신 채널을 제공하여 두 당사자가 언제든지 데이터를 보낼 수 있습니다. 반면에 SSE는 서버 만 클라이언트에게 업데이트를 푸시 할 수있는 일방 통신 통신 채널입니다. 이로 인해 SSE는 데이터 업데이트가 주로 서버에서 시작되는 응용 프로그램에 더 적합합니다.
SSE가 서버 측 언어와 함께 사용할 수 있습니까?
예, SSE는 HTTP 지원 서버 측 언어와 함께 사용할 수 있습니다. 여기에는 node.js, Python, PHP 및 Ruby와 같은 언어가 포함됩니다. 키는 올바른 HTTP 헤더를 설정하고 SSE 사양에 따라 데이터를 형식화하는 것입니다.
SSE의 연결 오류 또는 인터럽트를 처리하는 방법은 무엇입니까?
클라이언트에서 SSE를 구현하는 데 사용되는 EventSource API는 연결이 손실되면 자동으로 서버에 다시 연결하려고 시도합니다. 이벤트 소스 객체에서 "오류"이벤트를 들으면 연결 오류 또는 인터럽트를 수동으로 처리 할 수 있습니다.
SSE를 사용하여 클라이언트에서 서버로 데이터를 보낼 수 있습니까?
아니오, SSE는 서버에서 클라이언트로 일방 통신을위한 것입니다. 클라이언트에서 서버로 데이터를 보내야하는 경우 기존 AJAX 요청을 사용하거나 WebSockets와 같은 양방향 통신 기술로 전환 할 수 있습니다. SSE가 모든 브라우저를 지원합니까?
대부분의 최신 브라우저는 SSE를 지원합니다. 그러나 Internet Explorer는 SSE를 지원하지 않습니다. eventsource.js와 같은 폴리 플릴을 사용하여 지원되지 않는 브라우저에서 SSE에 대한 지원을 추가 할 수 있습니다.
SSE 연결을 닫는 방법은 무엇입니까?
eventsource 객체에서
메소드를 호출하여 SSE 연결을 닫을 수 있습니다. 이렇게하면 서버가 클라이언트에 더 많은 업데이트를 보내지 못하게됩니다.
다중 사용자 실시간 응용 프로그램에 SSE를 사용할 수 있습니까?
예, 다중 사용자 실시간 응용 프로그램에 SSE를 사용할 수 있습니다. 그러나 각 사용자는 서버와 별도의 연결을 엽니 다. 많은 사용자가있는 경우 서버로드가 과도하게 발생할 수 있습니다.
SSE를 사용하여 다른 유형의 이벤트를 보내는 방법은 무엇입니까? close()
서버에서 전송 된 데이터에 "이벤트"필드를 포함하여 다른 유형의 이벤트를 보낼 수 있습니다. 그런 다음 클라이언트는 EventsOURCE 객체의
메소드를 사용하여 이러한 특정 이벤트 유형을들을 수 있습니다.
REST API와 함께 SSE를 사용할 수 있습니까?
예, REST API와 함께 SSE를 사용할 수 있습니다. 서버는 리소스가 변경 될 때 클라이언트에게 업데이트를 보낼 수 있습니다. 이는 클라이언트 및 서버 상태를 폴링없이 동기화하는 데 유용합니다.
