feat: RDP ACL exclusivity, mobile wall, nav buttons, resolution xrandr
- RDP сервис может быть назначен только одному пользователю в ACL - Мобильная заглушка на dashboard при ширине < 1024px - rdp-proxy: кнопки навигации, спиннер Ожидайте, реконнект - session_wait_page: тёмная тема, CSS спиннер - kiosk/universal-runtime manager.py: xrandr + cvt --newmode для resolution - Dockerfiles: x11-xserver-utils, x11-utils
This commit is contained in:
+126
-21
@@ -24,53 +24,158 @@ cat > /opt/portal/index.html <<HTML
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>RDP Session</title>
|
||||
<style>html,body,#screen{margin:0;height:100%;background:#111}</style>
|
||||
<style>
|
||||
html,body,#screen{margin:0;height:100%;background:#111}
|
||||
.status{
|
||||
position:fixed;left:12px;top:12px;z-index:50;padding:8px 10px;border-radius:8px;
|
||||
background:rgba(16,22,32,.86);border:1px solid rgba(255,255,255,.18);
|
||||
color:#dce8f5;font:600 13px/1.25 sans-serif;max-width:min(92vw,560px);
|
||||
}
|
||||
.status.error{background:rgba(85,20,20,.9);border-color:rgba(255,130,130,.36);color:#ffe3e3}
|
||||
.status.hidden{display:none}
|
||||
.spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(220,232,245,.3);
|
||||
border-top-color:#dce8f5;border-radius:50%;animation:spin .8s linear infinite;margin-right:7px;vertical-align:middle}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.nav-panel{
|
||||
position:fixed;left:16px;top:64px;z-index:99;display:flex;gap:10px;
|
||||
background:linear-gradient(180deg,rgba(15,24,36,.78),rgba(9,14,22,.86));
|
||||
border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(5px);
|
||||
box-shadow:0 10px 28px rgba(0,0,0,.36);padding:9px 10px;border-radius:14px
|
||||
}
|
||||
.nav-btn{
|
||||
border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:9px 14px;cursor:pointer;
|
||||
background:linear-gradient(180deg,#2a8cd6,#1668a6);color:#fff;font:700 13px/1 sans-serif;
|
||||
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px rgba(10,46,78,.45)
|
||||
}
|
||||
.nav-btn:hover{filter:brightness(1.08)}
|
||||
.nav-btn:active{transform:translateY(1px)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="screen"></div>
|
||||
<div id="status" class="status"><span class="spinner"></span>Ожидайте...</div>
|
||||
<div class="nav-panel">
|
||||
<button class="nav-btn" id="btn-back" type="button" title="Назад">←</button>
|
||||
<button class="nav-btn" id="btn-home" type="button" title="Главная">⌂</button>
|
||||
</div>
|
||||
<script type="module">
|
||||
import RFB from './core/rfb.js';
|
||||
const wsBase = location.pathname.replace(/\/+$/, '');
|
||||
const wsUrl = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + wsBase + '/websockify';
|
||||
const rfb = new RFB(document.getElementById('screen'), wsUrl);
|
||||
rfb.viewOnly = false;
|
||||
rfb.scaleViewport = true;
|
||||
rfb.resizeSession = true;
|
||||
const enableHeartbeat = "${ENABLE_HEARTBEAT}" === "1";
|
||||
const SESSION_CLOSED_URL = '/?session_closed=idle';
|
||||
const CLOSE_PATH = '${TOUCH_PATH}'.replace(/\/touch$/, '/close');
|
||||
function goSessionClosed() {
|
||||
try {
|
||||
if (window.top && window.top !== window) {
|
||||
window.top.location.href = SESSION_CLOSED_URL;
|
||||
return;
|
||||
}
|
||||
} catch (e) {}
|
||||
window.location.href = SESSION_CLOSED_URL;
|
||||
const statusEl = document.getElementById('status');
|
||||
const XK_ALT_L = 0xffe9;
|
||||
const XK_LEFT = 0xff51;
|
||||
|
||||
let rfb = null;
|
||||
let connected = false;
|
||||
let reconnectTimer = null;
|
||||
let reconnectAttempts = 0;
|
||||
const MAX_RECONNECT = 12;
|
||||
const DELAYS = [1000,2000,3000,5000,8000];
|
||||
let manualDisconnect = false;
|
||||
|
||||
function showStatus(text, isError) {
|
||||
const spinner = isError ? '' : '<span class="spinner"></span>';
|
||||
statusEl.innerHTML = spinner + text;
|
||||
statusEl.className = 'status' + (isError ? ' error' : '');
|
||||
}
|
||||
|
||||
function hideStatus() { statusEl.className = 'status hidden'; }
|
||||
|
||||
function scheduleReconnect(reason) {
|
||||
if (manualDisconnect) return;
|
||||
if (reconnectAttempts >= MAX_RECONNECT) {
|
||||
showStatus('Соединение потеряно. Переподключение не удалось. Откройте сервис заново.', true);
|
||||
return;
|
||||
}
|
||||
const n = ++reconnectAttempts;
|
||||
const delay = DELAYS[Math.min(n-1, DELAYS.length-1)];
|
||||
showStatus(\`\${reason} Повтор \${n}/\${MAX_RECONNECT} через \${Math.ceil(delay/1000)} сек.\`, true);
|
||||
reconnectTimer = setTimeout(connect, delay);
|
||||
}
|
||||
|
||||
function connect() {
|
||||
if (manualDisconnect) return;
|
||||
connected = false;
|
||||
showStatus('Ожидайте...');
|
||||
if (rfb) { try { rfb.disconnect(); } catch(e){} }
|
||||
rfb = new RFB(document.getElementById('screen'), wsUrl);
|
||||
rfb.viewOnly = false;
|
||||
rfb.scaleViewport = true;
|
||||
rfb.resizeSession = true;
|
||||
rfb.addEventListener('connect', () => {
|
||||
connected = true;
|
||||
reconnectAttempts = 0;
|
||||
clearTimeout(reconnectTimer);
|
||||
hideStatus();
|
||||
});
|
||||
rfb.addEventListener('disconnect', () => {
|
||||
connected = false;
|
||||
if (!manualDisconnect) scheduleReconnect('Соединение потеряно.');
|
||||
});
|
||||
}
|
||||
|
||||
const enableHeartbeat = "${ENABLE_HEARTBEAT}" === "1";
|
||||
const TOUCH_PATH = '${TOUCH_PATH}';
|
||||
const CLOSE_PATH = TOUCH_PATH.replace(/\/touch$/, '/close');
|
||||
const SESSION_CLOSED_URL = '/?session_closed=idle';
|
||||
|
||||
function goSessionClosed(reason) {
|
||||
const r = reason === 'limit' ? 'limit' : 'idle';
|
||||
try {
|
||||
if (window.top && window.top !== window) { window.top.location.href = '/?session_closed=' + r; return; }
|
||||
} catch(e) {}
|
||||
window.location.href = '/?session_closed=' + r;
|
||||
}
|
||||
|
||||
async function touch() {
|
||||
try {
|
||||
const res = await fetch('${TOUCH_PATH}', {method:'POST', credentials:'include'});
|
||||
const res = await fetch(TOUCH_PATH, {method:'POST', credentials:'include'});
|
||||
if (!res.ok) {
|
||||
goSessionClosed();
|
||||
let reason = 'idle';
|
||||
try { const p = await res.json(); if (p && typeof p.reason === 'string') reason = p.reason; } catch(e) {}
|
||||
goSessionClosed(reason);
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
let closing = false;
|
||||
async function closeSessionNow() {
|
||||
if (closing) return;
|
||||
closing = true;
|
||||
try {
|
||||
await fetch(CLOSE_PATH, {method:'POST', credentials:'include', keepalive:true});
|
||||
} catch (e) {}
|
||||
manualDisconnect = true;
|
||||
clearTimeout(reconnectTimer);
|
||||
try { if (rfb) rfb.disconnect(); } catch(e) {}
|
||||
try { await fetch(CLOSE_PATH, {method:'POST', credentials:'include', keepalive:true}); } catch(e) {}
|
||||
}
|
||||
|
||||
if (enableHeartbeat) {
|
||||
setInterval(touch, 15000);
|
||||
touch();
|
||||
window.addEventListener('pagehide', closeSessionNow);
|
||||
window.addEventListener('beforeunload', closeSessionNow);
|
||||
}
|
||||
|
||||
function chord(mod, key, modCode, keyCode) {
|
||||
if (!rfb) return;
|
||||
rfb.sendKey(mod, modCode, true);
|
||||
rfb.sendKey(key, keyCode, true);
|
||||
rfb.sendKey(key, keyCode, false);
|
||||
rfb.sendKey(mod, modCode, false);
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
manualDisconnect = true;
|
||||
clearTimeout(reconnectTimer);
|
||||
try { if (window.top && window.top !== window) { window.top.location.href = '/'; return; } } catch(e) {}
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
document.getElementById('btn-back').addEventListener('click', () => chord(XK_ALT_L, XK_LEFT, 'AltLeft', 'ArrowLeft'));
|
||||
document.getElementById('btn-home').addEventListener('click', goHome);
|
||||
document.addEventListener('contextmenu', (e) => e.preventDefault());
|
||||
|
||||
connect();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user