고양이hyebin
Polling vs WebSocket
October 13, 2023

평소에 궁금했던 개발 내용들을 메모에 적어두고 하나씩 꺼내가며 공부하는 중이다 🤔 사실 알았던 내용들도 계속 까먹고 있기 때문에 틈틈이 다시 꺼내보며 읽는것이 중요한데 그게 쉽지 않다 😢 갑자기 누군가 폴링과 웹소켓의 차이점을 말하라고 했을때 이거야 ! 라고 말할 수 있을 때까지 계속 꺼내봐야겠다.

간단 요약 하자면, 인터넷이 발전하면서 실시간 통신을 원했다. 그 과정에서 처음 생긴건 바로 폴링! 웹 폴링은 계속 요청을 해서 응답이 있을 때 요청을 받는것이고, 웹 소켓은 양방향 연결이 가능해 서로 왔다 갔다 소통이 가능한것!

과거 히스토리 부터 파악해보자

기존 HTTP 방식

HTTP는 프로토콜로 약속이다. 사용자가 URL을 요청할 때 만 서버에서 해당 페이지를 주는 형식이기 때문에 반드시 URL 요청을 해야하고 새로운 브라우저를 뿌려 새로운 페이지로 이동한다.

AJAX의 등작

그런데 AJAX가 등장하면서 페이지 이동이 아닌 동일한 페이지 내에서 DOM을 변경할 수 있게 되었다!

AJAX의 한계점으로 폴링방식 등장

AJAX도 HTTP로 서버와 통신하기 때문에 결국은 “클라이언트의 요청이 있고 그 다음 서버로부터 응답을 받는 형식” 을 벗어나지 못했다. 이런 상황으로 클라이언트가 n초 간격으로 request를 서버로 계속 날려서 response를 전달받는 폴링방식이 등장했다.

폴링 vs 롱폴링

폴링은 클라이언트가 일정한 간격으로 서버에 계속해서 요청을 보낸다. 클라이언트는 주기적으로 서버에 요청을 보내야 하기 때문에 불필요한 트래픽이 발생할 수 있다.

롱폴링은 클라이언트가 서버에 요청을 보내면, 서버는 변경된 정보가 발생할 때까지 응답을 보류한다. 정보가 변경되면 서버가 응답을 보내고, 클라이언트는 다시 새로운 요청을 보낸다.

하지만 결국은 둘다 HTTP 통신을 하기 때문에 Request, Response 헤더가 불필요하게 크다.

웹소켓의 등장 ! 두둥-탁!

사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성한다. Websocket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다.

웹소켓의 프로토콜

웹 소켓 프로토콜은 접속 확립에 HTTP를 사용하지만 그 후에는 웹 소켓의 독자적인 프로토콜로 이루어진다. 또한 header 가 작아 오버헤드가 적다. 또한 하나의 커넥션으로 데이터 송수신이 이루어 진다.

Socket.io

Socket.io는 양방향 통신을 하기 위해 웹 소켓 기술을 활용하는 Node.js 라이브러리이다. 웹 소켓은 오래된 버전의 웹 브라우저는 지원하지 않기 때문에 구 버전 사용자들은 웹 소켓 페이지를 볼 수 없다. 이를 해결하기 위해 나온 기술중 하나이다. 웹소켓을 지원하면 웹 소켓으로 동작하고, 지원하지 않는 브라우저라면 일반 http를 이용하여 실시간 통신 흉내를 낸다. 따라서 자바스크립트를 이용하여 브라우저에 상관없이 실시간 웹을 구현할 수 있는 Socket.io를 좀 더 많이 사용하고 있다.

Reference

WEB-🌐-웹-소켓-Socket-역사부터-정리