websocket-test.html

<!DOCTYPE html>
<!--
    ========================================
    WebSocket 실시간 알림 테스트 페이지
    ========================================
    
    📋 테스트 방법:
    
    1. 터미널에서 웹 서버 실행:
       cd ../HotDeal 프로젝트 경로
       python3 -m http.server 3000
       
    2. 브라우저에서 페이지 열기:
       http://localhost:3000/websocket-test.html
       
    3. Spring Boot 애플리케이션 실행 확인 (8080 포트)
       
    4. 이벤트 생성 API 호출:
       POST http://localhost:8080/api/event/create
       Content-Type: application/json
       
       {
         "eventType": "HOT_DEAL",
         "eventDiscount": 20,
         "eventDuration": 7,
         "startEventTime": "2025-01-15T00:00:00",
         "productIds": [1, 2, 3]
       }
       
    5. 브라우저에서 실시간 알림 확인
       
    6. 테스트 완료 후 웹 서버 종료:
       터미널에서 Ctrl+C 또는
       lsof -ti:3000 | xargs kill -9
       
    ========================================
-->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Test</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
        #messages { max-height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; }
    </style>
</head>
<body>
    <h1>WebSocket 알림 테스트</h1>
    
    <div class="status info">
        <strong>연결 상태:</strong> <span id="connectionStatus">연결 시도 중...</span>
    </div>
    
    <div>
        <button onclick="testConnection()">연결 테스트</button>
        <button onclick="clearMessages()">메시지 지우기</button>
    </div>
    
    <div id="messages"></div>
    
    <script>
        let stompClient = null;
        let socket = null;
        
        function addMessage(message, type = 'info') {
            const messagesDiv = document.getElementById('messages');
            const timestamp = new Date().toLocaleTimeString();
            const messageDiv = document.createElement('div');
            messageDiv.className = `status ${type}`;
            messageDiv.innerHTML = `<strong>[${timestamp}]</strong> ${message}`;
            messagesDiv.appendChild(messageDiv);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        
        function updateConnectionStatus(status, type = 'info') {
            document.getElementById('connectionStatus').textContent = status;
            document.getElementById('connectionStatus').className = type;
        }
        
        function connect() {
            addMessage('웹소켓 연결 시도 중...', 'info');
            
            try {
                // SockJS를 통한 연결
                socket = new SockJS('http://localhost:8080/ws');
                stompClient = Stomp.over(socket);
                
                // 디버그 모드 활성화
                stompClient.debug = function(str) {
                    console.log('STOMP Debug:', str);
                    addMessage('STOMP Debug: ' + str, 'info');
                };
                
                stompClient.connect({}, 
                    function(frame) {
                        console.log('Connected: ' + frame);
                        addMessage('✅ 웹소켓 연결 성공: ' + frame, 'success');
                        updateConnectionStatus('연결됨', 'success');
                        
                        // 알림 구독
                        stompClient.subscribe('/topic/notification', function(message) {
                            console.log('알림 받음:', message.body);
                            addMessage('🔔 알림: ' + message.body, 'success');
                        });
                        
                        // 이벤트 구독
                        stompClient.subscribe('/topic/events', function(message) {
                            console.log('이벤트 받음:', message.body);
                            addMessage('📡 이벤트: ' + message.body, 'success');
                        });
                        
                    }, 
                    function(error) {
                        console.log('STOMP error: ' + error);
                        addMessage('❌ 연결 실패: ' + error, 'error');
                        updateConnectionStatus('연결 실패', 'error');
                    }
                );
                
            } catch (error) {
                console.error('연결 오류:', error);
                addMessage('❌ 연결 오류: ' + error.message, 'error');
                updateConnectionStatus('연결 오류', 'error');
            }
        }
        
        function testConnection() {
            addMessage('연결 테스트 시작...', 'info');
            
            // 기존 연결이 있으면 해제
            if (stompClient && stompClient.connected) {
                stompClient.disconnect();
                addMessage('기존 연결 해제', 'info');
            }
            
            // 새로 연결
            setTimeout(connect, 1000);
        }
        
        function clearMessages() {
            document.getElementById('messages').innerHTML = '';
        }
        
        // 페이지 로드 시 자동 연결
        window.onload = function() {
            addMessage('페이지 로드됨, 웹소켓 연결 시도...', 'info');
            connect();
        };
        
        // 페이지 종료 시 연결 해제
        window.addEventListener('beforeunload', function() {
            if (stompClient && stompClient.connected) {
                stompClient.disconnect();
                addMessage('페이지 종료로 인한 연결 해제', 'info');
            }
        });
        
        // 연결 상태 모니터링
        setInterval(function() {
            if (stompClient && stompClient.connected) {
                updateConnectionStatus('연결됨', 'success');
            } else {
                updateConnectionStatus('연결 끊김', 'error');
            }
        }, 5000);
    </script>
</body>
</html>