본문 바로가기
Vue.js

EventSource

by Mecodata 2024. 5. 2.

정의

- 서버로부터 실시간 이벤트 스트림을 수신하는 데 사용되는 JavaScript의 기능

- 페이지에서 사용자에게 실시간 업데이트를 제공하거나 서버에서 발생하는 이벤트를 수신하여 처리하도록 해줌

- 서버-클라이언트 간의 단방향 통신에 주로 활용 (Ex - SSE) 

 

특징

  1. 단방향 통신: EventSource는 서버에서 클라이언트로의 단방향 통신을 지원하기 때문에 클라이언트는 서버로부터 데이터를 수신할 수 있지만 서버로 데이터를 전송할 수 없음
  2. HTTP 프로토콜 사용: EventSource는 HTTP 프로토콜을 통해 서버와 클라이언트 간의 통신을 수행하며 서버는 Content-Type이 text/event-stream으로 설정된 HTTP 응답을 보내고, 클라이언트는 이를 수신하여 이벤트 스트림을 처리합니다.
  3. 이벤트 스트림: 서버에서 클라이언트로 전송되는 데이터는 이벤트 스트림으로 구성되며 이벤트 스트림은 하나 이상의 이벤트로 구성됨. 각 이벤트는 일련의 필드로 구성되며 일반적으로 이벤트에는 이벤트의 이름과 데이터가 포함
  4. 사용 방법: 
    • EventSource 객체를 생성하고 서버의 엔드포인트 URL을 지정
    • onmessage(새로운 이벤트 메시지 수신 시), onopen(연결 성공 시), onerror(에러 발생 시) 등의 이벤트 핸들러를 정의 → 서버로부터 수신된 데이터나 연결 상태 변경에 대응
    • close() 메서드를 사용하여 EventSource 연결 종료
const eventSource = new EventSource('/events');

eventSource.onmessage = function(event) {
  console.log('Received event:', event.data);
};

eventSource.onerror = function(event) {
  console.error('Error:', event);
};

eventSource.close();

'Vue.js' 카테고리의 다른 글

이벤트 종류  (0) 2024.02.23
v-on 수식어  (0) 2024.02.23
Vue 기본 문법  (0) 2024.01.23
Vue 기본 세팅  (0) 2024.01.23
Vue.js 정의 및 특징  (0) 2024.01.15

댓글