Web - 웹 소켓 (Web Socket) 과 Socket.io

웹 소켓 (Web Socket)

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

 

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

 

그러나 HTML5가 나오면서 웹 브라우저와 웹 서버가 지속적으로 연결된 라인을 통해 실시간으로 데이터를 주고받을 수 있는 웹 소켓이 등장했다. 처음에 웹 소켓 연결이 이루어지면 그 다음부터는 계속 연결된 상태로 있기 때문에 따로 업데이트가 있는지 요청을 보낼 필요가 없다. 업데이트할 내용이 생겼다면 서버에서 바로 클라이언트에 알리며, HTTP 프로토콜과 포트를 공유할 수 있으므로 다른 포트에 연결할 필요도 없다. 폴링 방식에 비해 성능도 매우 개선되었다.

 

참고로 서버센트 이벤트 (Server Sent Events, SSE) 라는 기술도 등장했다. EventSource라는 객체를 사용하는 기술로써 처음에 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보낸다. 웹 소켓과 다른 점은 클라이언트에서 서버로는 데이터를 보낼 수 없다는 것이다. 즉 서버에서 클라이언트로의 단방향 통신이다. 따라서 웹 소켓만이 진정한 양방향 통신이다. 그러나 굳이 양방향 통신이 필요없는 경우도 많다. 이 경우 SSE 기술 사용을 고려해볼만 하다.

웹 소켓과 Socket.io의 차이

웹 소켓은 HTML5 표준의 일부로 실시간으로 상호작용하는 웹 서비스이다. 그러나 웹 소켓 프로토콜은 아직 확정된 상태가 아니기 때문에 브라우저 별로 지원하는 WebSocket 버전이 다르다. 또한 예전 브라우저 중 웹 소켓을 지원하지 않는 경우도 많다. 따라서 미래의 기술이지, 아직 인터넷 기업에서 시범적으로 써 볼 수 있는 기술이라 볼 수 없다.

 

이를 보완하기 위해 Socket.io라는 모듈이 개발되었는데, 이는 다양한 방식의 실시간 웹 기술을 손쉽게 사용할 수 있도록 해주는 모듈이다. 즉, WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling 등, 다양한 방법을 하나의 API로 추상화한 것이다. 즉 Socket.io는 Javascript를 이용하여 브라우저 종류에 관계없이 실시간 웹을 구현할 수 있도록 해주는 기술이다. 이로 인해 개발자는 Socket.io로 개발을 한다면 클라이언트로 푸쉬 메시지를 보내기만 한다면 WebSocket을 지원하지 않는 브라우저에서도 브라우저 모델과 버전에 따라 다양한 방법으로 내부적으로 푸쉬 메시지를 보낼 수 있도록 설정이 되어있다. 즉 어느 브라우저라도 일관된 모듈로 메시지를 보낼 수 있으며, 또한 지원하는 여러 내부 기능들이 따로 있기 때문에 더 간편하고 효율적이다.

 

따라서 Socket.io는 자바스크립트 환경이 구축된다면 어디서든 바로 사용할 수 있는 기술이다. WebSocket 프로토콜은 표준 프로토콜이기 때문에 WebSocket을 지원하는 여러 서버 구현체들이 있지만 Socket.io는 Node.js에 밖에 없다는 점이 특징이다.

 

출처

Node.js 교과서 개정 2판 - 길벗, 조현영

https://github.com/WeareSoft/tech-interview/blob/master/contents/network.md#frame-packet-segment-datagram