23.10.14 항해 99 16기 실전 프로젝트 10일차

오늘 공부한 것

* CORS 에러 해결

* 채팅 기능 구현을 위한 WebSocket 공부

 

어제 해결하지 못했던 CORS 에러를 해결했다

사실 해결했다기 보단.. 내가 멍청한 짓을 했던것이었다

 

File Zilla에 변경된 jar 파일을 올리는데 이걸 예전폴더에 있던 jar파일을 계속해서 업데이트해서변경된 jar 파일이 업데이트가 안되었던 것이다.. 이런 간단한 문제로 몇시간을 날리다니.. 다시는 이런일이 없도록 해야겠다'그래도 덕분에 CORS 에 관련한 내용 공부는 엄청 많이 한듯 하다

최종 코드는 아래와 같다

 

    //Cors
    @Bean
    public CorsConfigurationSource configurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

        // 요청을 허용할 사이트
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:5173"));
        // 요청을 허용할 Method
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
        // 클라이언트 측의 CORS 요청에 허용되는 헤더 지정
        configuration.setAllowedHeaders(Arrays.asList("*"));
        // 클라이언트 측 응답에서 노출되는 헤더 지정
        configuration.setExposedHeaders(Arrays.asList("*"));
        // 원하는 시간만큼 prefilght 리퀘스트 캐싱
        configuration.setMaxAge(1800L);
        // 클라이언트 측에 대한 응답에 (쿠키, 인증헤더 등) 포함여부 지정
        configuration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        // CORS 설정
        http.cors((cors) -> cors.configurationSource(configurationSource()));

 

이후에는 채팅 기능을 구현하고 싶어서 WebSocket에 대해 공부를 좀해보았다

 

1. WebSocket

 1) WebSocket 이란?

     웹 어플리케이션을 위한 양방향 통신기법으로 실시간성을 보장할 수 있는 방식이다

     따라서 게임, 채팅, 실시간 주석차트, 가상화폐 거래소 등에서 활용된다

     * 웹소켓 프로토콜은 웹 브라우저와 웹 서버간의 통신응 허용하는 프로토콜이다

     * 또 HTTP 통신과의 차이점 : HTTP는 클라이언트가 서버에 요청하는 것이지만, 웹소켓은 서버와 클라이언트간에 

       양방향 요청이 가능하다

 2) HTTP 와 WebSocket 비교

   (1) HTTP

        * 비 연결성

        * 매번 연결을 맺고 끊는 과정의 비용이 많이 든다

        * Request - Response 의 구조를 지닌다

   (2) WebSocket

        * 연결지향적인 특징을 지닌다

        * 한번 연결을 맺은 뒤 계속 유지되는 실시간성을 보장한다

        * 양방향 통신이라는 특징을 지닌다

   (3) WebSocket을 사용해야 하는 이유

        * HTTP는 클라이언트가 원하는 결과를 얻고자 한다면 항상 서버에 요청을 보내야 하지만

          WebSocket은 연결이 계속 유지되고 있으므로 클라이언트가 보낸 메세지를 서버는 그냥 듣고 있기만 하면된다

        * HTTP에 비해  WebSocket이 보내야 하는 메세지, 데이터 양이 훨신적다

        * WebSocket 처음 HandShake를 하는 과정은 HTTP 프로토콜을 통해 진행하겠지만, 한번 연결이 수립된 후로는

          간단한 메세지만 오가는 방식이다

 

2. STOMP

 1) STOMP란?   

    Simple Text Oriented Messaging Protocol의 약자다

    WebSocke 위에서 동작하는 간단한 텍스트기반 메세지 프로토콜로, 클라이언트와 서버가 전송할 메세지의 유형, 형식,

    내용들을 정의한다

    메세지 브로커라는 것을 화용하여 pub-sub(발행-구독) 방식으로 클라이언트와 서버가 쉽게 메세지를 주고 받을 수

    있도록 하는 하위 프로토콜로 볼수 있다

 2) pub-sub(발행-구독) 이란?

    일종의 메세지 패러다임으로 발신자가 어떤 특정경로와 같은 범주로 메세지를 발행하면 이 범주를 구독하고 있는

    그 메세지를 받아볼 수 있는 방식

 3) 메세지 브로커

     발신자의 메세지를 받아와서 수신자들에게 메세지를 전달하는 것

 4) STOMP를 왜 사용해야 할까?

      WebSocke 은 기본적으로 텍스트와 바이너리 타입의 메세지만을 양방향으로 주고 받을 수 있는 프로토토콜이지만

      그 메세지를 어떤 식으로 주고 받을지는 사실 정해진 것이 없다

      그런데 프로젝트 투입인원이 많을 수록 클라이언트와 서버가 어떤 형식으로 메세지를 주고 받으며, 타입은 어떠하며,

      메세지의 본문과 설정정보와 같은 데이터를 어떻게 구분해야 할지를 따로 정의해 주어야 한다

  5) STOMP 사용시 장점

      (1) 메세지 프로토콜과 메시징 형식을 개발할 필요가 없다 (즉, 하위 프로토콜과 메세지 컨벤션을 정의할 필요가 없다)

      (2) 연결 주소마다 새로운 핸들러를 구현하고 설정해줄 필요가 없다

      (3) 메세지 브로커를 사용하면 구독을 관리하고 메세지를 Broadcast 하는데 사용할 수 있다

  6) STOMP Frame

      COMMAND 
      header1:value1 
      header2:value2 

      Body^@

 

     STOMP는 COMMAND, header, Body 라는 형식으로 골격이 정해져있다

 7) STOMP 기반의 통신흐름

     (1) 구독자들은 "/topic" 결로를 구독하고 있는 상황

     (2) 발신자는 서버를 통한 가공 및 처리를 위해 "/app" 주소로 메세지 송신

     (3) 가공을 마친 메세지를 "/topic" 이라는 경로에 담아서 전송하면 그 메세지를 메세지 브로커가 전달 받음

     (4) 메세지 브로커는 "/topic"을 구독중인 구독자들에게 최종적으로 전달

 

WebSocket 참고 블로그

https://velog.io/@msung99/%EC%9B%B9%EC%86%8C%EC%BC%93%EA%B3%BC-STOMP%EB%A5%BC-%ED%86%B5%ED%95%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%ED%86%B5%EC%8B%A0-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

웹소켓과 STOMP, Spring Messaging을 통한 실시간 통신 이해하기 (+ HTTP Poliing 과 비교)