<aside> <img src="/icons/bookmark_red.svg" alt="/icons/bookmark_red.svg" width="40px" />

목차

</aside>

<aside> 📌

과거 발표자료를 토대로 정리했습니다

</aside>

🤔 학습 이유

과거 웹소켓 관련 컨퍼런스 발표까지 해보았지만 실제 프로젝트에서 써보지 않아 휘발되었다…ㅜㅜ

이번 기회에 실시간 & 양방향 통신을 위한 기술들을 조사해보고 어떤 방식으로 우리 서비스의 실시간 채팅 기능을 구현해 볼 지 고민해보고자 한다.

HTTP 통신은 클라이언트의 요청이 있을 때 서버가 응답하는 단방향 통신

HTTP 통신

그럼 실시간 채팅처럼 양방향이면서 실시간 통신이 필요한 기능 구현은 어떻게 할까? 우선 실시간 통신을 위한 몇가지 통신 방식을 알아보자

🚀 실시간 통신을 위한 노력

AJAX Polling

• 클라이언트가 일정한 주기로 서버에 새로운 업데이트가 없는지 확인하는 HTTP 요청을 보내는 방법
• 장점
  • 구현이 간단하며 대부분의 브라우저에서 지원
  • 기존 HTTP 인프라를 그대로 사용 가능
• 단점
  • 불필요한 요청과 커넥션을 생성하여 서버의 부담이 커짐
  • Real-time 통신이라고 부르기 애매할 정도의 실시간성
  • 데이터 업데이트 지연 발생
• 사용 사례
  • 응답을 실시간으로 받지 않아도 되는 경우
  • 다수의 사용자가 동시에 사용하는 경우에 적합
  • ex. 뉴스 피드, 공지사항 업데이트

setInterval(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      console.log('받은 데이터:', data);
    })
    .catch(error => console.error('오류:', error));
}, 5000); 

Long Polling