[Spring boot] 스프링부트 웹소켓 SockJs 구성하기

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

이번 파이널 프로젝트 SNS 홈페이지 구성중 제가 맡은 부분의 실시간 알림 기능을 구현하다보니 웹소켓이 필요했습니다.
웹소켓은 기본 틀이 있어서, 기본 개념과 구성원리만 알면 틀을 잡는 것은 어렵지 않아 보인답니다.

스프링부트 웹소켓 SockJS를 사용하여 알림을 구현하려면 다음 단계를 따라해보시기 바랍니다.

 

[1. xml 설정]

스트림으로 프로젝트를 작성하여 WebSocket 및 SockJS를 사용할 수 있도록 의존성을 추가합니다.

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
</dependencies>

 

 

[2. WebSocket 구성 설정]

WebSocket 구성 파일을 제작하여 WebSocket 엔드포인트 및 SockJS를 활성화합니다.

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // 메시지 브로커 구성
        config.setApplicationDestinationPrefixes("/app"); // 메시지를 보낼 엔드포인트 prefix 설정
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS(); // SockJS 활성화 및 WebSocket 엔드포인트 등록
    }
}

 

 

[3. 컨트롤러 생성]

WebSocket 일러스트레이션 포인트를 처리할 컨트롤러를 생성합니다.

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class NotificationController {
    @MessageMapping("/sendNotification")
    @SendTo("/topic/notifications")
    public Notification sendNotification(Notification notification) {
        // 실제 알림을 처리하고 필요한 데이터를 전송합니다.
        return notification;
    }
}

 

 

[4. 클라이언트 측 개발]

웹 페이지에 WebSocket 및 SockJS 클라이언트 코드를 추가하여 알림을 표시합니다. 일반적으로 JavaScript 또는 JavaScript 라이브러리를 사용하여 클라이언트를 개발합니다.

var stompClient = null;

function connect() {
    var socket = new SockJS('/ws'); // SockJS를 사용하여 WebSocket 연결
    stompClient = Stomp.over(socket);

    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
    });
}

function sendNotification() {
    var notification = /* 생성한 알림 데이터 */;
    stompClient.send("/app/sendNotification", {}, JSON.stringify(notification));
}

stompClient.subscribe('/topic/notifications', function (notification) {
    // 실시간 알림을 받아 처리
    var message = JSON.parse(notification.body);
    // 화면에 알림을 표시하는 코드 추가
});

 

[5.응용프로그램]

스프링 응용프로그램

 

 

이러한 과정으로 스프링 부트 웹소켓 설정을 완료할 수 있습니다.