음성 채팅 어플리케이션 - TOVE ON

🤓 개요

스마일게이트 스토브에서 DEV CAMP 인턴 활동을 진행하며 만든 프로젝트이다.
음성 채팅, 텍스트 채팅을 내장한 어플리케이션이며 웹과 앱으로 사용가능하도록 웹 버전, 모바일 버전으로 개발했다.

기술 스택

Front-end : VueJS(Web), Android(Mobile), WebRTC(음성 피어 연결)
Back-end : Spring boot, Spring WebSocket (STOMP Pub/Sub), Spring Security, Redis, MariaDB, CoTRUN
Infra : Aws S3, Aws RDS, Aws Elastic LoadBalance, Nginx
협업 : GIT, GitLab, Zira

역할

시그널링 서버 구축

• WebRTC 전송 정보 중계 로직 구현 ( 참고 : https://withseungryu.tistory.com/category/WebRTC )
• 음성 채팅 방 입장 및 퇴장 로직 구현
• 다중 인스턴스 환경 구축 ( 참고 : https://withseungryu.tistory.com/139?category=931345 )

텍스트 채팅 서버 구축

• 텍스트 채팅 방 입장 및 퇴장 로직 구현
• 메세지 DB & FILE 로깅
• RabbitMQ STOMP Broker 사용

웹 프론트 구현

• 음성 채팅 기능 및 UI 구현
• 음성 컨트롤 기능 구현
• 비동기 처리

전체 아키텍처

인증 채널 아키텍처

텍스트 채팅 아키텍처

음성 채팅 아키텍처

음성 통신 기능을 구현을 위한 Peer 연결로 Full Mesh 구조를 사용했는데,
Full Mesh를 사용한 이유는 해당 어플리케이션을 설계할 때 최대 인원을 8인 이하로 설정해두었고,
영상데이터가 아닌 음성데이터만을 지원하기 때문에 Full Mesh 구조를 선택했다.

🤓 성과 및 달성

음성채팅

• WebRTC를 위한 사용자의 네트워크 정보 교환 ( ICE candidate ), 미디어 정보 교환, 세션 컨트롤 수행
• 보안을 위한 세션 연결 전 JWT를 사용해 AUTH 서버로 인증
• 다중 인스턴스 환경 관리를 위해 각 인스턴스에 연결된 세션 수를 Redis에 캐싱
• 방화벽에 의한 Symmetric NAT 환경에 대비한 릴레이 통신을 지원해주는 TURN 서버 구축

참고 : https://withseungryu.tistory.com/138?category=917456

[WebRTC] TURN 서버의 필요성

텍스트채팅

• 메시지의 효율적인 전송을 위한 STOMP 프로토콜 사용
• 보안을 위한 세션 연결 전 JWT를 사용해 AUTH 서버로 인증과 메시지 로깅
• 확장성, 결함 허용성, 간편한 모니터링을 위한 External Broker로 RabbitMQ STOMP 브로커 사용

🤓 발표 영상