채팅 프로그램 - 1

프로그램 구조

React, Spring, Websocket, LiveKit을 이용해서

HTTP -> Spring : 로그인, 방 생성, 음성에 참여하는 토큰 생성

WebSocket -> Spring : 실시간 메시지

LiveKit : 실시간 음성

ERD

WebSocket

로그인 후 웹소켓 연결

1. Spring Security의 서버 세션 방식으로 로그인을 처리한다. 로그인에 성공하면 서버는 인증 정보를 HttpSession에 보관하고, 브라우저에는 세션을 식별하는 JSESSIONID쿠키를 전달한다.

2. HttpSession에 로그인 정보를 보관하고 소켓 속성에 저장 후 소켓을 생성한다.

메시지 전달

1. Spring 서버의 /ws/chat에 WebSocket으로 연결한다.

2. 메시지를 보낼 때 대상 방의 roomId를 전달한다.

3. 발신자가 해당 방의 참여자인지 확인하고 메시지를 저장한다. 저장이 완료되면 방 참여자들에게 전달할 이벤트를 발생시킨다.

연결 유지

1. 서버는 PING을 포함한 메시지를 받을 때 소켓에 연결된 HTTP 세션의 인증 정보를 확인한다.

1. 인증 정보가 없거나 세션이 무효화됐다면 연결을 종료한다.

LiveKit을 사용한 음성채팅

음성채팅은 일반 채팅 WebSocket과 별개로 LiveKit 서버에 연결한다.

LiveKit 접속에는 별도의 JWT를 사용한다.

결과물

로그인

웹소켓 채팅

음성 채팅

일렉트론으로 묶어서 프로그램으로 만들 예정이다.