[스프링] 스프링 WebSocket과 멀티미디어 데이터 전송

22 Dec 2023

스프링

이 블로그 글에서는 스프링(Spring) 프레임워크의 WebSocket을 활용하여 멀티미디어 데이터를 전송하는 방법을 소개합니다.

WebSocket과 멀티미디어 데이터

웹소켓(WebSocket)은 실시간 양방향 통신을 지원하는 통신 프로토콜입니다. 스프링에서는 SockJS와 STOMP를 통해 WebSocket을 쉽게 구현할 수 있습니다. 이를 이용하면 클라이언트와 서버 사이의 실시간 양방향 통신을 위한 솔루션을 제공할 수 있습니다.

멀티미디어 데이터는 이미지, 오디오, 비디오 등을 포함하며, 이를 전송하기 위해서는 WebSocket을 통해 실시간으로 이 데이터를 전송해야 합니다.

스프링 WebSocket을 통한 멀티미디어 데이터 전송

여기서는 이미지 데이터를 전송하는 예제를 통해 멀티미디어 데이터를 스프링 WebSocket을 통해 전송하는 방법에 대해 알아보겠습니다.

1. 스프링 웹 소켓 설정

먼저, 스프링 프로젝트에 WebSocket을 설정합니다. 이를 위해서는 @EnableWebSocketMessageBroker 어노테이션을 설정한 Configuration 클래스가 필요합니다.

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    // WebSocket 설정 구현
}

2. 이미지 데이터 전송

이미지를 전송하기 위해서는 클라이언트에서 WebSocket을 통해 서버로 이미지를 전송하고, 서버는 해당 이미지를 다시 클라이언트에 전송하는 기능이 필요합니다.

다음은 클라이언트에서 WebSocket을 통해 이미지를 전송하는 예제입니다.

var socket = new SockJS('/websocket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
    stompClient.send("/app/sendImage", {}, URL.createObjectURL(file));
});

서버에서는 해당 이미지를 받아 처리하여 클라이언트로 이미지를 전송하는 예제입니다.

@MessageMapping("/sendImage")
public void sendImage(String imageUrl) {
    // 이미지 처리
    simpMessagingTemplate.convertAndSend("/topic/receiveImage", imageUrl);
}

3. 클라이언트에서 이미지 수신

마지막으로, 클라이언트에서 이미지를 수신하는 예제입니다.

stompClient.subscribe('/topic/receiveImage', function (imageUrl) {
    // 이미지 처리
    var img = new Image();
    img.src = imageUrl;
    document.body.appendChild(img);
});

결론

이렇게 스프링 프레임워크의 WebSocket을 통해 멀티미디어 데이터를 전송하는 방법을 알아보았습니다. 이를 통해 실시간으로 이미지, 오디오, 비디오 등의 멀티미디어 데이터를 웹 애플리케이션에서 전송하고 처리할 수 있게 됩니다.

참고 자료

“WebSocket (웹소켓)이란?” (https://developer.mozilla.org/ko/docs/Web/API/WebSocket)
“Spring Boot Reference Guide - WebSocket” (https://docs.spring.io/spring-boot/docs/current/reference/html/features.html#features.websockets)