[스프링] 스프링과 React를 사용한 웹 소켓 통신 구현

18 Dec 2023

스프링

웹 소켓(WebSocket)은 클라이언트와 서버 간의 실시간 양방향 통신을 제공하는 프로토콜입니다. 이번 블로그에서는 스프링(Spring) 프레임워크와 React를 사용하여 웹 소켓 통신을 구현하는 방법에 대해 알아보겠습니다.

1. 스프링 백엔드 구현

먼저, 스프링을 사용하여 웹 소켓 서버를 구현해보겠습니다. 스프링에서는 spring-websocket 모듈을 사용하여 웹 소켓을 쉽게 구현할 수 있습니다.

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new SocketHandler(), "/socket")
                .setAllowedOrigins("*");
    }
}

public class SocketHandler extends TextWebSocketHandler {
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 웹 소켓 메시지 처리 로직 구현
    }
}

위 코드는 /socket 엔드포인트로 웹 소켓 연결을 수락하고, SocketHandler 클래스를 통해 웹 소켓 메시지를 처리하는 방법을 보여줍니다.

2. React 프론트엔드 구현

이제 React를 사용하여 웹 소켓 클라이언트를 구현해보겠습니다. React 애플리케이션에서는 websocket 패키지를 사용하여 웹 소켓을 연결하고 메시지를 주고받을 수 있습니다.

import React, { useEffect } from 'react';
import WebSocket from 'websocket';

const MyComponent = () => {
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080/socket');
    ws.onopen = () => {
      console.log('웹 소켓 연결 성공');
    };
    ws.onmessage = (event) => {
      console.log('받은 메시지: ', event.data);
    };
  }, []);

  return <div>웹 소켓 통신 예제</div>;
};

export default MyComponent;

위 코드는 React 컴포넌트에서 websocket 패키지를 사용하여 웹 솼켓 연결을 설정하고, 메시지를 수신하는 방법을 보여줍니다.

3. 결론

이렇게 스프링과 React를 사용하여 웹 소켓 통신을 구현할 수 있습니다. 웹 소켓을 통해 실시간으로 데이터를 주고받을 수 있는 다양한 기능을 구현할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.

이상으로, 스프링과 React를 사용한 웹 소켓 통신 구현에 대해 알아보았습니다.

목차

1. 스프링 백엔드 구현

2. React 프론트엔드 구현

3. 결론

참고 자료