Skip to content

wsssh
wsssh
Commit 57ea848a authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Debug and fix VNC client display issues 

- Add comprehensive logging to Display.flip() method for viewport and scaling debugging
- Fix missing KeyboardUtil object in input/util.js
- Add backbuffer content verification before and after rectangle processing
- Enhance WebSocket message logging for frame data debugging
- Improve error handling for corrupted FramebufferUpdate messages
- Add data skipping for unsupported encodings to prevent connection stalls
- Clean up excessive console.log statements for production readiness
- Verify loading system with cancel button functionality
parent c377af92
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 147 deletions
wssshd2/templates/novnc/input/util.js
View file @ 57ea848a
......@@ -185,3 +185,9 @@ function getKeysym(evt) {
}
window.getKeycode = getKeycode;
window.getKeysym = getKeysym;
// Create KeyboardUtil object for compatibility
window.KeyboardUtil = {
getKeycode: getKeycode,
getKeysym: getKeysym
};
wssshd2/templates/novnc/rfb.js
View file @ 57ea848a
......@@ -175,7 +175,6 @@ class RFB extends EventTargetMixin {
// main setup
Log.Debug(">> RFB.constructor");
console.log("[VNC-CLIENT] RFB constructor called");
// Create DOM elements
this._screen = document.createElement('div');
......@@ -192,10 +191,6 @@ class RFB extends EventTargetMixin {
this._canvas.height = 0;
this._canvas.tabIndex = -1;
this._screen.appendChild(this._canvas);
console.log("[VNC-CLIENT] DOM elements created, canvas size:", this._canvas.width, "x", this._canvas.height);
console.log("[VNC-CLIENT] Canvas element:", this._canvas);
console.log("[VNC-CLIENT] Screen element:", this._screen);
console.log("[VNC-CLIENT] Target element:", this._target);
// Cursor
this._cursor = new Cursor();
......@@ -224,16 +219,12 @@ class RFB extends EventTargetMixin {
// NB: nothing that needs explicit teardown should be done
// before this point, since this can throw an exception
try {
console.log("[VNC-CLIENT] Creating Display object with canvas:", this._canvas);
this._display = new Display(this._canvas);
console.log("[VNC-CLIENT] Display object created successfully:", this._display);
} catch (exc) {
console.error("[VNC-CLIENT] Display exception:", exc);
Log.Error("Display exception: " + exc);
throw exc;
}
this._display.onflush = this._onFlush.bind(this);
console.log("[VNC-CLIENT] Display onflush handler set");
this._keyboard = new Keyboard(this._canvas);
this._keyboard.onkeyevent = this._handleKeyEvent.bind(this);
......@@ -610,17 +601,11 @@ class RFB extends EventTargetMixin {
}
_socketOpen() {
console.log("[VNC-CLIENT] WebSocket opened, connectionState:", this._rfbConnectionState, "initState:", this._rfbInitState);
// console.log("[VNC-DEBUG] WebSocket opened, starting VNC handshake");
if ((this._rfbConnectionState === 'connecting') &&
(this._rfbInitState === '')) {
this._rfbInitState = 'ProtocolVersion';
Log.Debug("Starting VNC handshake");
console.log("[VNC-CLIENT] Starting VNC handshake, set init state to ProtocolVersion");
// console.log("[VNC-DEBUG] Set init state to ProtocolVersion");
} else {
console.log("[VNC-CLIENT] Unexpected socket open - connectionState:", this._rfbConnectionState, "initState:", this._rfbInitState);
// console.log("[VNC-DEBUG] Unexpected socket open - connectionState:", this._rfbConnectionState, "initState:", this._rfbInitState);
this._fail("Unexpected server connection while " +
this._rfbConnectionState);
}
......@@ -887,7 +872,6 @@ class RFB extends EventTargetMixin {
break;
case 'connected':
console.log("[VNC-CLIENT] Connection state changed to CONNECTED");
this.dispatchEvent(new CustomEvent("connect", { detail: {} }));
break;
......@@ -944,7 +928,6 @@ class RFB extends EventTargetMixin {
}
_handleMessage() {
console.log("[VNC-MESSAGE] _handleMessage called, rQlen:", this._sock.rQlen, "connectionState:", this._rfbConnectionState, "initState:", this._rfbInitState);
if (this._sock.rQlen === 0) {
Log.Warn("handleMessage called on an empty receive queue");
return;
......@@ -955,37 +938,21 @@ class RFB extends EventTargetMixin {
Log.Error("Got data while disconnected");
break;
case 'connected':
console.log("[VNC-MESSAGE] Processing messages in connected state");
let msgCount = 0;
while (true) {
if (this._flushing) {
console.log("[VNC-MESSAGE] Flushing, breaking message loop");
break;
}
console.log("[VNC-MESSAGE] Calling _normalMsg, rQlen before:", this._sock.rQlen);
const result = this._normalMsg();
console.log("[VNC-MESSAGE] _normalMsg returned:", result, "rQlen after:", this._sock.rQlen);
if (!result) {
console.log("[VNC-MESSAGE] _normalMsg returned false, breaking");
if (!this._normalMsg()) {
break;
}
if (this._sock.rQlen === 0) {
console.log("[VNC-MESSAGE] No more data in queue");
break;
}
msgCount++;
if (msgCount > 10) { // Prevent infinite loops
console.log("[VNC-MESSAGE] Too many messages processed, breaking to prevent infinite loop");
break;
}
}
break;
case 'connecting':
console.log("[VNC-MESSAGE] Processing messages in connecting state");
while (this._rfbConnectionState === 'connecting') {
console.log("[VNC-MESSAGE] Calling _initMsg, initState:", this._rfbInitState);
if (!this._initMsg()) {
console.log("[VNC-MESSAGE] _initMsg returned false, breaking");
break;
}
}
......@@ -1350,29 +1317,23 @@ class RFB extends EventTargetMixin {
// Message Handlers
_negotiateProtocolVersion() {
console.log("[VNC-DEBUG] _negotiateProtocolVersion called");
if (this._sock.rQwait("version", 12)) {
console.log("[VNC-DEBUG] Waiting for version data");
return false;
}
const versionStr = this._sock.rQshiftStr(12);
console.log("[VNC-DEBUG] Received version string:", versionStr);
const sversion = versionStr.substr(4, 7);
Log.Info("Server ProtocolVersion: " + sversion);
let isRepeater = 0;
switch (sversion) {
case "000.000": // UltraVNC repeater
console.log("[VNC-DEBUG] Detected UltraVNC repeater");
isRepeater = 1;
break;
case "003.003":
case "003.006": // UltraVNC
console.log("[VNC-DEBUG] Setting RFB version to 3.3");
this._rfbVersion = 3.3;
break;
case "003.007":
console.log("[VNC-DEBUG] Setting RFB version to 3.7");
this._rfbVersion = 3.7;
break;
case "003.008":
......@@ -1380,11 +1341,9 @@ class RFB extends EventTargetMixin {
case "004.000": // Intel AMT KVM
case "004.001": // RealVNC 4.6
case "005.000": // RealVNC 5.3
console.log("[VNC-DEBUG] Setting RFB version to 3.8");
this._rfbVersion = 3.8;
break;
default:
console.log("[VNC-DEBUG] Invalid server version:", sversion);
return this._fail("Invalid server version " + sversion);
}
......@@ -2058,16 +2017,13 @@ class RFB extends EventTargetMixin {
}
_negotiateServerInit() {
console.log("[VNC-DEBUG] _negotiateServerInit called");
if (this._sock.rQwait("server initialization", 24)) {
console.log("[VNC-DEBUG] Waiting for server initialization data");
return false;
}
/* Screen size */
const width = this._sock.rQshift16();
const height = this._sock.rQshift16();
console.log("[VNC-DEBUG] Server screen size:", width, "x", height);
/* PIXEL_FORMAT */
const bpp = this._sock.rQshift8();
......@@ -2083,8 +2039,6 @@ class RFB extends EventTargetMixin {
const blueShift = this._sock.rQshift8();
this._sock.rQskipBytes(3); // padding
console.log("[VNC-DEBUG] Server pixel format - bpp:", bpp, "depth:", depth, "trueColor:", trueColor);
// NB(directxman12): we don't want to call any callbacks or print messages until
// *after* we're past the point where we could backtrack
......@@ -2133,13 +2087,11 @@ class RFB extends EventTargetMixin {
// we're past the point where we could backtrack, so it's safe to call this
this._setDesktopName(name);
console.log("[VNC-CLIENT] Server init complete - screen:", width, "x", height, "name:", name);
this._resize(width, height);
if (!this._viewOnly) { this._keyboard.grab(); }
this._fbDepth = 24;
console.log("[VNC-CLIENT] Keyboard grabbed, fbDepth set to 24");
if (this._fbName === "Intel(r) AMT KVM") {
Log.Warn("Intel AMT KVM only supports 8/16 bit depths. Using low color mode.");
......@@ -2493,13 +2445,12 @@ class RFB extends EventTargetMixin {
msgType = 0;
} else {
if (this._sock.rQlen < 1) {
console.log("[VNC-MESSAGE] Not enough data for message type, rQlen:", this._sock.rQlen);
return false;
}
msgType = this._sock.rQshift8();
}
console.log("[VNC-MESSAGE] Processing message type:", msgType, "FBU.rects:", this._FBU.rects, "rQlen:", this._sock.rQlen);
// console.log("[VNC-MESSAGE] Processing message type:", msgType, "FBU.rects:", this._FBU.rects, "rQlen:", this._sock.rQlen);
let first, ret;
switch (msgType) {
......@@ -2569,24 +2520,15 @@ class RFB extends EventTargetMixin {
this._sock.rQskipBytes(1); // Padding
this._FBU.rects = this._sock.rQshift16();
console.log("[VNC-CLIENT] FramebufferUpdate header - rects:", this._FBU.rects);
// Debug: check if we have enough data for the rectangles
const expectedBytes = this._FBU.rects * 12; // Each rect header is 12 bytes
console.log("[VNC-DEBUG] Expected bytes for rect headers:", expectedBytes, "available rQlen:", this._sock.rQlen);
// Validate rectangle count - should be reasonable (not 65534 or similar corruption)
if (this._FBU.rects > 10000 || this._FBU.rects < 0) {
console.log("[VNC-DEBUG] Invalid rectangle count:", this._FBU.rects, "- likely corrupted data, skipping message");
Log.Warn("Invalid rectangle count in FramebufferUpdate (" + this._FBU.rects + "), skipping corrupted message");
// Skip the entire FramebufferUpdate message by consuming all remaining data for this message
// We need to skip past all the rectangle data
const skipBytes = this._FBU.rects * 12; // Each rectangle header is 12 bytes
if (this._sock.rQlen >= skipBytes) {
this._sock.rQskipBytes(skipBytes);
console.log("[VNC-DEBUG] Skipped", skipBytes, "bytes of corrupted rectangle data");
} else {
console.log("[VNC-DEBUG] Not enough data to skip, waiting for more data");
return false; // Wait for more data
}
this._FBU.rects = 0; // Reset for next message
......@@ -2605,7 +2547,6 @@ class RFB extends EventTargetMixin {
while (this._FBU.rects > 0) {
if (this._FBU.encoding === null) {
if (this._sock.rQwait("rect header", 12)) {
console.log("[VNC-DEBUG] Waiting for rectangle header data");
return false;
}
/* New FramebufferUpdate */
......@@ -2617,13 +2558,9 @@ class RFB extends EventTargetMixin {
this._FBU.height = (hdr[6] << 8) + hdr[7];
this._FBU.encoding = parseInt((hdr[8] << 24) + (hdr[9] << 16) +
(hdr[10] << 8) + hdr[11], 10);
console.log("[VNC-DEBUG] Processing rectangle:", this._FBU.x, this._FBU.y, this._FBU.width, "x", this._FBU.height, "encoding:", this._FBU.encoding);
}
const rectResult = this._handleRect();
console.log("[VNC-DEBUG] _handleRect returned:", rectResult, "remaining rects:", this._FBU.rects - 1);
if (!rectResult) {
console.log("[VNC-DEBUG] Rectangle processing waiting for more data");
if (!this._handleRect()) {
return false;
}
......@@ -2917,7 +2854,6 @@ class RFB extends EventTargetMixin {
_handleDataRect() {
let decoder = this._decoders[this._FBU.encoding];
if (!decoder) {
console.log("[VNC-DEBUG] Unsupported encoding:", this._FBU.encoding, "- skipping rectangle data");
Log.Warn("Unsupported encoding (encoding: " +
this._FBU.encoding + "), skipping rectangle");
......@@ -2929,9 +2865,7 @@ class RFB extends EventTargetMixin {
// Skip a reasonable amount of data for this rectangle
const skipSize = Math.min(minDataSize, this._sock.rQlen);
this._sock.rQskipBytes(skipSize);
console.log("[VNC-DEBUG] Skipped", skipSize, "bytes for unsupported encoding");
} else {
console.log("[VNC-DEBUG] Not enough data to skip rectangle, waiting for more data");
return false; // Wait for more data
}
return true;
......@@ -2943,14 +2877,12 @@ class RFB extends EventTargetMixin {
this._sock, this._display,
this._fbDepth);
} catch (err) {
console.log("[VNC-DEBUG] Error decoding rect:", err, "- skipping corrupted rectangle");
Log.Warn("Error decoding rect: " + err + " - skipping corrupted rectangle");
// For decoding errors, also skip data to avoid getting stuck
const minDataSize = this._FBU.width * this._FBU.height;
if (this._sock.rQlen >= minDataSize) {
const skipSize = Math.min(minDataSize, this._sock.rQlen);
this._sock.rQskipBytes(skipSize);
console.log("[VNC-DEBUG] Skipped", skipSize, "bytes after decode error");
}
return true; // Continue processing instead of failing
}
......@@ -2964,13 +2896,10 @@ class RFB extends EventTargetMixin {
}
_resize(width, height) {
console.log("[VNC-CLIENT] Resizing display to", width, "x", height);
console.log("[VNC-CLIENT] Canvas before resize:", this._canvas.width, "x", this._canvas.height);
this._fbWidth = width;
this._fbHeight = height;
this._display.resize(this._fbWidth, this._fbHeight);
console.log("[VNC-CLIENT] Display resized, canvas after:", this._canvas.width, "x", this._canvas.height);
// Adjust the visible viewport based on the new dimensions
this._updateClip();
......@@ -2980,7 +2909,6 @@ class RFB extends EventTargetMixin {
// Keep this size until browser client size changes
this._saveExpectedClientSize();
console.log("[VNC-CLIENT] Resize complete, final canvas size:", this._canvas.width, "x", this._canvas.height);
}
_xvpOp(ver, op) {
......
wssshd2/templates/novnc/websock.js
View file @ 57ea848a
......@@ -338,16 +338,8 @@ class Websock {
}
_recvMessage(e) {
console.log("[VNC-WS] Received WebSocket message, data length:", e.data.byteLength || e.data.length);
// Log first 32 bytes for debugging
const dataArray = new Uint8Array(e.data);
const hexData = Array.from(dataArray.slice(0, Math.min(32, dataArray.length))).map(b => b.toString(16).padStart(2, '0')).join(' ');
console.log("[VNC-WS] First 32 bytes (hex):", hexData);
this._DecodeMessage(e.data);
console.log("[VNC-WS] After decode, rQlen:", this.rQlen, "rQi:", this._rQi);
if (this.rQlen > 0) {
this._eventHandlers.message();
if (this._rQlen == this._rQi) {
......
wssshd2/templates/vnc.html
View file @ 57ea848a
......@@ -189,6 +189,15 @@
<div id="vnc" class="vnc-container w-100">
<div id="noVNC_screen">
<div id="noVNC_status">Click Connect to start VNC session</div>
<div id="noVNC_loading" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #f8f8f2;">
<div class="spinner-border text-primary mb-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div>Connecting to VNC server...</div>
<button id="cancelConnectBtn" class="btn btn-outline-danger btn-sm mt-2" style="display: none;">
<i class="fas fa-times"></i> Cancel
</button>
</div>
</div>
</div>
</div>
......@@ -199,15 +208,10 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
console.log('VNC page loaded');
// Check if Base64 is loaded
setTimeout(function() {
console.log('[VNC-DEBUG] Checking if Base64 is defined:', typeof window.Base64);
if (typeof window.Base64 === 'undefined') {
console.error('[VNC-DEBUG] Base64 is not defined! This will cause JPEG decoding to fail.');
} else {
console.log('[VNC-DEBUG] Base64 is properly defined');
console.error('[VNC-ERROR] Base64 is not defined! This will cause JPEG decoding to fail.');
}
}, 100);
......@@ -217,6 +221,7 @@ let socketFrameSeq = 0;
document.getElementById('connectBtn').addEventListener('click', connect);
document.getElementById('disconnectBtn').addEventListener('click', disconnect);
document.getElementById('cancelConnectBtn').addEventListener('click', cancelConnect);
// Window control buttons
document.querySelector('.close-btn').addEventListener('click', disconnect);
......@@ -255,12 +260,15 @@ function toggleFullscreen() {
}
function connect() {
console.log('Connect button clicked');
if (connected) return;
// Hide the status text and show loading message
document.getElementById('noVNC_status').style.display = 'none';
document.getElementById('noVNC_loading').style.display = 'block';
document.getElementById('cancelConnectBtn').style.display = 'inline-block';
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = wsProtocol + '//' + window.location.host + '/vnc/%s/ws';
console.log('Connecting VNC to:', wsUrl);
try {
rfb = new RFB(document.getElementById('noVNC_screen'), wsUrl, {
......@@ -271,78 +279,31 @@ function connect() {
});
rfb.addEventListener('connect', () => {
console.log('[VNC-DEBUG] VNC connected event fired');
console.log('[VNC-DEBUG] Connection state:', rfb._rfbConnectionState);
console.log('[VNC-DEBUG] Init state:', rfb._rfbInitState);
connected = true;
document.getElementById('connectBtn').disabled = true;
document.getElementById('disconnectBtn').disabled = false;
// Hide loading message
document.getElementById('noVNC_loading').style.display = 'none';
showNotification('VNC session connected', 'success');
// Override WebSocket onmessage after connection to intercept messages
const originalOnMessage = rfb._sock.onmessage;
rfb._sock.onmessage = function(event) {
// Debug VNC socket data logging with base64 encoding and sequence numbers (first 20 frames only)
if (socketFrameSeq < 20) {
const bytes = event.data.byteLength || event.data.length;
const uint8 = new Uint8Array(event.data);
let binary = '';
for (let i = 0; i < uint8.length; i++) {
binary += String.fromCharCode(uint8[i]);
}
const b64Data = btoa(binary);
console.log(`[VNC-SOCKET-SERVER] Frame ${socketFrameSeq}: ${bytes} bytes -> base64: ${b64Data}`);
socketFrameSeq++;
}
// Call original handler
return originalOnMessage.call(this, event);
};
// Reset frame sequence for new connection
socketFrameSeq = 0;
});
// Add debug logging for WebSocket messages
const originalSend = rfb._sock.send;
rfb._sock.send = function(data) {
console.log('[VNC-DEBUG] JavaScript sending data to WebSocket:', data.length, 'bytes');
if (data.length <= 32) {
const hex = Array.from(new Uint8Array(data)).map(b => b.toString(16).padStart(2, '0')).join(' ');
console.log('[VNC-DEBUG] Data (hex):', hex);
} else {
const hex = Array.from(new Uint8Array(data.slice(0, 32))).map(b => b.toString(16).padStart(2, '0')).join(' ');
console.log('[VNC-DEBUG] Data (first 32 bytes hex):', hex + '...');
}
// Log VNC message types
if (data.length > 0) {
const msgType = new Uint8Array(data)[0];
console.log('[VNC-DEBUG] JavaScript message type:', msgType);
switch (msgType) {
case 0: console.log('[VNC-DEBUG] -> SetPixelFormat'); break;
case 2: console.log('[VNC-DEBUG] -> SetEncodings'); break;
case 3: console.log('[VNC-DEBUG] -> FramebufferUpdateRequest'); break;
case 4: console.log('[VNC-DEBUG] -> KeyEvent'); break;
case 5: console.log('[VNC-DEBUG] -> PointerEvent'); break;
case 6: console.log('[VNC-DEBUG] -> ClientCutText'); break;
default: console.log('[VNC-DEBUG] -> Unknown message type'); break;
}
}
return originalSend.call(this, data);
};
rfb.addEventListener('disconnect', () => {
console.log('[VNC-DEBUG] VNC disconnected event fired');
console.log('[VNC-DEBUG] Connection state:', rfb._rfbConnectionState);
console.log('[VNC-DEBUG] Init state:', rfb._rfbInitState);
connected = false;
document.getElementById('connectBtn').disabled = false;
document.getElementById('disconnectBtn').disabled = true;
// Reset UI to initial state
document.getElementById('noVNC_status').style.display = 'block';
document.getElementById('noVNC_loading').style.display = 'none';
document.getElementById('cancelConnectBtn').style.display = 'none';
showNotification('VNC session disconnected', 'info');
});
rfb.addEventListener('credentialsrequired', (e) => {
console.log('VNC credentials required');
// For now, assume no credentials needed
});
......@@ -352,7 +313,7 @@ function connect() {
});
rfb.addEventListener('clipboard', (e) => {
console.log('VNC clipboard:', e.detail.text);
// Handle clipboard data if needed
});
} catch (e) {
......@@ -369,10 +330,29 @@ function disconnect() {
connected = false;
document.getElementById('connectBtn').disabled = false;
document.getElementById('disconnectBtn').disabled = true;
// Reset UI to initial state
document.getElementById('noVNC_status').style.display = 'block';
document.getElementById('noVNC_loading').style.display = 'none';
document.getElementById('cancelConnectBtn').style.display = 'none';
setTimeout(() => {
location.reload();
}, 3000);
}
function cancelConnect() {
if (rfb) {
rfb.disconnect();
rfb = null;
}
connected = false;
document.getElementById('connectBtn').disabled = false;
document.getElementById('disconnectBtn').disabled = true;
// Reset UI to initial state
document.getElementById('noVNC_status').style.display = 'block';
document.getElementById('noVNC_loading').style.display = 'none';
document.getElementById('cancelConnectBtn').style.display = 'none';
showNotification('VNC connection cancelled', 'warning');
}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment