Tiny Star

🏕️내일배움캠프/📂개발자를 위한 공모전 사이트(23.08.16)

개발자를 위한 공모전 사이트 (&&) 9일 _ 실시간 1:1 채팅

청크 2023. 8. 28. 21:21

스파르타 코딩클럽_ 내일 배움 캠프 Spring 트랙 6기

[프로젝트] 개발자를 위한 공모전 사이트 (&&)

2023.08.16 ~ 2023.09.15

 

<프로젝트 정보>

개발도구 : IntelliJ

프로그래밍 언어 : Java

데이터베이스 : MySQL

프레임워크 : Spring / Spring Boot / Spring Security

와이어프레임 : Figma

ERD 설계 : ERD Cloud

Storage : AWS S3

Front : HTML / CSS / JavaScript / JQuery / Bootstrap

 

<프로젝트 내용>

실시간 1:1 채팅을 위해 이번주부터 시작한 웹 소켓 공부!

 

기능 구현 요구사항 : 실시간 1:1 채팅

 

Websocket만 사용하여 구현하더라도 충분히 채팅 기능을 완성할 수 있다고 한다.

그러나 단순 통신 구조이기 때문에 채팅 메세지가 어떤 요청인지, 어떻게 처리해야 하는지에 대한 로직을 별도로 구현이 필요하다.

 

일단 웹 소켓에 대해 하나도 모르는 상태라 하나씩 차근차근 구글링하면서 구현해보기로...

 

우선 build.gradle에 웹 소켓 라이브러리를 추가해줬다.

implementation 'org.springframework.boot:spring-boot-starter-websocket'

 

이후 WebSocketMessageBrokerConfigurer를 구현한 STOMP 엔드포인드를 설정하고, 메세지 브로커가 사용할 pub/sub 엔드포인트를 설정하는

웹 소켓 관련 Config가 필요하다.

package com.sparta.and.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Profile;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

//@Profile("stomp")
@EnableWebSocketMessageBroker
@Configuration
public class StompWebSocketConfig implements WebSocketMessageBrokerConfigurer {

	//sockJS Fallback을 이용해 노출할 endpoint 설정
    //endpoint를 /stomp로 하고, allowedOrigins를 "*"로 하면 페이지에서
    //Get /info 404 Error가 발생한다. 그래서 아래와 같이 2개의 계층으로 분리하고
    //origins를 개발 도메인으로 변경하니 잘 동작하였다.
    //이유는 왜 그런지 아직 찾지 못함
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stomp-chat").setAllowedOrigins("*").withSockJS();
    }

    /*어플리케이션 내부에서 사용할 path를 지정할 수 있음*/
    // //메세지 브로커에 관한 설정
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/pub");
        registry.enableSimpleBroker("/sub");
    }
}

 

팀원과 채팅에 필요한 Dto와 기본 Entity까지 세팅 완료하고 내일 다시 이어서 구현해 볼 예정이다.