[기능] 채팅 기능 구현

SeoYehJoon·2024년 9월 27일
0

웹 개인공부

목록 보기
16/22
post-thumbnail

WebSocketConfig


어플리케이션 실행될시 읽히는 파일이다


chatHandler를 /ws/chat/{roomId}에 등록하는 코드가 보인다.중괄호가 있는데 저건 경로 변수이다(uri ?뒤에 있는 변수 말이다) 나중에 보겠지만 채팅 페이지에서 이런식으로 요청한다.

나는 방을 만들어서 원하는 사람끼리 채팅하게 만들었음으로 {roomId}를 붙여준다.






ChatHandler - handleTextMessage


1. if문에서 roomId가 존재하는지 그리고 그 roomId로 만든 방이 존재하는지 확인한다.
2. for문에서는 같은 roomId를 보유한 세션들에게 메세지를 전송한다(sess.sendMessage(message)는 서버 측에서 각 세션에 메시지를 전송하는 역할-> 각 세션의 자바 스크립트의 websocket.onmessage를 실행시키는 모양이다)


후에 템플릿을 보겠지만 이게 websocket.onmessage()콜백 함수이다.






ChatHandler - afterConnectionClosed


ChatHandler의 나머지 두개 함수를 마저 설명하겠다.
각함수의 첫째줄을 보면 session에 바인딩된 roomId를 가져오는데 이게 어디서 나온거냐면

위 WebSocketInterceptor에서 바인딩하였다 이 인터셉터는 WebSocketConfig에서 등록되었다.


그리고 두번째 줄을 보면 특정 룸아이디를 가진 List가 없으면 특정 roomId를 가진 리스트(CopyOnWriteArrayList-> 리스트 구현체)를 생성한다

맨 위에 선언해놓은 맵이 저렇게 생겼기 때문이다 같은 roomId를 공유하는 세션은 같은 리스트(CopyOnWriteArrayList)에 넣어준다.

CopyOnWriteArrayList는 '쓰기'작업 진행시 복사본을 만들어 진행함으로 읽기 작업에 영향을 주지 않는다.(여러 스레드가 안전하게 접근(읽기) 가능)






Chater


1. 위에 보이는 [[${param.roomId}]]는 경로 변수를 받아오는 코드이다 이는 Chater 템플릿을 불러오는 컨트롤러에서 랜덤으로 만들어서 uri에 붙인것이다.컨트롤러는 밑의 사진을 참고하라
2. websocket객체를 생성하는데 성공적으로 생성되면 WebSocketConfig에 등록된 Handler의 afterConnectionEstablished()함수가 실행된다.



잠시 ChatController설명

UUID에 대한 설명은 코드 주석을 참조하길 바란다.
하나는 방코드를 생성하고 채팅룸으로 입장하는 함수이고, 하나는 방장이 준 방코드로 그냥 입장하는 함수이다

send()함수를 포함해 여러가지 콜백함수들이 보인다. 맨처음 코드에는 websocket객체에 각각 정의해놓은 콜백함수를 등록하는게 보인다.
onMessage는 websocket.send()가 실행되었을때도 'call'되지만, 위에서본 핸들러에서도 호출될 수 있다.

onMessage()를 자세히 살펴보자 메세지의 소유자의 세션과 현제 페이지의 세션과 비교해서 프로필 사진과 메세지를 어느 위치에 놓을지 명시하고 있다.






WebSocketInterceptor


전체 코드이다 위에 언급할때 설명한것 말고 따로 설명할게 없다.






실행 영상

profile
책, 블로그 내용을 그대로 재정리하는 것은 가장 효율적인 시간 낭비 방법이다. 벨로그에 글을 쓸때는 직접 문제를 해결한 과정을 스크린샷을 이용해 정리하거나, 개념을 정리할때는 최소2,3개소스에서 이해한 지식을 정리한다.

0개의 댓글