[TIL] stomp origin문제, socket에서의 JWT 처리

1. 리엑트 --force 명령어로 설치 (npm install react --force)

모르고 계속 --force로 다운로드하다가 기존 파일과의 버전 호환문제가 발생해서 npm start를 하니까 멈춰 버렸다.

그리고 친절하게 경고 문구를 날려준다.

lock json파일과 이상하다고 하는 부분만 json부분에서 삭제한다.

그리고 npm-module폴더를 삭제하고 하고 다시 npm install을 하면 된다! (나는 부트스트랩 버전 문제였다)

 

2. origin 문제 계속 

소켓을 실행시키니까 oringin 문제가 나와서 에픽으로 테스트 못했는데 알고 보니 스프링 시큐리티에서 설정했던 것이 문제였다.

소켓 테스트를 포스트 맨으로 계속 시도했는데 소켓이 처음에 연결되는 것만 확인하고 그냥 리엑트로 연결했다. 

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();//추후에 도메인한정으로 수정해야한다.
    registry.addEndpoint("/ws").setAllowedOriginPatterns("*");//추후에 도메인한정으로 수정해야한다.
}

public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOriginPattern("*"); //여기를 고침
        config.addAllowedHeader("*");
        config.addAllowedMethod("*"); 
        config.setAllowCredentials(true);
        config.setMaxAge(3600L);
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

 

3.  socket과 http통신

Socket과 HTTP는 모두 컴퓨터 네트워크에서 통신을 할 때 사용되는 프로토콜이다.

 

HTTP는 웹 페이지를 전송하기 위해 사용되는 프로토콜로 클라이언트가 서버에 요청을 보내면, 서버는 요청에 대한 응답으로 HTML, CSS, JavaScript 파일 등을 보내준다. [웹 브라우저와 서버간의 통신 프로토콜이다]

HTTP는 일반적으로 요청과 응답이 이루어지는 일회성 통신이고, 연결이 유지되지 않는다는 특징이 있다.

 

Socket은 TCP/IP 기반의 네트워크 프로그래밍 인터페이스이다. 

양방향 통신 프로토콜로 클라이언트와 서버가 연결된 상태에서 지속적으로 데이터를 주고받을 수 있다.

채팅 애플리케이션에서 클라이언트와 서버가 소켓을 통해 연결되어 있을때, 클라이언트가 채팅 메시지를 보내면 서버가 즉시 해당 메시지를 수신하고 다른 클라이언트에게 전달할 수 있는것이 이 예시이다.

 

HTTP와 Socket의 차이점은 데이터의 전송 방식과 연결 유지 여부이다. HTTP는 일회성 통신으로, 클라이언트가 서버에 요청을 보내고 서버가 응답을 보내면 연결이 종료되지만, Socket은 연결이 유지되며 양방향으로 데이터를 전송한다.

 

기존에 나는 HTTP의 헤더에 JWT 토큰을 넣어서 통신을 했기 때문에 똑같이 클라이언트의 헤더에 토큰을 넣어서 통신이 되는줄 알았다.

그래서 socket의 헤더에 토큰을 넣고 서버로 통신하면 계속 JWT오류로 401 forbidden 오류가 나는 처리가 안되는 그런상황 

 

그래서 소켓 내의 헤더에 넣고 소켓을 관리하는 부분에서 JWT를 확인하고 소켓을 통신하는 /ws부분만 열어두었다.

[이게 맞는 방법인지 잘 모르겠다.]

public class StompHandler implements ChannelInterceptor {
    private final TokenProvider tokenProvider;

    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);
        if (StompCommand.CONNECT.equals(accessor.getCommand())) {
            tokenProvider.validateToken(Objects.requireNonNull(accessor.getFirstNativeHeader("Authorization")).substring(7));
        }
        return message;
    }
}

@Override
public void configureClientInboundChannel(ChannelRegistration registration) {
    registration.interceptors(stompHandler);
}

 

[참고]

https://velog.io/@jkijki12/%EC%B1%84%ED%8C%85-STOMP-JWT

https://velog.io/@tlatldms/Spring-Boot-STOMP-JWT-Socket-%EC%9D%B8%EC%A6%9D%ED%95%98%EA%B8%B0

https://driip.me/d24af1eb-c5bd-49a9-a9dc-18446274ace5

https://tjdans.tistory.com/25

[나중에 봐야지]

https://velog.io/@raddaslul/Stomp%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EC%B1%84%ED%8C%85-%EB%B0%8F-item-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0