VNC WebSocket 직접 연결 및 Canvas 렌더링 문제 완전 해결

- noVNC API 함수명 오류 수정 (sendPointer, sendKeyEvent -> sendKey) - Canvas 크기 자동 조정 문제 해결을 위한 단순화된 구현 도입 - 기존 Proxmox vnc_lite.html과 동일한 방식으로 재구현 - 복잡한 Canvas 조작 로직 제거하고 noVNC 자체 렌더링에 의존 - 로컬 noVNC 라이브러리 사용으로 버전 호환성 보장 - VNC 연결, 인증, 화면 표시 모든 기능 정상 작동 확인 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-11 23:17:41 +09:00
parent 895b7a8ee7
commit 0dda1423f8
3 changed files with 383 additions and 10 deletions
--- a/farmq-admin/templates/vnc_simple.html
+++ b/farmq-admin/templates/vnc_simple.html
@@ -0,0 +1,138 @@
+<!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: 0px;
+            border: 1px outset;
+            padding: 5px 5px 4px 5px;
+            cursor: pointer;
+        }
+
+        #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) {
+            const password = prompt("Password Required:");
+            rfb.sendCredentials({ password: password });
+        }
+
+        // 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;
+
+        // 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);
+
+        // 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>
+    <div id="screen">
+        <!-- This is where the remote screen will appear -->
+    </div>
+</body>
+</html>