요약
- 기존 HTTP 통신은 클라이언트가 서버로 요청을 보내야만 서버로부터 응답이 돌아오는 단방향 통신이다.
- 반면에, WebSocket 통신은 양방향 통신으로 두 컴퓨터 간 연결만 되면 언제든지 데이터를 전송하거나 수신할 수 있다.
- WebSocket을 통해 보낼 메시지(데이터)를 구조화시키는 규약을 STOMP라 한다.
- STOMP를 통해 모든 사용자에게 메시지를 전송하거나, 특정 사용자에게만 메시지를 전송할 수 있다.
서론
WebSocket 통신은 클라이언트와 서버 간 양방향 통신이 가능한 통신 프로토콜이다. 주로 채팅과 같이 양방향으로 데이터 전달이 요구될 때 사용한다. 이번 고찰에서는 WebSocket 통신이 무엇이고 왜 필요한지에 대해 알아볼 것이다. 또한 STOMP를 이용해 전달할 데이터를 구조화 함으로써 효율적으로 데이터를 전달하는 방법에 대해 알아볼 것이다.
HTTP 통신
우선 WebSocket 통신에 대해 알아보기 전에 HTTP 통신에 대해 알아보자.
HTTP 통신은 클라이언트가 서버로 요청을 보내면, 서버에서 다시 클라이언트로 해당하는 응답을 전달한 후 연결을 종료하는 방식으로 통신이 이루어진다. 이때 클라이언트가 서버에게 요청을 보내지 않으면 서버는 클라이언트에게 데이터를 전송하지 못하는데, 이러한 통신 방법을 단방향 통신이라고 한다.
그렇다면 만약 이러한 환경에서 채팅 서비스를 구현해야한다면 어떻게 구현할 수 있을까?
아마 클라이언트 단에서 일정시간마다 서버에 계속 요청을 보내고 응답을 받아 서버로부터 새로운 메시지가 있는지 확인해야 할 것이다. 하지만 이렇게 구성한다면 서비스를 이용하는 여러 사용자들의 요청이 일정한 주기로 계속 서버로 들어올 것이기 때문에, 서버의 부담이 커지게 될 것이다. 따라서 이를 극복하고자 2014년 HTML5에 WebSocket을 탑재하게 되었다.
WebSocket
WebSocket은 컴퓨터 간 양방향 통신이 가능한 프로토콜이며, 단일 TCP1 연결을 기반한 Full Duplex2 구조의 프로토콜이다. 두 컴퓨터 간 연결을 시작하는 과정(Handshake)에서는 HTTP 통신을 이용3하고, 이후에는 자체적인 WebSocket 프로토콜로 통신하게 된다.
기존 HTTP 통신은 클라이언트가 요청을 하면 서버가 응답한 후 연결을 끊는 방식이었지만, WebSocket 프로토콜의 경우 두 컴퓨터 간 연결을 끊지않고 그대로 유지하며 양방향으로 데이터를 주고받는다. 그리고 클라이언트 혹은 서버 중 어느 한 컴퓨터가 연결 종료를 요청하면 자동으로 둘 간의 통신은 종료된다. 둘 간의 통신이 종료된 후에는 서로 간 통신을 더이상 진행할 수 없고, 또다시 Handshake 과정을 진행해야만 통신을 할 수 있게된다.
WebSocket의 활용 예시
- 실시간 채팅
카카오톡, 라인과 같이 여러 사용자 간 양방향 통신이 필요한 경우 WebSocket을 사용해 해당 기능을 구현할 수 있다. - 실시간 이벤트 데이터 전송
실시간으로 변동되는 경기의 점수나 현재 도로 상황과 같이 수시로 변동되는 정보에 대한 실시간 업데이트가 필요되는 서비스의 경우 WebSocket을 사용해 해당 기능을 구현할 수 있다.
STOMP(Simple Text Oriented Messaging Protocol)
지금까지 WebSocket이 무엇이고, 어떻게 연결을 시작하는지에 대해 알아보았다. 그렇다면 이제 어떠한 데이터를 상대쪽에 전송할까? 기본적으로 WebSocket은 텍스트 혹인 이진(Binary) 데이터를 송수신할 수 있다. 대부분의 경우 텍스트 데이터를 상대쪽에 전송하거나 수신할텐데 이 데이터 안에는 전송할 데이터와 함께 해당 데이터에 대한 메타데이터4도 함께 전송되어야 할 것이다. 이때 전송할 텍스트를 구조화 시키는 규약이 바로 STOMP이다.
개발을 하다보면 Oriented(지향하는)라는 단어를 가끔 마주치곤 한다. 이때 무언가를 지향한다는 것은 “이거를 사용하는 것을 추천하지만 필수는 아니야”라는 의미로 볼 수 있다. 예로 Java는 대표적인 Object-Oriented(객체지향) 언어이다. 이말은 즉슨 Java 프로그램을 개발할때 코드들을 구조화해서 객체화시키는 것을 추천하나 굳이 그렇게 하지 않아도 된다는 말이다. 하지만 해당 기술을 사용함에 있어 개발의 용이성이 많이 개선되기 때문에 사용을 추천하는 것이다.
마찬가지로 STOMP또한 Simple-Text를 지향하는 기술로 전송할 데이터를 구조화할 필요가 있을 때 사용하면 된다.
STOMP 프레임
프레임이란 STOMP에서 메시지를 송수신할 때의 단위이다. 위에서 설명한것과 같이 한쪽에서 다른쪽으로 텍스트형태의 메시지를 보낼 때 아래와 같이 구조화된 텍스트를 보내는 것이다. 프레임은 COMMAND, HEADER, BODY로 구성되어 있다.
아래는 프레임에 대한 두 가지 예시이다.
1
2
SUBSCRIBE <!--COMMAND-->
destination:/channel/01 <!--HEADER-->
1
2
3
4
5
SEND <!--COMMAND-->
content-type:application/json <!--HEADER-->
destination:/channel/01 <!--HEADER-->
{"message":"안녕하세요!","datetime":"2023-07-03 10:09"} <!--BODY-->
COMMAND에는 해당 프레임이 어떤 요청을 하는것인지에 대한 정보를 나타내며SUBSCRIBE나SEND명령을 사용할 수 있다.
![]()
SUBSCRIBE명령은 클라이언트가 특정 소켓 채널에 참여할 때 사용되며, 소켓 채널 내에서 발생하는 메시지를 지금부터 구독(subscribe)한다는 의미로 볼 수 있다. 메시지 구독 이후에 클라이언트는 소켓 채널 내에서 발생하는 메시지를 받을 수 있다.SEND명령은 한 컴퓨터가 다른 컴퓨터로 메시지를 전송할 때 사용하며, 프레임 내BODY에 전송할 데이터를 포함한다. 프레임을 받은 서버는 해당 프레임을 다른 클라이언트들에게 전달해주는 역할을 한다.
HEADER에는 메시지를 전달할 때 서버측에서 인식할 수 있는 인식표와 같은 데이터를 저장한다. 주로 저장되는 데이터는 아래와 같으며 요구에 따라 원하는 데이터를 추가할 수 있다.- 목적지(Destination) : 메시지가 전송되어야 하는 대상 소켓 채널 주소를 저장한다.
- 콘텐츠 타입 : 전송할 데이터
BODY가 어떤 데이터 형식인지 저장한다. - ID : 특정 클라이언트에게 메시지를 전달할 때 사용할 수 있으며 해당 클라이언트의 ID를 저장한다.
BODY에는 다른쪽으로 전달할 텍스트 형식의 데이터로 Json, Text 등의 데이터를 저장한다.
이와같이 STOMP의 다양한 기능들을 활용해서 우리는 같은 소켓 채널을 구독하고 있는 모든 사용자에게 메시지를 전달하거나, 특정 사용자에게 메시지를 전달할 수 있을 것이다.
결론
WebSocket은 기존에 HTTP 통신으로는 비효율적이던 양방향 통신을 보다 효율적으로 구현할 수 있게 만들어준다. 그리고 상대방에게 보낼 데이터를 STOMP를 사용하여 구조화함으로써 같은 채널 내의 모든 클라이언트나, 특정 클라이언트에게 메시지를 전달할 수 있다. 만약 자신이 카카오톡과 같이 실시간 채팅 서비스나 사용자와 서버 간 양방향 통신이 필요한 기능을 구현하는 경우 WebSocket과 STOMP를 사용하여 효율적으로 통신을 할 수 있도록 구현할 수 있을 것이다.
References
- https://en.wikipedia.org/wiki/WebSocket
- https://dev-gorany.tistory.com/212
- https://ably.com/topic/websockets-pros-cons
- https://tecoble.techcourse.co.kr/post/2021-09-05-web-socket-practice/
- https://brunch.co.kr/@springboot/695
TCP는 컴퓨터가 다른 컴퓨터와 데이터 통신을 하기 위한 규악으로, 패킷을 다른 컴퓨터로 전송할 때 정상적으로 연결이 되었는지, 데이터가 정상적으로 보내졌는지에 대한 정보를 추적함으로써 전송 속도는 느릴 수 있지만, 패킷의 안전성 높은 전송을 보장한다. ↩
Full Duplex는 두 컴퓨터간 통신할 수 있는 송신선과 수신선이 각각 존재해 데이터의 송신과 수신이 동시에 가능한 통신 방법이다. ↩
WebSocket의 Handshake 과정에서는 HTTP를 이용하여 통신을 수립하기 때문에 WebSocket을 위한 별도의 포트를 사용하는 것이 아닌, 기존 HTTP 포트인 80, 443포트를 사용한다. ↩
메타데이터는 데이터를 설명해주는 데이터이다. 예를 들면 사진 파일이 있을 때 해당 사진을 찍은 날짜 혹은 위치를 확인할 수 있는데, 이 정보가 바로 메타데이터이다. ↩
Comments powered by Disqus.