[FEATURE/CHAT] 임시 채팅 기능 개발

[Cassiiopeia]

💡 Description

서버정보

제 개인 서버에 테스트중인 채팅서비스입니다.

http://220.85.169.165:8090/
http://220.85.169.165:8090/index.html

사용방법

1. 위 주소로 2개의 창을 띄웁니다. 콘솔로그를 띄워놓습니다.
   (MAC의 경우 Option + Command + I )

2. 한창에 원하는 아이디를 생성 (예시: user1) 후 로그인 버튼 클릭
   다른창에도 원하는 아이디를 생성 (예시: user2) 후 로그인 버튼 클릭

3. login 버튼을 누르면 -> 채팅창 목록에 자신이 속한 ChatRoomId가 뜹니다.
   ( 아무것도 뜨지않으면 채팅방이 없는것입니다.
   수신자를 적고 (예: user2) createChatRoom 버튼을 누릅니다 )

4. ChatRoomId를 누릅니다 -> 누르면 채팅메시지 입력칸이 뜹니다.

5. 채팅메시지 입력후 전송버튼 클릭

웹소켓 자체기능은 백엔드쪽에서 테스트하기 어려운부분이있어
일단 급한대로 웹으로 기능테스트를 하였습니다.

MongoDB 정보

DB에 관한 내용 확인하시려면
이쪽에서 GUI로 보실수있어요

http://220.85.169.165:8081/db/chat

아이디: admin 비밀번호: pass 입니다

Mongo DB의 ChatRoom과 ChatMessage의 내용을 삭제하고 테스트하시면 더 잘 보입니다.

API명세서

일단 클라이언트가 메시지를 보낼때 
"/chats"가  엔드포인트의 접두사입니다.

처음 웹소켓 연결할때 엔드포인트는 '/ws' 주소입니다.

client가 구독을 하는 주소는 /chatrooms/{chatRoomId}입니다. 
( chatRoomId 예시(user1_user2) )

1. 채팅방 생성 또는 조회

Endpoint: /chat/chatrooms
Method: POST

: 쿼리 파라미터 필요
senderId (required): 메시지 발신자의 ID
recipientId (required): 메시지 수신자의 ID

{
"chatRoomId": "user1_user2",
"senderId": "user1",
"recipientId": "user2"
}

2. 사용자가 속한 채팅방 목록 조회

Endpoint: /chat/users/{userId}/chatrooms
Method: GET

: 쿼리 파라미터 필요
userId (required): 사용자의 ID

[
  {
    "chatRoomId": "user1_user3",
    "senderId": "user1",
    "recipientId": "user3"
  },
  {
    "chatRoomId": "user1_user2",
    "senderId": "user1",
    "recipientId": "user2"
  },
.. 등등등
]

3. 메시지 전송

Endpoint: /chats/chatrooms/{chatRoomId}/messages
Method: stompclient로 보냅니다. 웹소켓 통신으로 보냅니다.

: 쿼리 파라미터 필요
chatRoomId (required): 채팅방의 ID (예: user1_user2)

{
  "senderId": "user1",
  "recipientId": "user2",
  "content": "hello test 1->2",
  "imageUrl": "null ", 
  "timeStamp": "2021-01-01T00:00:00Z"
}

ChatRoomId 생성 규칙

채팅방 아이디 생성 로직은 user1 과 user2 를 정렬하고  "_" 로 붙입니다.

정렬을 해서 붙이는 이유는 중복 채팅방 생성 방지입니다.

채팅방Id가 user1_user2 과 user2_user1 이런식으로 같은 사용자들끼리 다른 채팅방은 생성되지 않습니다. 

senderId와 recipientId를 바꿔도 무조건 user1_user2 라는 한가지 Id값으로 생성됩니다.

고민

1. 이미지를 어떤식으로 보내야할지 
    - 이미지 Message와 텍스트 메시지를 별도로 분리
    - 텍스트 Message에 이미지는 List<String> 형식으로 분리
    - 텍스트 Message에 별도의 Image객체를 형성해서 붙이기
        - MongoDB를 사용하는 이유는 성능과 빠른 입출력을 위함이기 때문에 크게 고려하고있지는 않습니다.

2. 읽음 표시 로직을 아직 HTTP와 WebSocket의 Session에 대한 공부가 더 필요합니다.

3. Member 프로필 이미지 사진을 ChatMessage안에 포함시켜서 보냈을때

프로필 이미지 사진이 변경되었을때 관리하기 어렵습니다.

프론트엔드에서 사용할수있게 MemeberService에서 따로 아이디를 받았을때 getProfileImage 프로필사진 이미지를 가져오는 GET API를 추가하는것이 어떨까요??

추가로 고민해야하는 기능에 대해서, 개선해야하는 기능에 대해서 의견부탁드립니다.

🚗 Todo

• 이미지는 아직 S3 서비스와 연동
  • 아마 빈값으로 오거나 null로 올것같아요
• 채팅방에대한 메시지 리스트 가져오는 API : 생각해보니 없는것같네요