websocket setting

🔌 WebSocket 라이브러리 추가

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

⚙️ WebSocket 설정

• WebSocket의 엔드포인트를 등록하고 설정하는 구성 클래스

@RequiredArgsConstructor
@Configuration
@EnableWebSocket 
public class WebSocketConfig implements WebSocketConfigurer {
    private final SimpleWebSocketHandler simpleWebSocketHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		    //WebSocket 요청을 처리할 핸들러(simpleWebSocketHandler)를 등록
		    //CORS 허용 도메인 설정
        registry.addHandler(simpleWebSocketHandler, "/connect")
                .setAllowedOrigins("http://localhost:3000");
    }
}
/*
📌 @EnableWebSocket
- WebSocket 관련 설정을 활성화하는 어노테이션
- 내부적으로 WebSocketConfigurer 구현 클래스를 자동 인식하여 핸들러 등록
*/

🔄 동작 방식 정리

• registerWebSocketHandlers 메서드는 👉 Spring WebSocket 설정 단계에서 호출됨
• WebSocket 경로(/connect)는 👉 DispatcherServlet, Spring Security 필터 체인보다 먼저 처리됨
• addHandler()로 등록된 엔드포인트는 👉 ❗ Spring MVC 필터 체인(Security 포함)을 거치지 않음
• 따라서 WebSocket 연결 요청은 👉 🔐 JWT 등 인증 정보를 직접 검증해야 함

💻 Front (React 기준)

📦 sockjs-client 설치

npm i sockjs-client

⚡ Vite 설정

vite.config.js → global 설정 추가

export default defineConfig({
  plugins: [react()],
  define: {
    global: 'window',
  },
  server: {
    port: 3000,
    host: true
  }
})