웹 소캣 이해하기

노드 생태계에서는 웹 소캣이란 말을 들으면 Socket.IO를 먼저 떠올리는 경우가 많습니다. 하지만 Socket.IO는 웹 소켓을 활용한 라이브러리일 뿐이며 웹 소켓 그 자체는 아닙니다. 나중에 Socket.IO를 사용하기 위해서는 기반 기술인 웹 소켓에 대해 먼저 알아야 합니다.

 

웹 소켓은 HTML5에 새로 추가된 스펙으로 실시간 양방향 데이터 전송을 위한 기술이며, HTTP와 다른 WS라는 프로토콜을 사용합니다. 따라서 브라우저와 서버가 WS 프로토콜을 지원하면 사용할 수 있습니다. 최신 브라우저는 대부분 웹 소켓을 지원하고, 노드에서는 ws나 Socket.IO 같은 패키지를 통해 웹 소켓을 사용할 수 있습니다.

 

웹 소켓이 나오기 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송을 구현했습니다. 그중 한 가지가 폴링(polling)이라고 불리는 방식입니다. HTTP가 클라이언트에서 서버로 향하는 단방향 통신이므로 주기적으로 서버에 새로운 업데이트가 있는지 확인하는 요청을 보낸 후, 있다면 새로운 내용을 가져오도록 단순 무식한 방법이었습니다.

 

그러다가 HTML5가 나오면서 웹 브라우저와 웹 서버가 지속적으로 연결된 라인을 통해 실시간으로 데이터를 주고받을 수 있는 웹 소켓이 등장했습니다. 뒤에 웹 소켓에 대한 자세한 설명을 하겠지만, 웹 소켓은 계속 연결된 상태로 있으므로 따로 업데이트가 있는지 요청을 보낼 필요가 없습니다. 업데이트한 내용이 생겼다면 서버에서 바로 클라이언트에 알립니다. HTTP 프로토콜과 포트를 공유할 수 있으므로 다른 포트에 연결할 필요도 없습니다. 폴링 방식에 비해 성능도 매우 개선되었습니다.

 

참고로 서버센트 이벤트(Server Sent Events)(이하 SSE)라는 기술도 등장했습니다. EventSource라는 객체를 사용하는데요. 처음에 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보냅니다. 웹 소켓과 다른 점은 클라이언트에서 서버로는 데이터를 보낼 수 없다는 것입니다. 즉, 서버에서 클라이언트로 데이터를 보내는 단방향 통신입니다. 따라서 웹 소켓만이 진정한 양방향 통신입니다. 양방향 통신이므로 SSE에서 할 수 있는 것은 웹 소켓으로 모두 할 수 있습니다. 하지만 주식 차트 업데이트나 SNS에서 새로운 게시글을 가져오기 등 굳이 양방향 통신이 필요 없는 경우도 많습니다. 서버에서 일방적으로 데이터를 내려주기만 하면 되기 때문에, 경매 시스템을 만들 때 SSE 기술을 사용해 볼 것입니다.

 

Socket.IO는 웹 소켓을 편리하게 사용할 수 있도록 도와주는 라이브러리입니다. Socket.IO는 웹 소켓을 지원하지 않는 IE9와 같은 라브라우저에서는 알아서 웹 소켓 대신 폴링 방식을 사용하여 실시간 데이터 전송을 가능하게 합니다. 클라이언트 측에서 웹 소캣 연결이 끊겼다면 자동으로 재연결을 시도하고, 채팅방을 쉽게 구현할 수 있도록 메서드를 준비해두었습니다.