SSE란?

오늘은 제가 광주탈렌트페스티벌이라는 프로젝트를 하다가 실시간 투표를 구현하면서 SSE를 쓰게 될 뻔해서 글을 적어보았습니다

하지만 결론적으로 사용하진 않았습니다 ㅠㅠ

---

SSE란?

SSE는 Server-Sent-Events의 약자인데 서버에서 클라이언트로 실시간 이벤트를 전송하는 기술입니다

하지만 web-socket과 다르게 HTTP 프로토콜을 기반으로 하여 동작합니다

서버에서 클라이언트로 단방향으로 데이터를 푸시합니다

주로 실시간 알림, 주식 시세 업데이트 등 같이 서버에서 발생하는 이벤트를 클라이언트에 즉시 반영해야 할 때 사용합니다

 

SSE는 웹소켓과 달리 Client가 Server로부터 데이터만 받을 수 있는 방식입니다

구현이 간편합니다

접속에 문제가 있으면 자동으로 재연결 시도를 하지만 클라이언트가 close해도 서버에서 감지하기 어렵다고 합니다

 

혹시 다른 실시간 구현 방법들이 궁금하시면 이 글을 참고해보셔도 괜찮을거 같습니다

https://baeougi.tistory.com/9

Websocket💬이란?? (+Polling)

---

SSE 사용하기

1. Client가 서버의 이벤트 구독을 위한 요청을 보냅니다 이벤트의 미디어 타입은 text/event-stream이 표준입니다
2. 서버 쪽에서 구독에 대한 응답을 합니다
3. 서버 쪽에서 이벤트 전달을 시작합니다

const eventSource = new EventSource("https://example/sse"); // Event Source 객체 만들기

eventSource.onmessage = (event) => {
  console.log("투표 정보를 얻었습니다", event.data);
};

eventSource.onerror = (error) => {
  console.error("투표 정보 얻기 실패", error);
};

eventSource.onopen = () => {
  console.log("연결 되었습니다");
};

// 그냥 메시지로 보낸게 아니라 data를 따로 커스텀해서 보낸 경우 이렇게 받습니다
eventSource.addEventListener("custom-event", (event) => {
  console.log("커스텀 이벤트", event.data);
});

이런 식으로 그냥 공식 문서를 참고해서 간단하게 짜보았습니다

다음에 꼭 실제 프로젝트에 사용해보고 싶습니다

---

글을 마치며

이렇게 공부를 해봤는데 연결은 안해보았지만 공식문서를 보면서 구현해본 건 생각보다 쉬웠던거 같습니다

이런 좋은 기술은 잘 알고 있다가 활용해보면 좋을거 같습니다

글을 읽어주셔서 감사합니다