Compare commits

..

No commits in common. "1dc09101cc7afdf09ca3b8cbbc4f95e21bb5746f" and "895b7a8ee7c567ff24ee934cb996fbdcc6e72c9f" have entirely different histories.

3 changed files with 10 additions and 516 deletions

View File

@ -533,10 +533,6 @@ def create_app(config_name=None):
if not client.login():
return jsonify({'error': 'Proxmox 서버 로그인 실패'}), 500
# VM 상태 확인
vm_status = client.get_vm_status(node, vmid)
print(f"🔍 VM {vmid} 상태: {vm_status}")
# VNC 티켓 생성
vnc_data = client.get_vnc_ticket(node, vmid)
if not vnc_data:
@ -552,7 +548,6 @@ def create_app(config_name=None):
'vm_name': vm_name,
'websocket_url': vnc_data['websocket_url'],
'password': vnc_data.get('password', ''), # VNC 패스워드 추가
'vm_status': vm_status.get('status', 'unknown'), # VM 상태 추가
'created_at': datetime.now()
}
@ -566,55 +561,6 @@ def create_app(config_name=None):
print(f"❌ VNC API 오류: {e}")
return jsonify({'error': str(e)}), 500
@app.route('/api/vnc/refresh/<session_id>', methods=['POST'])
def api_vnc_refresh_ticket(session_id):
"""VNC 티켓 새로고침 API"""
try:
# 세션 확인
if session_id not in vnc_sessions:
return jsonify({'error': '유효하지 않은 VNC 세션입니다.'}), 404
session_data = vnc_sessions[session_id]
node = session_data['node']
vmid = session_data['vmid']
print(f"🔄 VNC 티켓 새로고침 요청: {node}/{vmid}")
# Proxmox 클라이언트 생성
client = ProxmoxClient(
host=config['proxmox']['host'],
username=config['proxmox']['username'],
password=config['proxmox']['password']
)
if not client.login():
return jsonify({'error': 'Proxmox 로그인 실패'}), 500
# 새 VNC 티켓 생성
vnc_data = client.get_vnc_ticket(node, vmid)
if not vnc_data:
return jsonify({'error': '새 VNC 티켓 생성 실패'}), 500
# 세션 업데이트
vnc_sessions[session_id].update({
'websocket_url': vnc_data['websocket_url'],
'password': vnc_data.get('password', ''),
'updated_at': datetime.now()
})
print(f"✅ VNC 티켓 새로고침 완료: {session_id}")
return jsonify({
'success': True,
'websocket_url': vnc_data['websocket_url'],
'password': vnc_data.get('password', ''),
'message': '새 VNC 티켓이 생성되었습니다.'
})
except Exception as e:
print(f"❌ VNC 티켓 새로고침 실패: {e}")
return jsonify({'error': str(e)}), 500
@app.route('/vnc/<session_id>')
def vnc_console(session_id):
"""VNC 콘솔 페이지"""
@ -626,14 +572,13 @@ def create_app(config_name=None):
session_data = vnc_sessions[session_id]
# 직접 WebSocket VNC 연결 (noVNC) - 간단한 버전으로 테스트
return render_template('vnc_simple.html',
# 직접 WebSocket VNC 연결 (noVNC)
return render_template('vnc_console.html',
vm_name=session_data['vm_name'],
vmid=session_data['vmid'],
node=session_data['node'],
websocket_url=session_data['websocket_url'],
password=session_data.get('password', ''),
vm_status=session_data.get('vm_status', 'unknown'))
password=session_data.get('password', ''))
except Exception as e:
print(f"❌ VNC 콘솔 오류: {e}")

View File

@ -37,7 +37,6 @@
flex: 1;
position: relative;
background: #000;
overflow: hidden;
}
.vnc-status {
@ -59,10 +58,6 @@
#vnc-canvas {
margin: 0;
padding: 0;
background: #000;
display: none;
width: 100%;
height: 100%;
}
.connection-info {
@ -90,9 +85,6 @@
<button id="ctrl-alt-del-btn" class="btn btn-sm btn-warning btn-vnc">
<i class="fas fa-keyboard"></i> Ctrl+Alt+Del
</button>
<button id="wake-screen-btn" class="btn btn-sm btn-info btn-vnc">
<i class="fas fa-eye"></i> 화면 활성화
</button>
<button id="disconnect-btn" class="btn btn-sm btn-danger btn-vnc">
<i class="fas fa-times"></i> 연결종료
</button>
@ -120,23 +112,14 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script type="module">
// Proxmox와 동일한 noVNC 정적 파일 사용
import RFB from '/static/novnc/core/rfb.js';
// HTML 엔티티 디코딩 함수
function decodeHtmlEntities(text) {
const textarea = document.createElement('textarea');
textarea.innerHTML = text;
return textarea.value;
}
// noVNC 라이브러리 import
import RFB from 'https://cdn.jsdelivr.net/npm/@novnc/novnc/core/rfb.js';
// VNC 연결 설정 (HTML 엔티티 디코딩)
const rawWebsocketUrl = '{{ websocket_url|safe }}';
const websocketUrl = decodeHtmlEntities(rawWebsocketUrl);
const websocketUrl = rawWebsocketUrl.replace(/&amp;/g, '&');
const vmName = '{{ vm_name }}';
const rawPassword = '{{ password|safe }}';
const vncPassword = decodeHtmlEntities(rawPassword);
const vmStatus = '{{ vm_status }}';
const vncPassword = '{{ password }}';
let rfb;
let isConnected = false;
@ -150,9 +133,7 @@
try {
console.log('Raw WebSocket URL:', rawWebsocketUrl);
console.log('Decoded WebSocket URL:', websocketUrl);
console.log('Raw Password:', rawPassword);
console.log('Decoded VNC Password:', vncPassword);
console.log('VM Status:', vmStatus);
console.log('VNC Password:', vncPassword);
console.log('RFB 클래스 사용 가능:', !!RFB);
// URL 유효성 검사
@ -163,9 +144,7 @@
// RFB 객체 생성
rfb = new RFB(canvas, websocketUrl, {
credentials: { password: vncPassword },
shared: true,
repeaterID: '',
wsProtocols: ['binary']
shared: true
});
// 이벤트 리스너 등록
@ -173,23 +152,10 @@
rfb.addEventListener('disconnect', onDisconnected);
rfb.addEventListener('credentialsrequired', onCredentialsRequired);
rfb.addEventListener('securityfailure', onSecurityFailure);
rfb.addEventListener('desktopname', onDesktopName);
rfb.addEventListener('clipboard', onClipboard);
// 화면 설정 - noVNC가 자동으로 관리하도록 설
// 화면 크기 자동 조정
rfb.scaleViewport = true;
rfb.clipViewport = false;
rfb.resizeSession = false;
rfb.viewOnly = false;
rfb.focusOnClick = true;
console.log('RFB 객체 생성 완료, 설정:', {
scaleViewport: rfb.scaleViewport,
clipViewport: rfb.clipViewport,
resizeSession: rfb.resizeSession,
viewOnly: rfb.viewOnly,
focusOnClick: rfb.focusOnClick
});
} catch (error) {
console.error('VNC 연결 오류:', error);
@ -203,33 +169,6 @@
isConnected = true;
statusDiv.style.display = 'none';
canvas.style.display = 'block';
// 즉시 Canvas 크기 강제 조정
setTimeout(() => {
forceCanvasResize();
}, 100);
// Canvas 크기 조정
setTimeout(() => {
resizeCanvas();
}, 200);
// Windows 화면 절전모드 해제 시도
setTimeout(() => {
if (rfb) {
console.log('화면 절전모드 해제 시도...');
// 키보드 입력으로 화면 활성화 (마우스 이벤트는 제거)
setTimeout(() => {
try {
rfb.sendKey(0x0020, '', true); // Space 키 누름
setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 키 뗌
} catch(e) {
console.log('키보드 이벤트 전송 실패:', e.message);
}
}, 200);
}
}, 1000);
}
// 연결 해제
@ -256,66 +195,6 @@
showStatus('🔒 보안 실패', 'VNC 보안 인증에 실패했습니다: ' + (e.detail.reason || 'Unknown'), 'danger');
}
// 데스크탑 이름 수신
function onDesktopName(e) {
console.log('VNC 데스크탑 이름:', e.detail.name);
// 강제로 Canvas 크기 조정
setTimeout(() => {
forceCanvasResize();
}, 100);
// 화면 크기 정보 수집
setTimeout(() => {
const canvas = document.getElementById('vnc-canvas');
console.log('Canvas dimensions:', canvas.width, 'x', canvas.height);
console.log('Canvas client size:', canvas.clientWidth, 'x', canvas.clientHeight);
}, 500);
}
// 강제 Canvas 크기 조정
function forceCanvasResize() {
if (!rfb || !isConnected) return;
const container = document.querySelector('.vnc-screen');
const containerRect = container.getBoundingClientRect();
console.log('컨테이너 크기:', containerRect.width, 'x', containerRect.height);
// Canvas를 컨테이너 크기에 맞게 설정
canvas.width = containerRect.width;
canvas.height = containerRect.height;
canvas.style.width = containerRect.width + 'px';
canvas.style.height = containerRect.height + 'px';
console.log('Canvas 크기 강제 설정:', canvas.width, 'x', canvas.height);
// noVNC 스케일링 재설정
rfb.scaleViewport = true;
rfb.resizeSession = false;
// 화면 새로고침 시도
setTimeout(() => {
if (rfb) {
try {
// 마우스 클릭으로 화면 새로고침 유도
canvas.dispatchEvent(new MouseEvent('click', {
clientX: canvas.width / 2,
clientY: canvas.height / 2,
bubbles: true
}));
} catch(e) {
console.log('화면 새로고침 실패:', e.message);
}
}
}, 200);
}
// 클립보드 이벤트
function onClipboard(e) {
console.log('VNC 클립보드:', e.detail.text);
}
// 상태 표시
function showStatus(title, message, type = 'info') {
statusDiv.innerHTML = `
@ -328,35 +207,6 @@
statusDiv.style.display = 'block';
}
// Canvas 크기 조정
function resizeCanvas() {
if (rfb && isConnected) {
console.log('Canvas 크기 조정 시작');
// Canvas 표시
canvas.style.display = 'block';
// noVNC가 자동으로 Canvas 크기를 관리하도록 설정
rfb.scaleViewport = true;
rfb.clipViewport = false;
rfb.resizeSession = false;
console.log('Canvas 설정 완료:', {
scaleViewport: rfb.scaleViewport,
clipViewport: rfb.clipViewport,
resizeSession: rfb.resizeSession
});
// 포커스 활성화
setTimeout(() => {
if (rfb) {
rfb.focus();
console.log('VNC 화면 포커스 완료');
}
}, 100);
}
}
// 전체화면
document.getElementById('fullscreen-btn').onclick = function() {
if (document.fullscreenElement) {
@ -379,70 +229,7 @@
// Ctrl+Alt+Del 전송
document.getElementById('ctrl-alt-del-btn').onclick = function() {
if (rfb && isConnected) {
console.log('Ctrl+Alt+Del 전송 시도...');
rfb.sendCtrlAltDel();
// 화면 활성화 시도
setTimeout(() => {
if (rfb) {
rfb.focus();
// 키보드 입력으로 화면 활성화
try {
rfb.sendKey(0xFF0D, '', true); // Enter 키 누름
setTimeout(() => rfb.sendKey(0xFF0D, '', false), 50); // Enter 키 뗌
setTimeout(() => {
rfb.sendKey(0x0020, '', true); // Space 키 누름
setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 키 뗌
}, 100);
} catch(e) {
console.log('Ctrl+Alt+Del 후 키보드 이벤트 실패:', e.message);
}
console.log('화면 활성화 시도 완료');
}
}, 500);
} else {
console.log('VNC 연결되지 않음 - Ctrl+Alt+Del 실패');
}
};
// 화면 활성화
document.getElementById('wake-screen-btn').onclick = function() {
if (rfb && isConnected) {
console.log('화면 활성화 버튼 클릭 - 절전모드 해제 시도');
// 먼저 Canvas 크기 강제 조정
forceCanvasResize();
// 키보드 입력으로 화면 활성화
setTimeout(() => {
try {
rfb.sendKey(0x0020, '', true); // Space 누름
setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 뗌
setTimeout(() => {
rfb.sendKey(0xFF0D, '', true); // Enter 누름
setTimeout(() => rfb.sendKey(0xFF0D, '', false), 50); // Enter 뗌
}, 100);
setTimeout(() => {
rfb.sendKey(0x0020, '', true); // Space 누름 (다시)
setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 뗌
}, 200);
} catch(e) {
console.log('화면 활성화 키보드 이벤트 실패:', e.message);
}
}, 300);
// 3. Canvas 포커스
setTimeout(() => {
rfb.focus();
const canvas = document.getElementById('vnc-canvas');
canvas.click();
}, 500);
console.log('화면 활성화 시퀀스 완료');
} else {
console.log('VNC 연결되지 않음 - 화면 활성화 실패');
}
};
@ -457,12 +244,6 @@
// 페이지 로드 후 연결 시작 (ES6 모듈은 즉시 사용 가능)
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM 로드 완료, VNC 연결 시작...');
// VM 상태에 따른 안내
if (vmStatus !== 'running') {
showStatus('⚠️ VM 상태 확인', `VM이 현재 ${vmStatus} 상태입니다. 화면이 나타나지 않을 수 있습니다.`, 'warning');
}
setTimeout(connectVNC, 1000);
});
@ -472,16 +253,6 @@
rfb.disconnect();
}
});
// 창 크기 변경 시 Canvas 크기 조정
window.addEventListener('resize', function() {
if (isConnected) {
setTimeout(() => {
forceCanvasResize();
resizeCanvas();
}, 100);
}
});
</script>
</body>
</html>

View File

@ -1,222 +0,0 @@
<!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>