Socket.IO를 이해해보자!

이호용·2022년 7월 18일
0

ft_transcendence

목록 보기
12/14

인터넷이 나오고 HTTP를 통해서 서버로부터 데이터를 가져오기 위해서는 오로지 URL을 통한 요청이 유일한 방법이었습니다.

하지만 HTTP의 문제는 단방향 통신이라, 자주 요청이 발생할 경우 불필요한 헤더가 많이 생겨 느려지는 문제점이 있다.
그래서 이를 해결하기위해 websocket이라는 걸 만들었습니다. websocket은 HTTP처럼 통신을 할때 약속이지만, websocket의 경우 불필요한 헤더가 발생하지 않고 양방향 통신이가능하다.

WebSocket의 작동원리.

  1. Opening Handshake
    웹소켓은 HTTP로 아래와 같이 요청을 보냅니다.
    Upgrade로 지금 통신을 websocket으로 변경하겠다는걸 나타내고 Connection 통해 Upgrade를 명령합니다. 
GET /chat HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://localhost:9000
출처: https://kellis.tistory.com/65 [Flying Whale:티스토리]

  1. Data Transfer
    핸드쉐이크를 통해 웹소켓 연결이 수립되면, 데이터 전송 파트가 시작됩니다. 여기에서는 클라이언트와 서버가 '메시지'라는 개념으로 데이터를 주고받는데, 여기서 메시지는 한 개 이상의 '프레임'으로 구성되어 있습니다. (프레임은 텍스트(UTF-8) 데이터, 바이너리 데이터, 컨트롤 프레임(프로토콜 레벨의 신호) 등이 있습니다
    핸드 셰이크가 끝난 시점부터 서버와 클라이언트는 서로가 살아 있는지 확인하기 위해 heartbeat 패킷을 보내며, 주기적으로 ping을 보내 체크합니다. 이는 서버와 클라이언트 양측에서 설정 가능합니다.

  2. Close Handshake
    클라이언트와 서버 모두 커넥션을 종료하기 위한 컨트롤 프레임을 전송할 수 있습니다. 이 컨트롤 프레임은 Closing Handshake를 시작하라는 특정한 컨트롤 시퀀스를 포함한 데이터를 가지고 있습니다.
    클라이언트가 이에 대한 응답으로 Close 프레임을 전송합니다. 그러면 웹소켓 연결이 종료됩니다. 연결 종료 이후에 수신되는 모든 추가적인 데이터는 버려집니다. 

websocket 문제점.

하지만 문제점도 있습니다.

  1. 프로그램 구현에 보다 많은 복잡성을 초래합니다.
  • 웹 소켓은 HTTP와 달리 Stateful protocol이기 때문에 서버와 클라이언트 간의 연결을 항상 유지해야 하며 만약 비정상적으로 연결이 끊어졌을때 적절하게 대응해야 한다. 이는 기존의 HTTP 사용시와 비교했을때 코딩의 복잡성을 가중시키는 요인이 될 수 있습니다.
  1. 서버와 클라이언트 간의 Socket 연결을 유지하는 것 자체가 비용이 듭니다.
  • 특히나 트래픽 양이 많은 서버같은 경우에는 CPU에 큰 부담이 될 수 있습니다.
  1. 오래된 버전의 웹 브라우저에서는 지원하지 않습니다.
  2. WebSocket은 분명히 양방향 통신을 설정하는 가장 좋은 방법이지만 경험에 따르면 회사 프록시, 개인 방화벽, 바이러스 백신 소프트웨어로 인해 WebSocket 연결을 설정하는 것이 항상 가능한 것은 아닙니다.

WebSocket(ws) vs Socket.IO (장단점)

자 이제 websocket을 사용할수있는 방법 두가지를 살펴 봅시다.
하나는 그냥 websocket을 사용하는 방법과 socket.io라이브러리를 사용해 다른사람이 만들어둔 websocket 연결을 이용하는 겁니다.

웹소켓은 양방향 소통을 위한 프로토콜입니다
socket.io는 양방햔 통신을 하기위해 웹소켓 기술을 활용하는 라이브러리입니다.

그렇기 때문에 socket.io가 같은 기능을 구현하더라도 약간 느리지만, 많은 편의성을 제공합니다.

WebSocket

  • HTML5 웹 표준 기술
  • 매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용함
  • 이벤트를 단순히 듣고, 보내는 것만 가능함

Socket.io

  • WebSocket 프로토콜 위에 구축되었으며 HTTP 롱 폴링 또는 자동 재연결에 대한 폴백과 같은 추가 보장을 제공합니다.
  • 표준 기술이 아니며, 라이브러리임
  • 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도함
  • 방 개념을 이용해 일부 클라이언트에게만 데이터를 전송하는 브로드캐스팅이 가능함

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

Socket.io 사용법.

websocket이 빠르다고 했지만, 위의 설명과 같이 가상화폐 거래소의 데이터전송같은 특별한 케이스가 아니라면 Socket을 사용해도 충분하다고 생각합니다.

우리는 좀더 편리하게 사용하기 위해 Socket.io를 알아봅시다.
아래 예제는 node.js또는 nest.js 환경에서 유용하다. 같이 한번 살펴보자!

profile
이호용
~_~
이전 포스트

ERD설계 DB로 만들어 보기 .

다음 포스트

socketIO!!

0개의 댓글