웹소켓 (Web Socket) 정리

클라이언트-서버간 양방향 통신

HTML5에서 많이 사용된다

다양한 브라우저에서 웹소켓 프로토콜을 지원한다

특징

• 양방향 통신
  • 서로 원할때 데이터를 주고받는다
• 실시간 네트워킹
  • 채팅, 주식, 비디오 데이터 등 연속된 데이터를 빠르게 노출
  • 여러 단말기에 빠르게 데이터 교환

---

웹소켓 이전의 비슷한 기술 - 폴링, 롱폴링, 스트리밍

→ HTTP 통신이므로 req, res 둘 다 Header가 불필요하게 크다

폴링

• 폴링
  
  • 서버로 일정 주기로 요청을 계속 송신

 

롱 폴링

• 롱 폴링 (long polling)
  • 폴링의 개선 버전
  • 서버에 요청 보내고 응답 받을 때까지 커넥션을 유지함
  • 응답 받고면 끊고 다시 요청
  • 많은 양의 메세지가 쏟아질 경우 폴링과 같아짐

 

스트리밍

• 스트리밍
  • 서버에 요청을 보내고 끊기지 않은 연결상태에서 끊임없이 데이터 수신
  • 클라이언트에서 서버로의 데이터 송신은 어려움

---

웹소켓 동작방법

웹소켓 동작 과정 : 핸드쉐이킹 -> 데이터 송수신 -> 커넥션 종료

핸드쉐이킹

• http(80) or https(443)으로 핸드쉐이킹을 한다
• 요청 헤더와 응답헤더

 

메세지 송수신. 요청헤더와 응답헤더 예시

웹소켓으로 메세지를 주고받는다. 메세지는 프레임들로 이루어져있고 그 프레임에는 헤더와 페이로드로 구성되어있다

메세지 송수신

• Message : 여러 frame이 모여 구성하는 하나의 논리적 메세지 단위
• frame : 커뮤니케이션에의 가장 작은 단위 데이터
  • 작은 헤더 + payload로 구성 (http통신의 문제점을 해결하고자 헤더를 작게)
• 웹소켓 통신에 사용되는 데이터는 UTF8 인코딩
  • ex) 0x00 (보내고 싶은 데이터) 0xff

웹소켓으로 메세지를 주고받는다. 메세지는 프레임들로 이루어져있고 그 프레임에는 헤더와 페이로드로 구성되어있다

커넥션 종료

close frame을 주고받으며 연결 종료

웹소켓 정리

• 최초 접속 시에만 http 프로토콜 위에서 핸드쉐이킹. → http header 사용
• 웹소켓 전용 포트 없음. 기존포트 (80, 443)를 사용
• 프레임으로 구성된 메세지라는 논리적 단위로 송수신
• 메세지는 텍스트와 바이너리로 구성

 

---

Socket.io, SockJS

• 웹소켓을 HTML5 이전의 기술로 구현된 서비스에서 사용할 수 있도록 도와줌
• Javascript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현
• WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling을 하나의 API로 추상화
• Socket.io, SockJS로 개발을 하고 클라이언트로 푸시 매새지를 보내면, 웹소켓을 지원하지 않는 브라우저의 경우엔 AJAX LongPolling, MultiPart Streaming 등 다양한 방법으로 내부적으로 푸시 메세지를 보냄

→ 즉, 브라우저와 웹서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하여 웹소켓처럼 보여지도록 기능을 콜백한다

Socket.io와 SockJS의 차이점

• Socket.io
  • NodeJS 기반의 양방향 커뮤니케이션 프레임워크
  • 리얼타임 백엔드/API로 분류
• SockJS
  • WebSocket의 에뮬레이션
  • 모든 브라우저에서 일관성있는 커뮤니케이션 채널을 지원
  • 자바스크립트 유틸리티 & 라이브러리로 분류

( 아래 영문 아티클을 보고 정리하였는데, 솔직히 아직 무슨 차이인지 감이 잘 안온다 🤔  )

Socket.IO vs SockJS: What are the differences?

What is Socket.IO?** Realtime application framework (Node.JS server). Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.

What is SockJS? A WebSocket emulation. It gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server, with WebSockets or without.

Socket.IO belongs to "Realtime Backend / API" category of the tech stack, while SockJS can be primarily classified under "Javascript Utilities & Libraries".

https://stackshare.io/stackups/socket-io-vs-sockjs

 

WebSocket은 문자열들을 주고받기만 할 뿐 형식이 정해져있지 않으므로 어플리케이션에서 해석하기가 힘들다. 때문에 웹소켓 방식은 sub-protocol을 사용해서 주고받는 메세지의 형태를 약속하는 경우가 많다.

---

STOMP

• Simple Text Oriented Message Protocol
• 웹소켓의 sub-protocol 중 하나
• pub / sub 구조
• 명령, 헤더, 바디로 구성된 프레임 기반 프로토콜
  • 텍스트 지향이지만 text or binary 데이터 포함 가능
• 채팅 통신을 위한 형식이 정의되어있음
• HTTP와 유사하게 간단히 정리되어 해석하기 편함
• 일반적으로 웹소켓 위에서 사용

STOMP의 프레임 구조

• 자주 사용되는 명령 : CONNECT, SEND, SUBSCRIBE, DISCONNECT, ...
• 헤더와 바디는 빈 라인으로 구분
• 바디의 끝은 NULL 문자로 설정

STOMP frame 예시

 

💡 STOMP 공식홈페이지에 따르면 RabbitMQ도 STOMP를 구현한 메세지 서버이다.
(https://stomp.github.io/implementations.html)

 

TCP/IP 소켓과 웹소켓의 차이

• 웹소켓 : HTTP 레이어 (RFC-6455) 에서 작동 (7계층 - application)
• TCP/IP 소켓 : 4계층에서 작동
  • TCP : 4계층(Transport) | IP : 3계층(Network)

즉 전혀전혀 다른 것이다!

---

참고자료

[10분 테코톡] 🧲코일의 Web Socket

STOMP와 Spring[Spring Boot] WebSocket과 채팅 (3) - STOMP

Socket.IO vs SockJS | What are the differences?

https://velog.io/@sa1341/HTTP와-TCP의-차이점

https://velog.io/@rhdmstj17/소켓과-웹소켓-한-번에-정리-2