$ yarn add sockjs-client @stomp/stompjs
$ yarn add @types/stompjs @types/sockjs-client --dev

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

@Configuration
@EnableWebSocketMessageBrocker  // WebSocket STOMP 기반 메시징 서버 활성화
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    /**
     * 웹소켓 연결
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")         // 클라이언트가 사용할 웹소켓 엔드포인트
                .setAllowedOriginPatterns("*")    // cors
                .withSockJS();  // SockJS 활성화 (웹 소켓을 지원하지 않는 경우)
    }

    /**
     * 메시지 브로커 설정 (클라이언트 입장에서 구독/발행이란 뜻)
     * STOMP endpoint 설정 커스터마이징
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
		    // Subscribe 구독용 prefix (서버 -> 클라이언트)
		    // topic은 브로드캐스트 메시지용 prefix
		    // queue는 1:1 메시지용 prefix
        registry.enableSimpleBroker("/topic", "/queue");

        // Publish 발행용 prefix (클라이언트 -> 서버)
        registry.setApplicationDestinationPrefixes("/app");
    }
}

@Controller
@RequiredArgsConstructor
public class ChatMessageController {
    @MessageMapping("/chat.send.{roomId}")  // 메시지 보낼 URL 경로, 실제론 /app/chat.send.{roomId}
    @SendTo("/topic/chatroom/{roomId}")     // 구독 경로 해당 URL로 메시지를 받을 수 있음
    public ChatMessage send(@DestinationVariable Long roomId, ChatMessage message) {
        message.setRoomId(roomId);
        message.setSentAt(LocalDateTime.now());

        return message; // 브로드캐스트 메시지 전송
    }
}

@Controller
@RequiredArgsConstructor
public class ChatMessageController {
    @MessageMapping("/private-message")
		public void sendPrivateMessage(PrivateMessage message) {
				// 1:1 메시지 전달
		    messagingTemplate.convertAndSendToUser(
		        message.getRecipient(), // 수신자 ID
		        "/queue/private",       // 목적지 (Spring이 자동으로 /user 추가)
		        message                 // 전송할 메시지
		    );
		}
}

interface UseWebSocketClientProps {
  onMessage: (message: any) => void;
  subscribeUrl: string;
  publishUrl: string;
}

export const useWebSocketClient = ({
	onMessage,
	publishUrl,
	subscribeUrl,
}: UseWebSocketClientProps) => {
	const clientRef = useRef<Client | null>(null);

	useEffect(() => {
		const client = new Client({
			webSocketFactory: () =>
				new SockJS('http://localhost:8080/ws'), // 웹소켓 첫 연결 경로

			onConnect: () => { // 연결이 된 경우 구독부터 하여 메시지 받을 준비를 한다.
				// 구독 경로와 구독의 콜백함수 설정하여 메시지가 온 경우 할 행동
				client.subscribe(subscribeUrl, (message) => {
					const received = JSON.parse(message.body);
					onMessage(received); // 메시지가 오면 처리하는 로직
				});
			},
		});

		client.activate();
		clentRef.current = clent;

		return () => {
			client.deactivate();
		}
	}, [onMessage, publishUrl, subscribeUrl]);

	const sendMessage = (message: ChatMessage) => {
	if (clentRef.current && clentRef.current.connected) {
		clentRef.current.publish({
			destination: publishUrl,
			body: JSON.stringify(message),
		});
	} else {
		console.error('WebSocket is not connected');
	}

	return { sendMessage };
}

export const ChatView = ({ roomId, chatRoomData }: ChatViewProps) => {

	// 구독된 경로로 메시지가 온 경우
	cont handleMessage = (message: ChatMessage) => {
		setMessage((prev) => [...prev, message]);
	}

	const { sendMessage } = useWebSocketClient({
		onMessage: handleMessage,
		publishUrl: `/app/chat.sent.${roomId}`,
		subscribeUrl: `/topic/chatroom/${roomId}`
	});

	const [message, setMessage] = useState<ChatMessage[]>([]);

	const handleSendMessage = (messag: string) => {
		if (message.trim() === '') return;

		const chatMessage: ChatMessage = {
			roomId,
			sender: {유저 아이디},
			message: message,
		}

		sendMessage(chatMessage);
	}

	return (
		<>
			<div style={{ >
				{message.map((msg) => (
					<div
					  key={msg.id}
					  style={{
                display: 'flex',
                justifyContent:
                  msg.sender === {유저아이디} ? 'flex-end' : 'justify-start',
            }}
					>
						<div>
							{msg.message}
						</div>
					</div>
				))}
			</div>
			<div>
				<ChatInput onSendMessage={handleSendMessage} />
			</div>
		</>
	)
}

interface ChatInputProps {
  onSendMessage: (message: string) => void;
}

const ChatInput = ({ onSendMessage }: ChatInputProps) => {
	const [text, setText] = useState<string>('');

  const handleSendMessage = () => {
    onSendMessage(text);
    setText('');
  };

  return (
    <div style={{ display: 'flex' }}>
      <input
        type="text"
        placeholder="메시지 입력"
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
      />
      <button
        onClick={handleSendMessage}
      >
        전송
      </button>
    </div>
  );
}