오늘은 할래? 프로젝트에 적용할 채팅 기능 관련해 적어보려 한다.
우선 100% 이해 한 것이 아닌 사용하는데 필요한 정도로 알아보고 적용한 것으로 추가적인 공부가 필요한것을 알린다.
기본적으로 3가지를 알아둬야한다.
WEBSOCKET
클라이언트와 서버간의 실시간 통신을 가능하게 해주는것으로 채팅, 알림 기능과 구현에 사용된다.
SockJS
WEBSOCKET으로 구현한 채팅 기능을 모든 브라우저에서 사용가능 한것이 아니기 때문에 SockJS를 통해 각 브라우저마다 맞게 자동 설정을 해준다.
(CORS에 관련된 지식이 필요한 부분이지만 프로젝트 기한에 맞춰 구현하기위해 최소한으로 알고 정리한 것이다)
STOMP
WEBSOCKET을 통해 채팅 기능을 구현할때 Endpoint와 broker 등과 같은 메소드를 사용해 구현할때 편리함을 준다.
위의 3가지의 부분을 정확히 이해한 후 구현해야 재대로된 채팅 기능을 구현 할 수 있을것 같다.
하지만 본인은 프로젝트 기한에 맞춰 채팅기능을 구현해야 함으로 최소한 으로 기능이 어떤식으로 돌아가는지 파악하고 적용 후 추후 자세한 공부를 진행할 예정이다.
바로 코드 설명으로 들어가도록 한다.
위의 코드는 STOMP를 이용해 클라이언트와 서버 간의 연결을 위한 Endpoint 설정과 클라이언트에서 보내는 메세지를 유저가 속한 socket에 보내주도록 도와주는 Broker을 설정한다.
위의 코드는 브로커로 받은 메세지를 원하는 채팅방에 메세지를 전달하게 하는 코드이다.
클라이언트에서 메세지의 내용과 전달될 채팅방의 이름 등 을 데이터로 받아와 전달되어야 할 각 방으로 데이터를 전달한다.
예를 들어 1번방에서 들어온 데이터를 1번방으로 전달해줘야하고 2번방에서 들어온 데이터는 2번방으로 전달해 줘야하는데 이러한 기능을 해주는 역할을 하는 것이다.
다음 클라이언트 코드를 보고 난 후 추가적으로 설명해보겠다.
위의 코드는 클라이언트 js 코드로 Enpoint로 설정한 /chatting 주소의 socket을 생성하고 연결해주는 코드 이고 stompClient.subscribe로 앞서 설정한 메세지를 보내줄 주소를 입력한다.
다음으로 해당 방에 전송할 메세지와 전달될 방의 주소를 같이 Broker에 위와 같이 전송해 주면 앞서 설정한 Broker가 해당하는 방의 주소에 맞게 메세지를 전달해 준다.
위와 같이 간단하게 작동에 필요한 지식만으로 채팅기능을 이해하고 /topic/{roomNumber} 에서 roomNumber의 데이터를 디비에 저장 해 채팅방을 나누는 형식으로 진행하려 한다.
또한 SockJs, Stomp 에 대한 공부를 이어가도록 할 예정이다.
위의 게시글에 작성된 코드를 통해 바로 적용 할 수 있었습니다.
문제가 된다면 글 수정 하도록 하겠습니다.
