채팅 API 개발

[cotchan]

채팅 API 개발

• 채팅 API를 개발하면서 고민/삽질한 내용 정리
• 예상 기능
  • 채팅방 생성
  • 채팅방 목록 조회
  • 채팅방 상세정보 조회
  • 채팅방 초대하기/나가기
  • 채팅메시지 보내기
  • 채팅방에서 주고받은 메시지 리스트 조회
  • 읽은 메시지 갯수 갱신 (안 읽은 메시지 갯수 표시 목적)

목차

1. 이슈1: 채팅 DB 설계
   • chat_rooms 도메인
   • participants 도메인
2. 이슈2: 채팅방 메시지 보내기/받기
   • WebSocketConfig
   • MessageSender
3. 이슈3: 채팅메시지로 이미지 보낼 수 있도록 하기

---

이슈1: 채팅 DB 설계

• 예상 기능의 요구사항을 충족하면서 nosql의 이점을 살릴 수 있도록 설계하는 방법 고려

chat_rooms 도메인

• 채팅방을 나타내는 도메인
• 아래와 같은 nested array를 사용하여 특정 채팅방 내에 있는 채팅 메시지를 관리하도록 하였음
  • 또한 $slice 연산을 적용하여 채팅방 내 채팅 메시지를 10개씩만 가져오도록 처리

{
  "_id": {},
  "product_id": 3,
  "product_image": "c14sdf2d-0c8c-44fb-a87e-8a7afe4fbb27product1.jpg",
  "first_user_id": 3,
  "second_user_id": 6,
  "identifier": "1-6",
  "chat_messages": [
    {
      "senderId": 1,
      "messageType": 1,
      "message": "테스트 메시지 입니다",
      "createdAt": 1656320454630
    },
    {
      "senderId": 6,
      "messageType": 3,
      "imgUrls": [
        "c16de0a7-0c8c-44fb-a87e-8a7afe4fbb27test1.jpg",
        "fc0a2cf6-2c88-4fae-bf1b-0f96481606dftest2.png",
        "6b06d600-52a8-40f1-a328-4f6cb3df615dtest3.jpg",
        "3d6e58d2-ff68-40e0-81f0-c5df4c2aeb37하이.jpg",
        "21debba4-d5a5-4f4a-a9a9-4c17bbab4ce5바이.png"
      ],
      "createdAt": 1656319631641
    },
    {
      "senderId": 1,
      "messageType": 2,
      "message": "123,456",
      "createdAt": 1656321431112
    }
  ],
  "created_at": 1656319631641,
  "updated_at": 1656321433608
}

participants 도메인

• 채팅방에 참여하는 참여자를 나타내는 도메인
• 하나의 채팅방에 대해 두 명의 참여자가 생성됨
• 채팅방 도메인 외에 참여자 도메인이 필요한 이유
  • 특정 유저가 마지막으로 읽은 chat_messages 기록
  • 해당 데이터를 기반으로 카카오톡처럼 현재 읽지 않은 메시지 갯수
  • 특정 유저가 해당 채팅방을 나갔는지 여부를 판단하기 위함

{
  "_id": {},
  "user_id": 3,
  "chat_room_id": "62b96d2844b3907e8fb28a2d",
  "read_message_size": 10,
  "out": false,
  "created_at": 1656319272618,
  "updated_at": 1656321433608
}

이슈2: 채팅방 메시지 보내기/받기

• 일반 채팅기능은 화면+서버가 결합한 형태로, 화면 코드가 서버에 있어서 두 클라이언트가 서버에 붙어서 화면에 접근하여 실시간 채팅 가능
• 하지만 현재 개발하는 형태는 화면과 서버가 분리되어 있는 상태. 고로 각 클라이언트가 서버에 붙는다고 반대편 클라이언트가 받을 수 있는 게 아님
• 또한, 접속중이지 않은 상대방에게 메시지 전달을 위한 별도의 기능이 필요
  • spring-boot-starter-websocket + Spring Data Mongo로 구현
• 스프링 진영에는 STOMP를 편리하게 사용할 수 있는 spring-boot-starter-websocket 라이브러리 존재. 하지만 해당 라이브러리만 사용하면 반대편 클라이언트가 웹 소켓과 커넥션을 맺고 있을 때만 메시지 전파 가능
• 고로 상대방이 웹 소켓과 커넥션을 맺고 있지 않을 때도 다른 클라이언트에게 메시지를 전송하기 위해 메시지 전송 시 mongodb에 메시지를 저장한다.
• 그 후 상대방이 접속을 하면 아래의 API를 통해 기존에 전송되었던 메시지 전달
  • 채팅방 메시지 목록 조회 API

또한 아래 링크를 참고하여 React의 SockJsClient를 사용해서 React와 연동할 수 있는 방법 리서치

• Realtime Chat app using Kafka, SpringBoot, ReactJS, and WebSockets

그래서 chat-server에 WebSocketConfig, MessageSender를 정의하고 Spring Data Mongo를 사용하여 '채팅방 메시지 보내기/받기' 기능 완성

WebSocketConfig

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws-chat")
                .setAllowedOrigins("http://localhost:3000")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
    }
}

MessageSender

@Slf4j
@Service
@RequiredArgsConstructor
public class MessageSender {

    private final SimpMessagingTemplate template;

    public void send(CreateRequest message) {
        try {
            template.convertAndSend("/topic/chat/" + message.getRoomId(), message);
        } catch (MessagingException e) {
            log.warn("MessageSender send error occurred with roomId: {}", message.getRoomId(), e);
        }
    }
}

이슈3: 채팅메시지로 이미지 보낼 수 있도록 하기

해당 이슈는 아래에 정리하였습니다 :)

• 78