ruslan
6f40e9dc72
- Remove Ожидайте corner badge - Phase 1 (connecting): centered spinner + Подключение к рабочему столу... + elapsed timer - Phase 2 (desktop ready): progress bar fills over 5.8s then fades out - Errors (reconnect) shown in small top-left box only
329 lines
12 KiB
Bash
329 lines
12 KiB
Bash
#!/usr/bin/env bash
|
|
set -euo pipefail
|
|
|
|
RDP_HOST="${RDP_HOST:-}"
|
|
RDP_PORT="${RDP_PORT:-3389}"
|
|
RDP_USER="${RDP_USER:-}"
|
|
RDP_PASSWORD="${RDP_PASSWORD:-}"
|
|
RDP_DOMAIN="${RDP_DOMAIN:-}"
|
|
RDP_SECURITY="${RDP_SECURITY:-}"
|
|
SESSION_ID="${SESSION_ID:-unknown}"
|
|
IDLE_TIMEOUT="${IDLE_TIMEOUT:-1800}"
|
|
ENABLE_HEARTBEAT="${ENABLE_HEARTBEAT:-1}"
|
|
TOUCH_PATH="${TOUCH_PATH:-/api/sessions/${SESSION_ID}/touch}"
|
|
SCREEN_GEOMETRY="${SCREEN_GEOMETRY:-1920x1080x24}"
|
|
DISPLAY_NUM="${DISPLAY_NUM:-:1}"
|
|
|
|
mkdir -p /opt/portal
|
|
cp -r /usr/share/novnc/* /opt/portal/
|
|
|
|
cat > /opt/portal/index.html <<HTML
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<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}
|
|
#co{
|
|
position:fixed;inset:0;z-index:50;background:rgba(8,14,24,.95);
|
|
display:flex;align-items:center;justify-content:center;
|
|
transition:opacity .5s;
|
|
}
|
|
#co.hidden{opacity:0;pointer-events:none}
|
|
.co-inner{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px}
|
|
.co-ring{
|
|
width:64px;height:64px;border-radius:50%;
|
|
border:4px solid rgba(220,232,245,.12);
|
|
border-top-color:#4a9de0;
|
|
animation:spin .9s linear infinite;
|
|
}
|
|
.co-title{color:#dce8f5;font:600 1.1rem/1.4 sans-serif;text-align:center;letter-spacing:.01em}
|
|
.co-timer{color:#6a8aaa;font:400 .85rem sans-serif;min-height:1.2em}
|
|
.co-bar-wrap{
|
|
width:280px;height:4px;background:rgba(220,232,245,.1);
|
|
border-radius:99px;overflow:hidden;
|
|
}
|
|
.co-bar{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#2a8cd6,#4fc3f7)}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
#status{
|
|
position:fixed;left:12px;top:12px;z-index:60;padding:8px 12px;border-radius:8px;
|
|
background:rgba(85,20,20,.9);border:1px solid rgba(255,130,130,.36);
|
|
color:#ffe3e3;font:600 13px/1.25 sans-serif;max-width:min(92vw,560px);display:none;
|
|
}
|
|
.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;
|
|
cursor:grab;user-select:none;touch-action:none
|
|
}
|
|
.nav-panel.dragging{cursor:grabbing;opacity:.85}
|
|
.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="co">
|
|
<div class="co-inner">
|
|
<div class="co-ring"></div>
|
|
<div class="co-title" id="co-title">Подключение к рабочему столу...</div>
|
|
<div class="co-timer" id="co-timer"></div>
|
|
<div class="co-bar-wrap" id="co-bar-wrap" style="display:none">
|
|
<div class="co-bar" id="co-bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="status"></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>
|
|
<button class="nav-btn" id="btn-fs" 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 statusEl = document.getElementById('status');
|
|
const coEl = document.getElementById('co');
|
|
const coTitleEl = document.getElementById('co-title');
|
|
const coTimerEl = document.getElementById('co-timer');
|
|
const coBarWrap = document.getElementById('co-bar-wrap');
|
|
const coBar = document.getElementById('co-bar');
|
|
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;
|
|
let timerInterval = null;
|
|
let timerStart = 0;
|
|
|
|
function startTimer() {
|
|
timerStart = Date.now();
|
|
clearInterval(timerInterval);
|
|
timerInterval = setInterval(() => {
|
|
const s = Math.floor((Date.now() - timerStart) / 1000);
|
|
coTimerEl.textContent = s + ' сек';
|
|
}, 500);
|
|
}
|
|
|
|
function showOverlayWaiting() {
|
|
coTitleEl.textContent = 'Подключение к рабочему столу...';
|
|
coTimerEl.textContent = '0 сек';
|
|
coBarWrap.style.display = 'none';
|
|
coBar.style.width = '0%';
|
|
coEl.style.opacity = '1';
|
|
coEl.style.display = 'flex';
|
|
coEl.classList.remove('hidden');
|
|
statusEl.style.display = 'none';
|
|
startTimer();
|
|
}
|
|
|
|
function showOverlayConnecting() {
|
|
clearInterval(timerInterval);
|
|
coTitleEl.textContent = 'Устанавливается соединение с рабочим столом...';
|
|
coTimerEl.textContent = '';
|
|
coBarWrap.style.display = 'block';
|
|
coBar.style.transition = 'none';
|
|
coBar.style.width = '0%';
|
|
requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
coBar.style.transition = 'width 5.8s cubic-bezier(0.25,0.46,0.45,0.94)';
|
|
coBar.style.width = '100%';
|
|
}));
|
|
setTimeout(hideOverlay, 6200);
|
|
}
|
|
|
|
function hideOverlay() {
|
|
clearInterval(timerInterval);
|
|
coEl.classList.add('hidden');
|
|
setTimeout(() => { coEl.style.display = 'none'; }, 520);
|
|
}
|
|
|
|
function showStatus(text) {
|
|
statusEl.textContent = text;
|
|
statusEl.style.display = 'block';
|
|
}
|
|
|
|
function hideStatus() { statusEl.style.display = 'none'; }
|
|
|
|
function scheduleReconnect(reason) {
|
|
if (manualDisconnect) return;
|
|
if (reconnectAttempts >= MAX_RECONNECT) {
|
|
hideOverlay();
|
|
showStatus('Соединение потеряно. Переподключение не удалось. Откройте сервис заново.');
|
|
return;
|
|
}
|
|
const n = ++reconnectAttempts;
|
|
const delay = DELAYS[Math.min(n-1, DELAYS.length-1)];
|
|
hideOverlay();
|
|
showStatus(\`\${reason} Повтор \${n}/\${MAX_RECONNECT} через \${Math.ceil(delay/1000)} сек.\`);
|
|
reconnectTimer = setTimeout(connect, delay);
|
|
}
|
|
|
|
function connect() {
|
|
if (manualDisconnect) return;
|
|
connected = false;
|
|
hideStatus();
|
|
showOverlayWaiting();
|
|
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);
|
|
showOverlayConnecting();
|
|
});
|
|
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'});
|
|
if (!res.ok) {
|
|
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;
|
|
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.getElementById('btn-fs').addEventListener('click', () => {
|
|
if (!document.fullscreenElement) document.documentElement.requestFullscreen();
|
|
else document.exitFullscreen();
|
|
});
|
|
document.addEventListener('fullscreenchange', () => {
|
|
document.getElementById('btn-fs').textContent = document.fullscreenElement ? '✕' : '⛶';
|
|
document.getElementById('btn-fs').title = document.fullscreenElement ? 'Выйти из полного экрана' : 'На весь экран';
|
|
});
|
|
document.addEventListener('contextmenu', (e) => e.preventDefault());
|
|
|
|
(function(){
|
|
const p = document.querySelector('.nav-panel');
|
|
const SK = 'rdp_nav_pos';
|
|
try { const s = JSON.parse(localStorage.getItem(SK)); if(s){p.style.left=s.x+'px';p.style.top=s.y+'px';} } catch(e){}
|
|
let ox, oy, dragged = false;
|
|
p.addEventListener('pointerdown', e => {
|
|
if (e.target.closest('button')) return;
|
|
dragged = false;
|
|
ox = e.clientX - p.getBoundingClientRect().left;
|
|
oy = e.clientY - p.getBoundingClientRect().top;
|
|
p.setPointerCapture(e.pointerId);
|
|
p.classList.add('dragging');
|
|
});
|
|
p.addEventListener('pointermove', e => {
|
|
if (!p.hasPointerCapture(e.pointerId)) return;
|
|
dragged = true;
|
|
const x = Math.max(0, Math.min(window.innerWidth - p.offsetWidth, e.clientX - ox));
|
|
const y = Math.max(0, Math.min(window.innerHeight - p.offsetHeight, e.clientY - oy));
|
|
p.style.left = x + 'px';
|
|
p.style.top = y + 'px';
|
|
});
|
|
p.addEventListener('pointerup', () => {
|
|
p.classList.remove('dragging');
|
|
if (dragged) try { localStorage.setItem(SK, JSON.stringify({x: parseInt(p.style.left), y: parseInt(p.style.top)})); } catch(e){}
|
|
});
|
|
})();
|
|
|
|
connect();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
HTML
|
|
|
|
export DISPLAY="$DISPLAY_NUM"
|
|
DISPLAY_N="${DISPLAY_NUM#:}"
|
|
rm -f "/tmp/.X${DISPLAY_N}-lock" "/tmp/.X11-unix/X${DISPLAY_N}" 2>/dev/null || true
|
|
Xvfb "$DISPLAY_NUM" -screen 0 "$SCREEN_GEOMETRY" >/tmp/xvfb.log 2>&1 &
|
|
XVFB_PID=$!
|
|
sleep 1
|
|
|
|
x11vnc -display "$DISPLAY_NUM" -rfbport 5900 -forever -shared -nopw -noxdamage >/tmp/x11vnc.log 2>&1 &
|
|
X11VNC_PID=$!
|
|
|
|
websockify --verbose --idle-timeout="$IDLE_TIMEOUT" --web=/opt/portal 6080 localhost:5900 >/tmp/websockify.log 2>&1 &
|
|
WEBSOCKIFY_PID=$!
|
|
|
|
python3 /manager.py >/tmp/manager.log 2>&1 &
|
|
MANAGER_PID=$!
|
|
|
|
cleanup() {
|
|
python3 -c "
|
|
import urllib.request, sys
|
|
try:
|
|
urllib.request.urlopen('http://localhost:7001/disconnect', b'', timeout=3)
|
|
except Exception as e:
|
|
sys.stderr.write(str(e) + '\n')
|
|
" 2>/dev/null || true
|
|
kill "$X11VNC_PID" "$WEBSOCKIFY_PID" "$MANAGER_PID" "$XVFB_PID" 2>/dev/null || true
|
|
exit 0
|
|
}
|
|
trap cleanup TERM INT
|
|
|
|
wait "$WEBSOCKIFY_PID" || true
|
|
cleanup
|