Cling-Glee / glee-front

0 stars 1 forks source link

WebSocket 서치 #3

Open yeon0914 opened 12 months ago

yeon0914 commented 12 months ago
  1. 용어 및 배경 지식
  2. 라이브러리
yeon0914 commented 11 months ago

WebSocket

용어정리

WebSocket 이란?

일반적인 http 요청방식은 클라->서버의 단반향 통신이지만 WebSocket은 TCP 연결을 통해서 서버와 클라이언트 사이에 소켓 커넥션을 유지하면서 양방향 통신 채널을 제공하는 기술이다. 연결이 끊기기전까지 지속적으로 양방향 통신을 할 수 있다. image

동작방법

HTTP로 handshake를 초기 통신을 시작한 후, 웹소켓 프로토콜로 변환(protocol switching)하여 데이터를 전송한다. image

클라이언트는 서버에 소켓 연결을 한 상태로 유지된다. 따라서 언제든지 서버에서 보낸 데이터를 받을 준비를 하고 있기때문에 낮은 부하를 사용하여 클라이언트와 서버간의 실시간 통신이 가능하다.

포트

HTTP 포트 80, HTTPS 443 위에서 동작하기때문에 별도의 포트 오픈이 필요없다.

ws, wss

ws는 일반 webSocket, wws는 SSL이 적용된 webSocket(HTTPS) 따라서, wss로 통신해야 시큐어 통신이 가능하다.

WebSocket Emulation 란?

우선 WebSocket을 첫 번째로 시도하고 WebSocket 연결이 실패한 경우에는 HTTP-Streaming, HTTP Long Polling 같은 HTTP 기반의 다른 기술로 전환해 다시 연결을 시도하는 것을 말한다.

STOMP 란?

Simple Text Oriented Messaging Protocol 메세지 전송을 효율적으로 하기위해 탄생한 프로토콜로 기본적으로 pub(publish)/sub(subscribe) 구조로 되어있어 메세지를 전송하고, 메세지를 받아 처리하는 부분이 확실히 정해져있다. 다양한 메세지 브로커와 함께 사용된다. 즉, STOMP 프로토콜은 WebSocket 위에서 동작하는 프로토콜로써 클라이언트와 서버 간 메시지 전송에 사용되는 형식과 규약을 지정한다. 메시지의 헤더와 본문을 명확히 구분하고, 헤더에는 목적지, 우선순위, 유지 기간 등 메시지 전달에 필요한 여러 가지 메타데이터를 지정할 수 있다. image

예시

채팅방 생성 : pub / sub 구현을 위한 Topic이 생성됨 채팅방 입장 : Topic 구독 채팅방에서 메세지를 송수신 : 해당 Topic으로 메세지를 송신(pub), 메세지를 수신(sub)

메시지 브로커란?

메시지 브로커는 어플리케이션 간에 메시지를 전달하는 중간 역할을 하는 서버 컴포넌트로 pub으로부터 전달받은 메세지를 sub에게 전달해주는 중간역할을 한다. 이때 메세지가 적재되는 공간을 Message Queue라고 하며, 메세지 그룹을 Topic이라고 한다.

종류

Apache Kafka, Redis, RabbitMQ, Celery, Amazone Simple Queue Service, Google Cloud Pub/Sub 등이 있다.

라이브러리

Socket.IO

https://socket.io/docs/v4/

기능

특징

SockJS

https://github.com/sockjs/sockjs-node

특징

ws

https://github.com/websockets/ws

특징

StompJS

https://stomp-js.github.io/

서버에서 stomp 서브 프로토콜을 사용한다면 필요. stomp 프로토콜 환경에서 프로토콜 연결, 메세지 전송, 상대방 구독 기능을 제공.


서버가 spring 기반이면 socket.io를 사용안한다는 글이 있어서 좀 알아보니... Socket.io는 클라이언트와, 서버 라이브러리가 함께 사용되어야 하기때문에 만약 Spring Boot에서 쓰려면 추가적인 서버 라이브러리가 필요하다고 합니다. 주로 https://github.com/mrniko/netty-socketio 이 라이브러리를 쓰는거 같았어요. 라이브러리 선택은 서버측이랑 이야기 해봐야 할듯...

oooppq commented 11 months ago

Web Socket?

하나의 통신 프로토콜이다. 서버와 클라이언트(브라우저)간의 연결을 유지한 상태로 데이터를 주고 받을 수 있게 해준다. 이전에는 http 요청을 수동적으로 서버에 주기적으로 보내 실시간 통신을 구현했는데, web socket이 등장한 이후로, 지속적인 http 요청 없이 실시간으로 소통할 수 있게 되었다.

연결 방식

image 일반적인 TCP 통신 과정과 거의 동일하다. 처음에 handshaking 과정을 거친 후, 데이터를 통신(패킷형태)하고, 연결 종료 과정을 거친다.

라이브러리

  1. WebSocket

    • 웹소켓 프로토콜을 가장 로우 레벨의 형태로 사용할 수 있는 내장 라이브러리
    • 다른 라이브러리들에 비해 가볍고, 통신 시 데이터 사용이 상대적으로 작음
    • 연결 복구와 같이 통신 이외의 기능들은 제공하지 않음
    • string 자료형으로만 통신하여 데이터를 읽고 쓸 때 추가적인 작업이 필요
  2. Socket.io

    • 웹소켓 프로토콜을 기반으로 한 라이브러리
    • 데이터 통신 이외의 여러 기능들(연결 복구, 유저를 지정한 action, ...)이 내장되어 있음
    • 많은 기능이 포함된 대신 무거움
    • node.js 기반
  3. SockJS

    • WS와 Socket.io의 중간 레벨 정도의 라이브러리
    • 비교적 가벼움(기본 websocket보단 아니겠지만..)
    • 크로스 브라우징과 같이 어느정도 필수적인 기능을 제외하면 구현해야 하는 경우가 있음
  4. StompJS

    • Client side에서 자체적으로 필요하진 않으나, Server에서 STOMP 프로토콜을 사용한다고 한다면 필요한 라이브러리
    • STOMP 프로토콜을 사용하는 통신에 필요한 기능들을 제공함

무엇을 사용해야 하나?

일단 WebSocket은 제외해야 할 것 같다. web socket이란 개념을 처음 접해봤고, low level부터 직접 필요한 기능을 구현하기에는 기술적 역량이 부족할 것 같다. 또한, 굳이 WS를 사용하면서까지 어플리케이션의 크기를 줄여야 한다거나 통신 비용을 줄여야 하는 이유가 딱히 없기 때문에 비효율적이라고 생각한다.

Socket.io와 SockJS 둘 중 하나를 선택해야 하는데, 일반적으로 server가 node.js 환경이면 socket.io, spring 환경이면 sockJS를 사용한다고 한다. 왜냐하면, spring 자체적으로 지원하는게 sockJS이고, socket.io를 사용하려면 따로 라이브러리가 필요하기 때문이다. 라이브러리를 추가적으로 사용한다는 것 이외에 성능적인 차이를 비교한 정보는 찾을 수 없었다. 하지만, spring에서 기본적으로 지원하는게 sockJS이기 때문에 이것을 사용하는 것이 어떤가 싶다(해외에서는 server 구현할 때 node.js를 많이 사용하는 편이라 socket.io에 대한 레퍼런스들이 상대적으로 많은 것 같긴 함).

또한, 채팅방 기능을 구현할 때에는 대체적으로 server에서 STOMP 프로토콜을 사용한다고 한다. 따라서, Spring server와 web socket 통신을 할 때에 가장 일반적인 경우가 SockJS + StompJS를 사용하는 것인 것 같다.

Reference

web socket 각종 개념 https://velog.io/@guswns3371/WebSocket-Spring

web socket 정의 https://ko.javascript.info/websocket

spring에서의 websocket https://dev-gorany.tistory.com/224