headscale-tailscale-replace.../farmq-admin/templates/vnc_simple.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ vm_name }} - VNC 콘솔</title>

    <style>
        body {
            margin: 0;
            background-color: dimgrey;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        html {
            height: 100%;
        }

        #top_bar {
            background-color: #6e84a3;
            color: white;
            font: bold 12px Helvetica;
            padding: 6px 5px 4px 5px;
            border-bottom: 1px outset;
        }
        #status {
            text-align: center;
        }
        #sendCtrlAltDelButton {
            position: fixed;
            top: 0px;
            right: 120px;
            border: 1px outset;
            padding: 5px 5px 4px 5px;
            cursor: pointer;
        }

        #refreshTicketButton {
            position: fixed;
            top: 0px;
            right: 0px;
            border: 1px outset;
            padding: 5px 5px 4px 5px;
            cursor: pointer;
            background-color: #5bc0de;
        }

        #screen {
            flex: 1;
            overflow: hidden;
        }
    </style>

    <script type="module" crossorigin="anonymous">
        // RFB holds the API to connect and communicate with a VNC server
        import RFB from '/static/novnc/core/rfb.js';

        let rfb;
        let desktopName;

        // HTML 엔티티 디코딩 함수
        function decodeHtmlEntities(text) {
            const textarea = document.createElement('textarea');
            textarea.innerHTML = text;
            return textarea.value;
        }

        // When this function is called we have
        // successfully connected to a server
        function connectedToServer(e) {
            status("Connected to " + desktopName);
        }

        // This function is called when we are disconnected
        function disconnectedFromServer(e) {
            if (e.detail.clean) {
                status("Disconnected");
            } else {
                status("Something went wrong, connection is closed");
            }
        }

        // When this function is called, the server requires
        // credentials to authenticate
        function credentialsAreRequired(e) {
            console.log('VNC 인증 정보가 필요합니다. 티켓을 새로고침합니다...');
            refreshVNCTicket();
        }

        // VNC 보안 실패 시 티켓 새로고침
        function onSecurityFailure(e) {
            console.log('VNC 보안 인증 실패:', e.detail);
            status("Authentication failed - refreshing ticket...");
            refreshVNCTicket();
        }

        // VNC 티켓 새로고침
        function refreshVNCTicket() {
            const sessionId = window.location.pathname.split('/').pop();

            fetch(`/api/vnc/refresh/${sessionId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log('✅ 새 VNC 티켓 받음, 재연결 시도...');
                    status("Got new ticket - reconnecting...");

                    // 기존 연결 종료
                    if (rfb) {
                        rfb.disconnect();
                    }

                    // 잠시 후 새 티켓으로 재연결
                    setTimeout(() => {
                        connectWithNewTicket(data.websocket_url, data.password);
                    }, 1000);
                } else {
                    status("Failed to refresh ticket: " + (data.error || 'Unknown error'));
                }
            })
            .catch(error => {
                console.error('티켓 새로고침 실패:', error);
                status("Failed to refresh ticket");
            });
        }

        // 새 티켓으로 재연결
        function connectWithNewTicket(newWebsocketUrl, newPassword) {
            console.log('새 티켓으로 VNC 재연결 시도...');
            status("Reconnecting with new ticket...");

            const decodedUrl = decodeHtmlEntities(newWebsocketUrl);
            const decodedPassword = decodeHtmlEntities(newPassword);

            console.log('새 WebSocket URL:', decodedUrl);
            console.log('새 VNC Password:', decodedPassword);

            // 새 RFB 연결 생성
            rfb = new RFB(document.getElementById('screen'), decodedUrl,
                          { credentials: { password: decodedPassword } });

            // 이벤트 리스너 재등록
            rfb.addEventListener("connect", connectedToServer);
            rfb.addEventListener("disconnect", disconnectedFromServer);
            rfb.addEventListener("credentialsrequired", credentialsAreRequired);
            rfb.addEventListener("desktopname", updateDesktopName);
            rfb.addEventListener("securityfailure", onSecurityFailure);

            // 설정 적용
            rfb.viewOnly = false;
            rfb.scaleViewport = true;
        }

        // When this function is called we have received
        // a desktop name from the server
        function updateDesktopName(e) {
            desktopName = e.detail.name;
        }

        // Since most operating systems will catch Ctrl+Alt+Del
        // before they get a chance to be intercepted by the browser,
        // we provide a way to emulate this key sequence.
        function sendCtrlAltDel() {
            rfb.sendCtrlAltDel();
            return false;
        }

        // Show a status text in the top bar
        function status(text) {
            document.getElementById('status').textContent = text;
        }

        document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
        document.getElementById('refreshTicketButton').onclick = function() {
            refreshVNCTicket();
        };

        // VNC 연결 정보 (서버에서 전달)
        const rawWebsocketUrl = '{{ websocket_url|safe }}';
        const websocketUrl = decodeHtmlEntities(rawWebsocketUrl);
        const rawPassword = '{{ password|safe }}';
        const vncPassword = decodeHtmlEntities(rawPassword);

        console.log('WebSocket URL:', websocketUrl);
        console.log('VNC Password:', vncPassword);

        status("Connecting");

        // Creating a new RFB object will start a new connection
        rfb = new RFB(document.getElementById('screen'), websocketUrl,
                      { credentials: { password: vncPassword } });

        // Add listeners to important events from the RFB module
        rfb.addEventListener("connect", connectedToServer);
        rfb.addEventListener("disconnect", disconnectedFromServer);
        rfb.addEventListener("credentialsrequired", credentialsAreRequired);
        rfb.addEventListener("desktopname", updateDesktopName);
        rfb.addEventListener("securityfailure", onSecurityFailure);

        // Set parameters that can be changed on an active connection
        rfb.viewOnly = false;
        rfb.scaleViewport = true;
    </script>
</head>

<body>
    <div id="top_bar">
        <div id="status">Loading</div>
        <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
        <div id="refreshTicketButton">🔄 Refresh</div>
    </div>
    <div id="screen">
        <!-- This is where the remote screen will appear -->
    </div>
</body>
</html>