[Spring boot] Stomp와 SockJS를 사용해 실시간 운동 라이브 방 만들기 - 1

하비·2024년 10월 6일
0

HOW

목록 보기
5/6

How(Home Workout) 프로젝트에서 주 핵심 기능은 실시간 운동 라이브 기능입니다.

How 프로젝트에 대해 알고 싶다면?

어떻게 만들 것인가?(기획)

실시간 운동 라이브 기능을 어떻게 만들 지는 다음과 같이 생각했습니다.

  • 원하는 루틴을 선택해 라이브를 진행 가능
  • 라이브는 최대 6명까지 참여 가능
  • 운동 진행 중에도 참여가 가능하며, 이때 참여한 유저의 경우에는 다음 동작부터 확인이 가능
  • 메뉴바에서 진행 중인 전체 루틴 정보를 확인할 수 있고, 수정 기능을 통해 진행 상황에 맞춰 유동적으로 운동량 조절 가능
  • 운동 진행 상황에 관련된 조작은 라이브를 생성한 유저만 가능

실시간 운동 라이브 기능의 흐름도는 다음과 같이 생각했습니다.

결과물

사용 기술

같은 라이브 방에 참여한 사용자들이 실시간으로 같은 운동 동작을 공유해야하기 때문에 양방향 통신을 할 수 있는 socket 통신을 이용하게 되었습니다.
http 통신과 socket 통신을 간단히 설명하면

HTTP

http 통신은 매번 연결을 맺고, 끊는 비 연결성의 특징을 가지고 있습니다.
그래서 서버는 요청을 받아야 응답을 하는 구조입니다.

Socket

socket 통신은 한번 연결하면 그 연결을 유지합니다. (연결 지향)
그래서 서버는 꼭 요청을 받지 않아도 클라이언트에게 데이터를 전송할 수 있습니다. 즉, 양방향 통신이 가능합니다.

그래서 socket을 이용해 다음과 같은 로직으로 기능을 구현하기로 했습니다.

저는 Spring boot를 사용하고 있었기 때문에 socket 기술 중 WebSocket과 SockJS 2개 중 하나를 사용할 수 있었습니다. 그 중 SockJS를 사용해 구현하기로 하였습니다. 그 이유는 다음과 같은 특징 때문이었습니다.

WebSocket

  • 호환이 안되는 브라우저가 존재합니다.

SockJS

  • WebSocket을 사용하지 않는 환경에서도 웹소켓을 사용하는 것과 같은 비슷한 기능을 제공합니다.
    • http에서 WebSocket과 같은 비슷한 기능을 제공하는데 polling과 streaming 기술입니다.
    • Spring의 sockJS에서는 WebSocket이 호환되지 않는 브라우저의 경우, Streaming 기법을, 그것도 없을 경우 Polling 방식을 사용해 제공합니다. 그렇기에 웹소켓을 제공하지 않는 환경에서도 실시간 통신을 하는 것과 같은 효과를 낼 수 있습니다.

또한 데이터를 주고받는 기술로 stomp를 사용했습니다.

Stomp

SockJS만 사용해도 텍스트 데이터를 전송하는 데에 아무런 문제가 없습니다.
하지만 저희가 구현해야 하는 기능 특성 상, 라이브 방마다 참여자의 구분이 필요하고, 넘겨주는 데이터의 종류가 많기 때문에 효율적인 메세지 관리가 필요했습니다.
또한, 화상 서비스를 제공해야 하기 때문에 프론트에서 webRTC를 사용해야 했습니다.
webRTC로 클라이언트 간 데이터를 주고받기 위해서는 signaling 서버와 turn 서버가 필요했고, stomp가 signaling 서버 역할을 대신했습니다.
그렇기에 stomp를 선택하게 되었습니다.

다음 포스팅에서 이 기술들을 구체적으로 어떻게 사용했는지 올리도록 하겠습니다.

후에 포스팅에서 stomp에 대한 자세한 설명도 올릴 예정입니다.

profile
멋진 개발자가 될테야

0개의 댓글