2024-08-26 (채팅서버 구현 - 2)

저번 시간에 이어서 웹 소켓 연결시 작동되는 메소드 afterConnectionEstablished 

를 활용하여 채팅방에 사람이 들어오면 알려주는 코드를 작성해보자 

 

TestUser는 HttpSession의 Attribute에서 가져온것으로 추후에 다시 설명하도록 하겠다

 

우선 웹 소켓 연결시 유저의 정보를 저장해야할 배열이 필요하기에 멀티쓰레딩 환경에 적합한 

ConcurrentHashMap에 client의 sessionID 를 key로 client의 session을 담아두도록 하자

이제는 사용자가 웹소켓에 들어올때마다 들어왔다는 메세지를 보내기위해 코드를 작성할건데

여러번 고민을 해본 결과 채팅이 갈때 보내야하는 정보는 메세지를 보낸 유저의 이름, 유저의 프로필사진, 메세지 내용 이 세가지만 있으면 되겠다고 생각하게되었고 임의로 담아둘 MessageDTO를 만들어두었다

 

이제 messageDTO에 session에서 가져온 user의 닉네임, 프로필사진을 넣고

message에는 " 님이 들어오셨습니다." 라는 고정 문장을 넣어주고

forEach문을 사용해 CLIENTS에 있는 모든 유저에게 만든 messageDTO를 json으로 변환해서 보내준다

 

자 이제 서버에서 메세지를 보내주면 클라이언트에서는 어떻게 처리하느냐가 궁금한데

인터넷에서 찾아보니 자바 스크립트를 활용해 WebSocket 객체를 만들어 주면 된다고한다

var socket = new WebSocket("ws://192.168.0.131:8080/chat");

내가 처음에 url로 지정해두었던 /chat을 적어서 웹 소켓에 연결해준뒤

socket.onmessage

메소드를 활용해 서버에서 보낸 messageDTO를 다시 Json.parse를 통해 객체로 바꿔준뒤 들어온 상대의 

프로필 사진과 닉네임을 받아오도록 자바스크립트 코드를 설계해보았다

 

 

결과!!