[SpringBoot] WebSocket 채팅방 구현(1) - 구현 화면

사용 중

• Bootstrap v4.6.0
• DataTables

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

 

CSS 및 Class 명까지 그대로 올리니 나중에 구현할 때 감안할 것

 

직원 목록 및 채팅방 목록을 DataTables 로 구현하였으니

DataTables 을 사용하지 않는 경우 DataTables 을 구현 시 row 에 추가하는 태그들을 참고하길 바란다

 

 

 

구현 화면 예시

 

메시지가 오면 해당 모양이 빨간색으로 변경되고 메시지 수가 올라간다

메시지 이모티콘 클릭 시 오른쪽에서 메신저창이 나오도록 구현하였다

 

 

 

매인화면 하단은 아직 미구현이라 중간에 잘라서 올렸다

 

 

 

 

 

더블클릭 시 대화창으로 변경되며, 이전 대화방이 있다면 대화내용을 불러온다

 

 

 

 

메세지 전송

 

 

 

 

 

 

메시지가 오면 실시간으로

사내 메신저 아래 숫자가 카운터 되고 이모티콘 색상이 변경되며,

채팅방 목록 화면에서도 마지막 메시지와 읽지 않은 메시지 수를 표시한다

 

 

 

 

메세지가 오면 해당 부분도 실시간으로 변경되고 있는데

클릭 시 dropdown 으로 메시지를 표현하는 부분을 구현 중이라 이 글에는 포함하지 않았다

 

---

글 하나에 소스 및 화면을 다 넣고 싶었는데

내용이 너무 길어서 따로 분할하여 올리려고 한다

현재 글은 구현되었을 때 '이런 느낌이구나' 정도만 보면 된다