시골약사
0dda1423f8
- 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>
138 lines
4.2 KiB
HTML
138 lines
4.2 KiB
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: 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> |