백엔드: Spring Boot

Maven 의존성

Spring Boot 공식 스타터 사용

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

WebSocket 설정 클래스

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/wshub/topic");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/wshub/webServer").setAllowedOrigins("*").withSockJS();
    }
}

WebSocket 컨트롤러

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/wshub")
public class WebSocketController {
    @Autowired
    private SimpMessagingTemplate template;

    @MessageMapping("/subscribe")
    public void subscribe(MessageVO message) {
        for (int i = 1; i <= 20; i++) {
            template.convertAndSend("/wshub/topic/getResponse", message.getName());
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}

프론트 엔드: React

라이브러리 설치

yarn add sockjs-client webstomp-client

WebSocket 연결 설정

import { Button } from "antd";
import { useEffect, useState } from "react";
import SockJS from "sockjs-client";
import Stomp from "webstomp-client";

const ChatView = () => {
    const [stompClient, setStompClient] = useState();
    const [newMessage, setNewMessage] = useState();
    const [messages, setMessages] = useState([]);
    const [isConnected, setIsConnected] = useState(false);

    const connectToServer = () => {
        const socket = new SockJS("https://172.16.1.219:3000/server/wshub/webServer");
        const client = Stomp.over(socket)();
        client.connect(
            {},
            frame => {
                setIsConnected(true);
                console.log("연결 성공:", frame);
                client.subscribe("/wshub/topic/monitor", message => {
                    console.log("수신 메시지:", message);
                    const receivedMsg = { content: message.body };
                    setNewMessage(receivedMsg);
                });
            },
            error => {
                console.log("연결 실패:", error);
            }
        );
        window.stompClient = client;
        setStompClient(client);
    };

    const sendMessage = () => {
        stompClient.send('/subscribe', JSON.stringify({ 'name': "테스트 메시지" }));
    };

    useEffect(() => {
        if (newMessage) {
            setMessages([newMessage, ...messages]);
        }
    }, [newMessage]);

    return (
        <div>
            <div>
                {messages.map(msg => (
                    <div key={msg.content}>{msg.content}</div>
                ))}
            </div>
        </div>
    );
};

export default ChatView;