An open API service indexing awesome lists of open source software.

https://github.com/sieunkiim/metachat

Spring boot, Thymeleaf를 활용한 1:N 웹 채팅 (소켓 통신)
https://github.com/sieunkiim/metachat

spring websockets

Last synced: 4 months ago
JSON representation

Spring boot, Thymeleaf를 활용한 1:N 웹 채팅 (소켓 통신)

Awesome Lists containing this project

README

          

# MetaChat

# 🚧 공사중 🚧

# 개발 동기

---

비대면 수업 비중이 점점 늘어나면서 학교에 처음 오는 신입 및 쉰입생 학우들을 위해 개발하게 되었다.

아직 학교가 익숙하지 않은 학우와, 심심한 학우들을 위한 지도 기반 채팅 서비스다.

- 에브리타임에 질문 글 올려도 답이 없었던 경험이 있는가?
- 장소에 관련된 질문 (식당에 사람 많나요?, 버스 정류장에 분실물 있나요? 등..)의 상대방 답에 신뢰할 수 있을까?

> 이런 고충을 해결하기 위해 즉각적인 반응과, 사용자의 위치를 바탕으로 그 건물에 있는지 판단하여 채팅에 나타날 수 있도록 했다
>

[상황 예시]

▶️ 학생A : 지금 학식 먹으러 가면 많이 기다려야하나요??

▶️ 학생B : 사람 완전 많아요..! 차라리 다른거 드세요..!

이 때 학생 B의 말이 진짜인지 아닌지는 순전히 믿음의 영역에 달렸다. 어쩌면 식당에 있지도 않은 친구들이 장난삼아 하는 말일지 고민되는 상황에서, 채팅의 신뢰도를 높이기 위해 학생 B가 식당 건물 내부에 있지 않다면 채팅을 조금 다르게 보여주는 방법을 택했다.

# 프로젝트 설명

---

처음 지도 화면에서 사용자가 원하는 채팅방을 클릭한다 ( 건물 )

해당 채팅방에 입장할 때, 사용자의 위치정보를 가져와 저장되어있는 건물의 위치 사이 거리를 계산하여 반경 45미터 이내의 경우, 건물 내부에 사용자가 있는 것으로 생각한다.

건물 외부에서 채팅방에 입장할 경우, 사용자의 닉네임 앞에 천사 이모티콘이 (😇) 등장하여 사용자의 현재 위치를 간접적으로 알 수 있도록 한다.

사용자의 위치를 지속적으로 얻기 위해서 사용자의 위치가 아닌, 채팅이 발송되는 위치를 체크했다.

---
처음 채팅방 입장 시 보여주는 학교 지도
- 건물을 클릭해 입장 가능하다.

![처음 채팅방 입장 시 보여주는 학교 지도](MetaChat%202e9f2e59accb4126bd09ebb6cf95898c/학교.png)

---
채팅 사용 상황
![기숙사 채팅방에서 아직 도착하지 않은 “승현”이, 먼저 도착한 “정훈”에게 학교 기숙사 소감을 물어보는 상황이다.](MetaChat%202e9f2e59accb4126bd09ebb6cf95898c/Untitled%201.png)

기숙사 채팅방에서 아직 도착하지 않은 “승현”이, 먼저 도착한 “정훈”에게 학교 기숙사 소감을 물어보는 상황이다.

왼쪽 그림과 같이 특정 건물에서 사용자가 채팅을 보낼 때 해당 채팅이 전송된 위치 정보를 통해서

건물의 중심 위치와 사용자의 위치 사이의 거리를 통해 건물 내 외부를 판별한다.

(학교 건물의 크기를 평균으로 대략 반지름 45미터로 반경을 계산하였다.)

# 프로젝트 상세 - 리팩토링 진행중

## Websocket

▶️ Websocket 헨드셰이크를 위한 엔드포인트 지정 ( ”/university” )

[StompConfig]
prefix : ( “/pub” )
broker : ( “/sub” )

- STOMP broker ws://localhost/university/pub/chat/enter

입장시 로직 처리 → ~~/sub/chat/room/{roomId} 로 입장 안내 메시지 전달

직접 환영 인사를 메시지에 set

![Untitled](MetaChat%202e9f2e59accb4126bd09ebb6cf95898c/Untitled%206.png)

- STOMP broker ws://localhost/university/pub/chat/message

사용자가 전송한 메시지 전달 → ~~/sub/chat/room/{roomId} 로 입장 안내 메시지 전달

![Untitled](MetaChat%202e9f2e59accb4126bd09ebb6cf95898c/Untitled%207.png)