[Web] 실시간 통신 기술 SSE (Server Sent Event), polling, web socket

서론

채용공고 보면서 모르는 용어가 나와서 공부해 보았다!

SSE란?

Server Sent Event로 서버에서 클라이언트로 보내는 응답이다

• 클라이언트의 요청없이 트리거에 의해 서버에서 일방적으로 보내는 응답
• 클라이언트에서 요청을 보낼 수 없는 단방향 이벤트
• 웹소켓과 동일, 풀링 없이 서버 응답

용도

• 실시간 데이터 전송
• web socket과 같은 역할

polling이란?

클라이언트가 요청하면 응답을 주는 방식

short polling

• 요청을 하면 바로 응답하는 방식
• 이벤트 발생 여부와 상관없이 요청 응답을 주고 받음

long polling

• 클라이언트는 요청을 하면 응답할 때까지 기다리고 있는 방식
• 서버는 요청이 오면 이벤트가 발생하면 응답을 보낸다

SSE

• 요청 한 번이 구독과 같은 형태로 이벤트 발생 시 마다 응답을 보낸다
• 불필요한 요청 없이 이벤트 발생마다 응답을 받아 볼 수 있어 효율적이다

예시 코드

• mdn 문서를 보면 php로 작성된 서버 코드가 있으나 우리는 프론트엔드 입장만 볼 것 이다
• 코드는 대략 "ping"이라는 이벤트 타입을 가진 이벤트를 만들어 매 초 마다 클라이언트로 전송
• 서버가 전송하면 클라이언트는 수신을 해야 한다
• 아래 코드를 클라이언트에서 작성하면 서버가 매초마다 송신하는 "ping"이라는 이벤트를 수신받을 준비가 되어있는 것

// 이벤트 수신 받는 객체 생성
const evtSource = new EventSource("api url");

eventSrc.addEventListener("ping", function (event) {
  // ping 이벤트 발생마다 동작하는 함수
});

마무리

취업 관련하여 공부해 보았다 요즘 너무 짧게 글을 쓴다 ^_^;ㅋ