[TIL - 20230501] 채팅 시스템 프론트와 연결

빈 프로젝트에서 진행한 WebSocket Stomp 채팅을 스프링 시큐리티와 JWT가 있는 원래 진행하던 프로젝트로 가져와 적용했다. 프론트 분이 깃허브에 올려둔 WebSocket Stomp 채팅 레포지토리를 받으셔서 구현해 두셨는데, 원래 프로젝트로 가져오고 코드가 바뀐 부분이 있어 함께 의논하며 프론트 코드를 수정했다.

 

현재까지 진행된 채팅 화면이다.

현재는 대화할 상대방의 이름을 입력하게 되어있지만, 나중에는 1:1대화하기 버튼을 눌러 대화가 가능하도록 변경할 예정이다.

 

회원가입 화면

 

채팅할 상대방 닉네임 입력 (추후에는 1:1대화 버튼으로 변경할 예정)

 

채팅 보내기

 

 

여기서 다른 사람이 user111에게 채팅을 보내면 user111 쪽에 user333 이 보낸 채팅방이 목록에 뜬다.

 

?!! user222에게로 보내졌다. 이것저것 바꾸다가 엉킨 모양이다. user111에서 user333채팅방으로 이동하면 /sub/chat/roomuser222 가 아닌 /sub/chat/roomuser333으로 바뀌어야 하는데 안바뀐 것 같다.

이건 고쳐주실 예정!