websocket

Younghwan Cha·2023년 2월 25일
0

Web

목록 보기
14/15

채팅 서비스를 만들어 보고 싶었다.
그러면 이참에 nest.js 를 사용하여 채팅방을 보자는 생각이 들었다.
그래서 이번 기회에 websocket, socket io 등등의 모든 것을 한번 정리해보도록 하자.

Websocket 이란?

1989년 CERN(http://public.web.cern.ch) 에서 웹의 역사가 시작되었을 때에는 사용자와의 상호작용은 웹 개발에서 큰 부분을 차지하지 않았다. 그러나 초창기에 연구기관에서 사용하던 웹은 점점 더 일상생활에 파고들었고, PC용 응용 프로그램(Native Application)을 대체할 수 있는 정도까지 되었다. 지금까지의 PC 환경이 이렇게 변화한 것처럼 모바일 환경에서도 앞으로 마찬가지로 변화할 것으로 보인다.

전형적인 브라우저 렌더링 방식은 HTTP 요청(HTTP Request)에 대한 HTTP 응답(HTTP Response)을 받아서 브라우저의 화면을 깨끗하게 지우고 받은 내용을 새로 표시하는 방식이다. 내용을 지우고 다시 그리면 브라우저의 깜빡임이 생기게 된다. 이러한 깜빡임 없이 원하는 부분만 다시 그리며 실시간으로 사용자와 상호작용하는 방식이 나타나고 사용자와 상호작용하는 웹 서비스를 선호하는 사용자가 증가하면서 RIA(Rich Internet Application) 기술의 발달이 촉진되었다.

상호작용하는 웹 서비스를 위해 숨겨진 프레임(Hidden Frame)을 이용한 방법이나 Long Polling, Stream 등 다양한 방법을 사용했다. 그러나 이러한 방식은 브라우저가 HTTP 요청를 보내고 웹 서버가 이 요청에 대한 HTTP 응답를 보내는 단방향 메세지 교환 '규칙'을 변경하지 않고 구현한 방식이다. 그렇기 때문에 상호작용하는 웹 페이지를 복잡하고 어려운 코드로 구현해야 했다.

보다 쉽게 상호작용하는 웹 페이지를 만들려면 브라우저와 웹 서버 사이에 더 자유로운 양방향 메시지 송수신(bi-directional full-duplex communication)이 필요하다. 그래서 HTML5 표준안의 일부로 WebSocket API(이후 WebSocket)가 등장했다.

그림 1 WebSocket과 일반적인 Ajax Long Polling 방식 비교(이미지 출처)

WebSocket은 그 이름에서 알 수 있듯이 소켓을 이용하여 자유롭게 데이터를 주고 받을 수 있다. 즉 기존의 요청-응답 관계 방식보다 더 쉽게 데이터를 교환할 수 있다.

[Websocket] https://d2.naver.com/helloworld/1336


Socket.io websocket 뭐가 뭐지?

둘은 이름이 비슷하지만 분명 다르다.
Websocket 은 양방향 소통을 위한 프로토콜이며,
socket.io 는 websocket 기술을 활용하는 라이브러리이다.
그렇기 때문에 같은 기능을 구현하더라도 socket.io 가 약간 느리지만, 많은 편의성을 제공한다.

[websocket vs Socket.io] https://www.peterkimzz.com/websocket-vs-socket-io/


그래서 뭘 써야할까?

서버에서 연결된 소켓(사용자)들을 세밀하게 관리해야하는 서비스인 경우에는 Broadcasting 기능이 있는 socket.io을 쓰는게 유지보수 측면에서 훨씬 이점이 많다.
반면 가상화폐 거래소같이 데이터 전송이 많은 경우에는 빠르고 비용이 적은 표준 WebSocket을 이용하는게 바람직하다.

profile
개발 기록

0개의 댓글