/*
* noVNC: HTML5 VNC client
* Copyright (C) 2012 Joel Martin
- * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2018 Samuel Mannehed for Cendio AB
* Licensed under MPL 2.0 (see LICENSE.txt)
*
* See README.md for usage and integration instructions.
*/
import * as Log from './util/logging.js';
-import _ from './util/localization.js';
import { decodeUTF8 } from './util/strings.js';
-import { set_defaults, make_properties } from './util/properties.js';
+import { dragThreshold } from './util/browser.js';
+import EventTargetMixin from './util/eventtarget.js';
import Display from "./display.js";
import Keyboard from "./input/keyboard.js";
import Mouse from "./input/mouse.js";
+import Cursor from "./util/cursor.js";
import Websock from "./websock.js";
-import Base64 from "./base64.js";
import DES from "./des.js";
import KeyTable from "./input/keysym.js";
import XtScancode from "./input/xtscancodes.js";
import Inflator from "./inflator.js";
import { encodings, encodingName } from "./encodings.js";
+import "./util/polyfill.js";
-/*jslint white: false, browser: true */
-/*global window, Util, Display, Keyboard, Mouse, Websock, Websock_native, Base64, DES, KeyTable, Inflator, XtScancode */
+// How many seconds to wait for a disconnect to finish
+const DISCONNECT_TIMEOUT = 3;
-export default function RFB(defaults) {
- "use strict";
- if (!defaults) {
- defaults = {};
- }
+export default class RFB extends EventTargetMixin {
+ constructor(target, url, options) {
+ if (!target) {
+ throw Error("Must specify target");
+ }
+ if (!url) {
+ throw Error("Must specify URL");
+ }
- this._rfb_host = '';
- this._rfb_port = 5900;
- this._rfb_password = '';
- this._rfb_path = '';
-
- this._rfb_connection_state = '';
- this._rfb_init_state = '';
- this._rfb_version = 0;
- this._rfb_max_version = 3.8;
- this._rfb_auth_scheme = '';
- this._rfb_disconnect_reason = "";
-
- this._rfb_tightvnc = false;
- this._rfb_xvp_ver = 0;
-
- this._encHandlers = {};
- this._encStats = {};
-
- this._sock = null; // Websock object
- this._display = null; // Display object
- this._flushing = false; // Display flushing state
- this._keyboard = null; // Keyboard input handler object
- this._mouse = null; // Mouse input handler object
- this._disconnTimer = null; // disconnection timer
-
- this._supportsFence = false;
-
- this._supportsContinuousUpdates = false;
- this._enabledContinuousUpdates = false;
-
- // Frame buffer update state
- this._FBU = {
- rects: 0,
- subrects: 0, // RRE
- lines: 0, // RAW
- tiles: 0, // HEXTILE
- bytes: 0,
- x: 0,
- y: 0,
- width: 0,
- height: 0,
- encoding: 0,
- subencoding: -1,
- background: null,
- zlib: [] // TIGHT zlib streams
- };
-
- this._fb_width = 0;
- this._fb_height = 0;
- this._fb_name = "";
-
- this._destBuff = null;
- this._paletteBuff = new Uint8Array(1024); // 256 * 4 (max palette size * max bytes-per-pixel)
-
- this._rre_chunk_sz = 100;
-
- this._timing = {
- last_fbu: 0,
- fbu_total: 0,
- fbu_total_cnt: 0,
- full_fbu_total: 0,
- full_fbu_cnt: 0,
-
- fbu_rt_start: 0,
- fbu_rt_total: 0,
- fbu_rt_cnt: 0,
- pixels: 0
- };
-
- this._supportsSetDesktopSize = false;
- this._screen_id = 0;
- this._screen_flags = 0;
-
- // Mouse state
- this._mouse_buttonMask = 0;
- this._mouse_arr = [];
- this._viewportDragging = false;
- this._viewportDragPos = {};
- this._viewportHasMoved = false;
-
- // QEMU Extended Key Event support - default to false
- this._qemuExtKeyEventSupported = false;
-
- // set the default value on user-facing properties
- set_defaults(this, defaults, {
- 'target': 'null', // VNC display rendering Canvas object
- 'encrypt': false, // Use TLS/SSL/wss encryption
- 'local_cursor': false, // Request locally rendered cursor
- 'shared': true, // Request shared mode
- 'view_only': false, // Disable client mouse/keyboard
- 'xvp_password_sep': '@', // Separator for XVP password fields
- 'disconnectTimeout': 3, // Time (s) to wait for disconnection
- 'wsProtocols': ['binary'], // Protocols to use in the WebSocket connection
- 'repeaterID': '', // [UltraVNC] RepeaterID to connect to
- 'viewportDrag': false, // Move the viewport on mouse drags
-
- // Callback functions
- 'onUpdateState': function () { }, // onUpdateState(rfb, state, oldstate): connection state change
- 'onNotification': function () { }, // onNotification(rfb, msg, level, options): notification for UI
- 'onDisconnected': function () { }, // onDisconnected(rfb, reason): disconnection finished
- 'onPasswordRequired': function () { }, // onPasswordRequired(rfb, msg): VNC password is required
- 'onClipboard': function () { }, // onClipboard(rfb, text): RFB clipboard contents received
- 'onBell': function () { }, // onBell(rfb): RFB Bell message received
- 'onFBUReceive': function () { }, // onFBUReceive(rfb, rect): RFB FBU rect received but not yet processed
- 'onFBUComplete': function () { }, // onFBUComplete(rfb): RFB FBU received and processed
- 'onFBResize': function () { }, // onFBResize(rfb, width, height): frame buffer resized
- 'onDesktopName': function () { }, // onDesktopName(rfb, name): desktop name received
- 'onXvpInit': function () { } // onXvpInit(version): XVP extensions active for this connection
- });
-
- // main setup
- Log.Debug(">> RFB.constructor");
-
- // Target canvas must be able to have focus
- if (!this._target.hasAttribute('tabindex')) {
- this._target.tabIndex = -1;
- }
+ super();
+
+ this._target = target;
+ this._url = url;
+
+ // Connection details
+ options = options || {};
+ this._rfb_credentials = options.credentials || {};
+ this._shared = 'shared' in options ? !!options.shared : true;
+ this._repeaterID = options.repeaterID || '';
+ this._showDotCursor = options.showDotCursor || false;
+
+ // Internal state
+ this._rfb_connection_state = '';
+ this._rfb_init_state = '';
+ this._rfb_auth_scheme = '';
+ this._rfb_clean_disconnect = true;
+
+ // Server capabilities
+ this._rfb_version = 0;
+ this._rfb_max_version = 3.8;
+ this._rfb_tightvnc = false;
+ this._rfb_xvp_ver = 0;
+
+ this._fb_width = 0;
+ this._fb_height = 0;
+
+ this._fb_name = "";
+
+ this._capabilities = { power: false };
+
+ this._supportsFence = false;
+
+ this._supportsContinuousUpdates = false;
+ this._enabledContinuousUpdates = false;
+
+ this._supportsSetDesktopSize = false;
+ this._screen_id = 0;
+ this._screen_flags = 0;
+
+ this._qemuExtKeyEventSupported = false;
+
+ // Internal objects
+ this._sock = null; // Websock object
+ this._display = null; // Display object
+ this._flushing = false; // Display flushing state
+ this._keyboard = null; // Keyboard input handler object
+ this._mouse = null; // Mouse input handler object
+
+ // Timers
+ this._disconnTimer = null; // disconnection timer
+ this._resizeTimeout = null; // resize rate limiting
+
+ // Decoder states and stats
+ this._encHandlers = {};
+ this._encStats = {};
+
+ this._FBU = {
+ rects: 0,
+ subrects: 0, // RRE and HEXTILE
+ lines: 0, // RAW
+ tiles: 0, // HEXTILE
+ bytes: 0,
+ x: 0,
+ y: 0,
+ width: 0,
+ height: 0,
+ encoding: 0,
+ subencoding: -1,
+ background: null,
+ zlibs: [] // TIGHT zlib streams
+ };
+
+ for (let i = 0; i < 4; i++) {
+ this._FBU.zlibs[i] = new Inflator();
+ }
- // populate encHandlers with bound versions
- this._encHandlers[encodings.encodingRaw] = RFB.encodingHandlers.RAW.bind(this);
- this._encHandlers[encodings.encodingCopyRect] = RFB.encodingHandlers.COPYRECT.bind(this);
- this._encHandlers[encodings.encodingRRE] = RFB.encodingHandlers.RRE.bind(this);
- this._encHandlers[encodings.encodingHextile] = RFB.encodingHandlers.HEXTILE.bind(this);
- this._encHandlers[encodings.encodingTight] = RFB.encodingHandlers.TIGHT.bind(this);
-
- this._encHandlers[encodings.pseudoEncodingDesktopSize] = RFB.encodingHandlers.DesktopSize.bind(this);
- this._encHandlers[encodings.pseudoEncodingLastRect] = RFB.encodingHandlers.last_rect.bind(this);
- this._encHandlers[encodings.pseudoEncodingCursor] = RFB.encodingHandlers.Cursor.bind(this);
- this._encHandlers[encodings.pseudoEncodingQEMUExtendedKeyEvent] = RFB.encodingHandlers.QEMUExtendedKeyEvent.bind(this);
- this._encHandlers[encodings.pseudoEncodingExtendedDesktopSize] = RFB.encodingHandlers.ExtendedDesktopSize.bind(this);
-
- // NB: nothing that needs explicit teardown should be done
- // before this point, since this can throw an exception
- try {
- this._display = new Display({target: this._target,
- onFlush: this._onFlush.bind(this)});
- } catch (exc) {
- Log.Error("Display exception: " + exc);
- throw exc;
+ this._destBuff = null;
+ this._paletteBuff = new Uint8Array(1024); // 256 * 4 (max palette size * max bytes-per-pixel)
+
+ this._rre_chunk_sz = 100;
+
+ this._timing = {
+ last_fbu: 0,
+ fbu_total: 0,
+ fbu_total_cnt: 0,
+ full_fbu_total: 0,
+ full_fbu_cnt: 0,
+
+ fbu_rt_start: 0,
+ fbu_rt_total: 0,
+ fbu_rt_cnt: 0,
+ pixels: 0
+ };
+
+ // Mouse state
+ this._mouse_buttonMask = 0;
+ this._mouse_arr = [];
+ this._viewportDragging = false;
+ this._viewportDragPos = {};
+ this._viewportHasMoved = false;
+
+ // Bound event handlers
+ this._eventHandlers = {
+ focusCanvas: this._focusCanvas.bind(this),
+ windowResize: this._windowResize.bind(this),
+ };
+
+ // main setup
+ Log.Debug(">> RFB.constructor");
+
+ // Create DOM elements
+ this._screen = document.createElement('div');
+ this._screen.style.display = 'flex';
+ this._screen.style.width = '100%';
+ this._screen.style.height = '100%';
+ this._screen.style.overflow = 'auto';
+ this._screen.style.backgroundColor = 'rgb(40, 40, 40)';
+ this._canvas = document.createElement('canvas');
+ this._canvas.style.margin = 'auto';
+ // Some browsers add an outline on focus
+ this._canvas.style.outline = 'none';
+ // IE miscalculates width without this :(
+ this._canvas.style.flexShrink = '0';
+ this._canvas.width = 0;
+ this._canvas.height = 0;
+ this._canvas.tabIndex = -1;
+ this._screen.appendChild(this._canvas);
+
+ // Cursor
+ this._cursor = new Cursor();
+
+ // XXX: TightVNC 2.8.11 sends no cursor at all until Windows changes
+ // it. Result: no cursor at all until a window border or an edit field
+ // is hit blindly. But there are also VNC servers that draw the cursor
+ // in the framebuffer and don't send the empty local cursor. There is
+ // no way to satisfy both sides.
+ //
+ // The spec is unclear on this "initial cursor" issue. Many other
+ // viewers (TigerVNC, RealVNC, Remmina) display an arrow as the
+ // initial cursor instead.
+ this._cursorImage = RFB.cursors.none;
+
+ // populate encHandlers with bound versions
+ this._encHandlers[encodings.encodingRaw] = RFB.encodingHandlers.RAW.bind(this);
+ this._encHandlers[encodings.encodingCopyRect] = RFB.encodingHandlers.COPYRECT.bind(this);
+ this._encHandlers[encodings.encodingRRE] = RFB.encodingHandlers.RRE.bind(this);
+ this._encHandlers[encodings.encodingHextile] = RFB.encodingHandlers.HEXTILE.bind(this);
+ this._encHandlers[encodings.encodingTight] = RFB.encodingHandlers.TIGHT.bind(this, false);
+ this._encHandlers[encodings.encodingTightPNG] = RFB.encodingHandlers.TIGHT.bind(this, true);
+
+ this._encHandlers[encodings.pseudoEncodingDesktopSize] = RFB.encodingHandlers.DesktopSize.bind(this);
+ this._encHandlers[encodings.pseudoEncodingLastRect] = RFB.encodingHandlers.last_rect.bind(this);
+ this._encHandlers[encodings.pseudoEncodingCursor] = RFB.encodingHandlers.Cursor.bind(this);
+ this._encHandlers[encodings.pseudoEncodingQEMUExtendedKeyEvent] = RFB.encodingHandlers.QEMUExtendedKeyEvent.bind(this);
+ this._encHandlers[encodings.pseudoEncodingExtendedDesktopSize] = RFB.encodingHandlers.ExtendedDesktopSize.bind(this);
+
+ // NB: nothing that needs explicit teardown should be done
+ // before this point, since this can throw an exception
+ try {
+ this._display = new Display(this._canvas);
+ } catch (exc) {
+ Log.Error("Display exception: " + exc);
+ throw exc;
+ }
+ this._display.onflush = this._onFlush.bind(this);
+ this._display.clear();
+
+ this._keyboard = new Keyboard(this._canvas);
+ this._keyboard.onkeyevent = this._handleKeyEvent.bind(this);
+
+ this._mouse = new Mouse(this._canvas);
+ this._mouse.onmousebutton = this._handleMouseButton.bind(this);
+ this._mouse.onmousemove = this._handleMouseMove.bind(this);
+
+ this._sock = new Websock();
+ this._sock.on('message', this._handle_message.bind(this));
+ this._sock.on('open', () => {
+ if ((this._rfb_connection_state === 'connecting') &&
+ (this._rfb_init_state === '')) {
+ this._rfb_init_state = 'ProtocolVersion';
+ Log.Debug("Starting VNC handshake");
+ } else {
+ this._fail("Unexpected server connection while " +
+ this._rfb_connection_state);
+ }
+ });
+ this._sock.on('close', (e) => {
+ Log.Debug("WebSocket on-close event");
+ let msg = "";
+ if (e.code) {
+ msg = "(code: " + e.code;
+ if (e.reason) {
+ msg += ", reason: " + e.reason;
+ }
+ msg += ")";
+ }
+ switch (this._rfb_connection_state) {
+ case 'connecting':
+ this._fail("Connection closed " + msg);
+ break;
+ case 'connected':
+ // Handle disconnects that were initiated server-side
+ this._updateConnectionState('disconnecting');
+ this._updateConnectionState('disconnected');
+ break;
+ case 'disconnecting':
+ // Normal disconnection path
+ this._updateConnectionState('disconnected');
+ break;
+ case 'disconnected':
+ this._fail("Unexpected server disconnect " +
+ "when already disconnected " + msg);
+ break;
+ default:
+ this._fail("Unexpected server disconnect before connecting " +
+ msg);
+ break;
+ }
+ this._sock.off('close');
+ });
+ this._sock.on('error', e => Log.Warn("WebSocket on-error event"));
+
+ // Slight delay of the actual connection so that the caller has
+ // time to set up callbacks
+ setTimeout(this._updateConnectionState.bind(this, 'connecting'));
+
+ Log.Debug("<< RFB.constructor");
+
+ // ===== PROPERTIES =====
+
+ this.dragViewport = false;
+ this.focusOnClick = true;
+
+ this._viewOnly = false;
+ this._clipViewport = false;
+ this._scaleViewport = false;
+ this._resizeSession = false;
}
- this._keyboard = new Keyboard({target: this._target,
- onKeyEvent: this._handleKeyEvent.bind(this)});
+ // ===== PROPERTIES =====
- this._mouse = new Mouse({target: this._target,
- onMouseButton: this._handleMouseButton.bind(this),
- onMouseMove: this._handleMouseMove.bind(this)});
+ get viewOnly() { return this._viewOnly; }
+ set viewOnly(viewOnly) {
+ this._viewOnly = viewOnly;
- this._sock = new Websock();
- this._sock.on('message', this._handle_message.bind(this));
- this._sock.on('open', function () {
- if ((this._rfb_connection_state === 'connecting') &&
- (this._rfb_init_state === '')) {
- this._rfb_init_state = 'ProtocolVersion';
- Log.Debug("Starting VNC handshake");
- } else {
- this._fail("Unexpected server connection");
- }
- }.bind(this));
- this._sock.on('close', function (e) {
- Log.Warn("WebSocket on-close event");
- var msg = "";
- if (e.code) {
- msg = " (code: " + e.code;
- if (e.reason) {
- msg += ", reason: " + e.reason;
+ if (this._rfb_connection_state === "connecting" ||
+ this._rfb_connection_state === "connected") {
+ if (viewOnly) {
+ this._keyboard.ungrab();
+ this._mouse.ungrab();
+ } else {
+ this._keyboard.grab();
+ this._mouse.grab();
}
- msg += ")";
- }
- switch (this._rfb_connection_state) {
- case 'disconnecting':
- this._updateConnectionState('disconnected');
- break;
- case 'connecting':
- this._fail('Failed to connect to server', msg);
- break;
- case 'connected':
- // Handle disconnects that were initiated server-side
- this._updateConnectionState('disconnecting');
- this._updateConnectionState('disconnected');
- break;
- case 'disconnected':
- this._fail("Unexpected server disconnect",
- "Already disconnected: " + msg);
- break;
- default:
- this._fail("Unexpected server disconnect",
- "Not in any state yet: " + msg);
- break;
}
- this._sock.off('close');
- }.bind(this));
- this._sock.on('error', function (e) {
- Log.Warn("WebSocket on-error event");
- });
+ }
- this._init_vars();
- this._cleanup();
+ get capabilities() { return this._capabilities; }
- var rmode = this._display.get_render_mode();
- Log.Info("Using native WebSockets, render mode: " + rmode);
+ get touchButton() { return this._mouse.touchButton; }
+ set touchButton(button) { this._mouse.touchButton = button; }
- Log.Debug("<< RFB.constructor");
-};
+ get clipViewport() { return this._clipViewport; }
+ set clipViewport(viewport) {
+ this._clipViewport = viewport;
+ this._updateClip();
+ }
-RFB.prototype = {
- // Public methods
- connect: function (host, port, password, path) {
- this._rfb_host = host;
- this._rfb_port = port;
- this._rfb_password = (password !== undefined) ? password : "";
- this._rfb_path = (path !== undefined) ? path : "";
+ get scaleViewport() { return this._scaleViewport; }
+ set scaleViewport(scale) {
+ this._scaleViewport = scale;
+ // Scaling trumps clipping, so we may need to adjust
+ // clipping when enabling or disabling scaling
+ if (scale && this._clipViewport) {
+ this._updateClip();
+ }
+ this._updateScale();
+ if (!scale && this._clipViewport) {
+ this._updateClip();
+ }
+ }
- if (!this._rfb_host) {
- return this._fail(
- _("Must set host"));
+ get resizeSession() { return this._resizeSession; }
+ set resizeSession(resize) {
+ this._resizeSession = resize;
+ if (resize) {
+ this._requestRemoteResize();
}
+ }
- this._rfb_init_state = '';
- this._updateConnectionState('connecting');
- return true;
- },
+ get showDotCursor() { return this._showDotCursor; }
+ set showDotCursor(show) {
+ this._showDotCursor = show;
+ this._refreshCursor();
+ }
+
+ // ===== PUBLIC METHODS =====
- disconnect: function () {
+ disconnect() {
this._updateConnectionState('disconnecting');
this._sock.off('error');
this._sock.off('message');
this._sock.off('open');
- },
+ }
- sendPassword: function (passwd) {
- this._rfb_password = passwd;
+ sendCredentials(creds) {
+ this._rfb_credentials = creds;
setTimeout(this._init_msg.bind(this), 0);
- },
+ }
- sendCtrlAltDel: function () {
- if (this._rfb_connection_state !== 'connected' || this._view_only) { return false; }
+ sendCtrlAltDel() {
+ if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
Log.Info("Sending Ctrl-Alt-Del");
this.sendKey(KeyTable.XK_Control_L, "ControlLeft", true);
this.sendKey(KeyTable.XK_Delete, "Delete", false);
this.sendKey(KeyTable.XK_Alt_L, "AltLeft", false);
this.sendKey(KeyTable.XK_Control_L, "ControlLeft", false);
+ }
- return true;
- },
-
- xvpOp: function (ver, op) {
- if (this._rfb_xvp_ver < ver) { return false; }
- Log.Info("Sending XVP operation " + op + " (version " + ver + ")");
- this._sock.send_string("\xFA\x00" + String.fromCharCode(ver) + String.fromCharCode(op));
- return true;
- },
-
- xvpShutdown: function () {
- return this.xvpOp(1, 2);
- },
+ machineShutdown() {
+ this._xvpOp(1, 2);
+ }
- xvpReboot: function () {
- return this.xvpOp(1, 3);
- },
+ machineReboot() {
+ this._xvpOp(1, 3);
+ }
- xvpReset: function () {
- return this.xvpOp(1, 4);
- },
+ machineReset() {
+ this._xvpOp(1, 4);
+ }
// Send a key press. If 'down' is not specified then send a down key
// followed by an up key.
- sendKey: function (keysym, code, down) {
- if (this._rfb_connection_state !== 'connected' || this._view_only) { return false; }
+ sendKey(keysym, code, down) {
+ if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
if (down === undefined) {
this.sendKey(keysym, code, true);
this.sendKey(keysym, code, false);
- return true;
+ return;
}
- var scancode = XtScancode[code];
+ const scancode = XtScancode[code];
if (this._qemuExtKeyEventSupported && scancode) {
// 0 is NoSymbol
RFB.messages.QEMUExtendedKeyEvent(this._sock, keysym, down, scancode);
} else {
if (!keysym) {
- return false;
+ return;
}
Log.Info("Sending keysym (" + (down ? "down" : "up") + "): " + keysym);
RFB.messages.keyEvent(this._sock, keysym, down ? 1 : 0);
}
+ }
- return true;
- },
-
- clipboardPasteFrom: function (text) {
- if (this._rfb_connection_state !== 'connected' || this._view_only) { return; }
- RFB.messages.clientCutText(this._sock, text);
- },
-
- autoscale: function (width, height, downscaleOnly) {
- if (this._rfb_connection_state !== 'connected') { return; }
- this._display.autoscale(width, height, downscaleOnly);
- },
-
- viewportChangeSize: function(width, height) {
- if (this._rfb_connection_state !== 'connected') { return; }
- this._display.viewportChangeSize(width, height);
- },
-
- clippingDisplay: function () {
- if (this._rfb_connection_state !== 'connected') { return false; }
- return this._display.clippingDisplay();
- },
-
- // Requests a change of remote desktop size. This message is an extension
- // and may only be sent if we have received an ExtendedDesktopSize message
- requestDesktopSize: function (width, height) {
- if (this._rfb_connection_state !== 'connected' ||
- this._view_only) {
- return false;
- }
+ focus() {
+ this._canvas.focus();
+ }
- if (this._supportsSetDesktopSize) {
- RFB.messages.setDesktopSize(this._sock, width, height,
- this._screen_id, this._screen_flags);
- this._sock.flush();
- return true;
- } else {
- return false;
- }
- },
+ blur() {
+ this._canvas.blur();
+ }
+ clipboardPasteFrom(text) {
+ if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
+ RFB.messages.clientCutText(this._sock, text);
+ }
- // Private methods
+ // ===== PRIVATE METHODS =====
- _connect: function () {
+ _connect() {
Log.Debug(">> RFB.connect");
- this._init_vars();
- var uri;
- if (typeof UsingSocketIO !== 'undefined') {
- uri = 'http';
- } else {
- uri = this._encrypt ? 'wss' : 'ws';
- }
-
- uri += '://' + this._rfb_host;
- if(this._rfb_port) {
- uri += ':' + this._rfb_port;
- }
- uri += '/' + this._rfb_path;
-
- Log.Info("connecting to " + uri);
+ Log.Info("connecting to " + this._url);
try {
// WebSocket.onopen transitions to the RFB init states
- this._sock.open(uri, this._wsProtocols);
+ this._sock.open(this._url, ['binary']);
} catch (e) {
if (e.name === 'SyntaxError') {
- this._fail("Invalid host or port value given", e);
+ this._fail("Invalid host or port (" + e + ")");
} else {
- this._fail("Error while connecting", e);
+ this._fail("Error when opening socket (" + e + ")");
}
}
+ // Make our elements part of the page
+ this._target.appendChild(this._screen);
+
+ this._cursor.attach(this._canvas);
+ this._refreshCursor();
+
+ // Monitor size changes of the screen
+ // FIXME: Use ResizeObserver, or hidden overflow
+ window.addEventListener('resize', this._eventHandlers.windowResize);
+
// Always grab focus on some kind of click event
- this._target.addEventListener("mousedown", this._focusCanvas);
- this._target.addEventListener("touchstart", this._focusCanvas);
+ this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas);
+ this._canvas.addEventListener("touchstart", this._eventHandlers.focusCanvas);
Log.Debug("<< RFB.connect");
- },
+ }
- _disconnect: function () {
+ _disconnect() {
Log.Debug(">> RFB.disconnect");
- this._target.removeEventListener("mousedown", this._focusCanvas);
- this._target.removeEventListener("touchstart", this._focusCanvas);
- this._cleanup();
+ this._cursor.detach();
+ this._canvas.removeEventListener("mousedown", this._eventHandlers.focusCanvas);
+ this._canvas.removeEventListener("touchstart", this._eventHandlers.focusCanvas);
+ window.removeEventListener('resize', this._eventHandlers.windowResize);
+ this._keyboard.ungrab();
+ this._mouse.ungrab();
this._sock.close();
this._print_stats();
- Log.Debug("<< RFB.disconnect");
- },
-
- _init_vars: function () {
- // reset state
- this._FBU.rects = 0;
- this._FBU.subrects = 0; // RRE and HEXTILE
- this._FBU.lines = 0; // RAW
- this._FBU.tiles = 0; // HEXTILE
- this._FBU.zlibs = []; // TIGHT zlib encoders
- this._mouse_buttonMask = 0;
- this._mouse_arr = [];
- this._rfb_tightvnc = false;
-
- // Clear the per connection encoding stats
- var stats = this._encStats;
- Object.keys(stats).forEach(function (key) {
- stats[key][0] = 0;
- });
-
- var i;
- for (i = 0; i < 4; i++) {
- this._FBU.zlibs[i] = new Inflator();
+ try {
+ this._target.removeChild(this._screen);
+ } catch (e) {
+ if (e.name === 'NotFoundError') {
+ // Some cases where the initial connection fails
+ // can disconnect before the _screen is created
+ } else {
+ throw e;
+ }
}
- },
+ clearTimeout(this._resizeTimeout);
+ Log.Debug("<< RFB.disconnect");
+ }
- _print_stats: function () {
- var stats = this._encStats;
+ _print_stats() {
+ const stats = this._encStats;
Log.Info("Encoding stats for this connection:");
- Object.keys(stats).forEach(function (key) {
- var s = stats[key];
+ Object.keys(stats).forEach((key) => {
+ const s = stats[key];
if (s[0] + s[1] > 0) {
Log.Info(" " + encodingName(key) + ": " + s[0] + " rects");
}
});
Log.Info("Encoding stats since page load:");
- Object.keys(stats).forEach(function (key) {
- var s = stats[key];
- Log.Info(" " + encodingName(key) + ": " + s[1] + " rects");
+ Object.keys(stats).forEach(key => Log.Info(" " + encodingName(key) + ": " + stats[key][1] + " rects"));
+ }
+
+ _focusCanvas(event) {
+ // Respect earlier handlers' request to not do side-effects
+ if (event.defaultPrevented) {
+ return;
+ }
+
+ if (!this.focusOnClick) {
+ return;
+ }
+
+ this.focus();
+ }
+
+ _windowResize(event) {
+ // If the window resized then our screen element might have
+ // as well. Update the viewport dimensions.
+ window.requestAnimationFrame(() => {
+ this._updateClip();
+ this._updateScale();
});
- },
- _cleanup: function () {
- if (!this._view_only) { this._keyboard.ungrab(); }
- if (!this._view_only) { this._mouse.ungrab(); }
- this._display.defaultCursor();
- if (Log.get_logging() !== 'debug') {
- // Show noVNC logo on load and when disconnected, unless in
- // debug mode
- this._display.clear();
+ if (this._resizeSession) {
+ // Request changing the resolution of the remote display to
+ // the size of the local browser viewport.
+
+ // In order to not send multiple requests before the browser-resize
+ // is finished we wait 0.5 seconds before sending the request.
+ clearTimeout(this._resizeTimeout);
+ this._resizeTimeout = setTimeout(this._requestRemoteResize.bind(this), 500);
}
- },
+ }
- // Event handler for canvas so this points to the canvas element
- _focusCanvas: function(event) {
- // Respect earlier handlers' request to not do side-effects
- if (!event.defaultPrevented)
- this.focus();
- },
+ // Update state of clipping in Display object, and make sure the
+ // configured viewport matches the current screen size
+ _updateClip() {
+ const cur_clip = this._display.clipViewport;
+ let new_clip = this._clipViewport;
+
+ if (this._scaleViewport) {
+ // Disable viewport clipping if we are scaling
+ new_clip = false;
+ }
+
+ if (cur_clip !== new_clip) {
+ this._display.clipViewport = new_clip;
+ }
+
+ if (new_clip) {
+ // When clipping is enabled, the screen is limited to
+ // the size of the container.
+ const size = this._screenSize();
+ this._display.viewportChangeSize(size.w, size.h);
+ this._fixScrollbars();
+ }
+ }
+
+ _updateScale() {
+ if (!this._scaleViewport) {
+ this._display.scale = 1.0;
+ } else {
+ const size = this._screenSize();
+ this._display.autoscale(size.w, size.h);
+ }
+ this._fixScrollbars();
+ }
+
+ // Requests a change of remote desktop size. This message is an extension
+ // and may only be sent if we have received an ExtendedDesktopSize message
+ _requestRemoteResize() {
+ clearTimeout(this._resizeTimeout);
+ this._resizeTimeout = null;
+
+ if (!this._resizeSession || this._viewOnly ||
+ !this._supportsSetDesktopSize) {
+ return;
+ }
+
+ const size = this._screenSize();
+ RFB.messages.setDesktopSize(this._sock,
+ Math.floor(size.w), Math.floor(size.h),
+ this._screen_id, this._screen_flags);
+
+ Log.Debug('Requested new desktop size: ' +
+ size.w + 'x' + size.h);
+ }
+
+ // Gets the the size of the available screen
+ _screenSize() {
+ let r = this._screen.getBoundingClientRect();
+ return { w: r.width, h: r.height };
+ }
+
+ _fixScrollbars() {
+ // This is a hack because Chrome screws up the calculation
+ // for when scrollbars are needed. So to fix it we temporarily
+ // toggle them off and on.
+ const orig = this._screen.style.overflow;
+ this._screen.style.overflow = 'hidden';
+ // Force Chrome to recalculate the layout by asking for
+ // an element's dimensions
+ this._screen.getBoundingClientRect();
+ this._screen.style.overflow = orig;
+ }
/*
* Connection states:
* disconnecting
* disconnected - permanent state
*/
- _updateConnectionState: function (state) {
- var oldstate = this._rfb_connection_state;
+ _updateConnectionState(state) {
+ const oldstate = this._rfb_connection_state;
if (state === oldstate) {
Log.Debug("Already in state '" + state + "', ignoring");
// State change actions
this._rfb_connection_state = state;
- this._onUpdateState(this, state, oldstate);
- var smsg = "New state '" + state + "', was '" + oldstate + "'.";
- Log.Debug(smsg);
+ Log.Debug("New state '" + state + "', was '" + oldstate + "'.");
if (this._disconnTimer && state !== 'disconnecting') {
Log.Debug("Clearing disconnect timer");
}
switch (state) {
- case 'disconnected':
- // Call onDisconnected callback after onUpdateState since
- // we don't know if the UI only displays the latest message
- if (this._rfb_disconnect_reason !== "") {
- this._onDisconnected(this, this._rfb_disconnect_reason);
- } else {
- // No reason means clean disconnect
- this._onDisconnected(this);
- }
- break;
-
case 'connecting':
this._connect();
break;
+ case 'connected':
+ this.dispatchEvent(new CustomEvent("connect", { detail: {} }));
+ break;
+
case 'disconnecting':
this._disconnect();
- this._disconnTimer = setTimeout(function () {
- this._rfb_disconnect_reason = _("Disconnect timeout");
+ this._disconnTimer = setTimeout(() => {
+ Log.Error("Disconnection timed out.");
this._updateConnectionState('disconnected');
- }.bind(this), this._disconnectTimeout * 1000);
+ }, DISCONNECT_TIMEOUT * 1000);
+ break;
+
+ case 'disconnected':
+ this.dispatchEvent(new CustomEvent(
+ "disconnect", { detail:
+ { clean: this._rfb_clean_disconnect } }));
break;
}
- },
+ }
/* Print errors and disconnect
*
- * The optional parameter 'details' is used for information that
+ * The parameter 'details' is used for information that
* should be logged but not sent to the user interface.
*/
- _fail: function (msg, details) {
- var fullmsg = msg;
- if (typeof details !== 'undefined') {
- fullmsg = msg + " (" + details + ")";
- }
+ _fail(details) {
switch (this._rfb_connection_state) {
case 'disconnecting':
- Log.Error("Failed when disconnecting: " + fullmsg);
+ Log.Error("Failed when disconnecting: " + details);
break;
case 'connected':
- Log.Error("Failed while connected: " + fullmsg);
+ Log.Error("Failed while connected: " + details);
break;
case 'connecting':
- Log.Error("Failed when connecting: " + fullmsg);
+ Log.Error("Failed when connecting: " + details);
break;
default:
- Log.Error("RFB failure: " + fullmsg);
+ Log.Error("RFB failure: " + details);
break;
}
- this._rfb_disconnect_reason = msg; //This is sent to the UI
+ this._rfb_clean_disconnect = false; //This is sent to the UI
// Transition to disconnected without waiting for socket to close
this._updateConnectionState('disconnecting');
this._updateConnectionState('disconnected');
return false;
- },
-
- /*
- * Send a notification to the UI. Valid levels are:
- * 'normal'|'warn'|'error'
- *
- * NOTE: Options could be added in the future.
- * NOTE: If this function is called multiple times, remember that the
- * interface could be only showing the latest notification.
- */
- _notification: function(msg, level, options) {
- switch (level) {
- case 'normal':
- case 'warn':
- case 'error':
- Log.Debug("Notification[" + level + "]:" + msg);
- break;
- default:
- Log.Error("Invalid notification level: " + level);
- return;
- }
+ }
- if (options) {
- this._onNotification(this, msg, level, options);
- } else {
- this._onNotification(this, msg, level);
- }
- },
+ _setCapability(cap, val) {
+ this._capabilities[cap] = val;
+ this.dispatchEvent(new CustomEvent("capabilities",
+ { detail: { capabilities: this._capabilities } }));
+ }
- _handle_message: function () {
+ _handle_message() {
if (this._sock.rQlen() === 0) {
Log.Warn("handle_message called on an empty receive queue");
return;
this._init_msg();
break;
}
- },
+ }
- _handleKeyEvent: function (keysym, code, down) {
+ _handleKeyEvent(keysym, code, down) {
this.sendKey(keysym, code, down);
- },
+ }
- _handleMouseButton: function (x, y, down, bmask) {
+ _handleMouseButton(x, y, down, bmask) {
if (down) {
this._mouse_buttonMask |= bmask;
} else {
this._mouse_buttonMask &= ~bmask;
}
- if (this._viewportDrag) {
+ if (this.dragViewport) {
if (down && !this._viewportDragging) {
this._viewportDragging = true;
this._viewportDragPos = {'x': x, 'y': y};
+ this._viewportHasMoved = false;
// Skip sending mouse events
return;
} else {
this._viewportDragging = false;
- // If the viewport didn't actually move, then treat as a mouse click event
- // Send the button down event here, as the button up event is sent at the end of this function
- if (!this._viewportHasMoved && !this._view_only) {
- RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), bmask);
+ // If we actually performed a drag then we are done
+ // here and should not send any mouse events
+ if (this._viewportHasMoved) {
+ return;
}
- this._viewportHasMoved = false;
+
+ // Otherwise we treat this as a mouse click event.
+ // Send the button down event here, as the button up
+ // event is sent at the end of this function.
+ RFB.messages.pointerEvent(this._sock,
+ this._display.absX(x),
+ this._display.absY(y),
+ bmask);
}
}
- if (this._view_only) { return; } // View only, skip mouse events
+ if (this._viewOnly) { return; } // View only, skip mouse events
if (this._rfb_connection_state !== 'connected') { return; }
RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), this._mouse_buttonMask);
- },
+ }
- _handleMouseMove: function (x, y) {
+ _handleMouseMove(x, y) {
if (this._viewportDragging) {
- var deltaX = this._viewportDragPos.x - x;
- var deltaY = this._viewportDragPos.y - y;
-
- // The goal is to trigger on a certain physical width, the
- // devicePixelRatio brings us a bit closer but is not optimal.
- var dragThreshold = 10 * (window.devicePixelRatio || 1);
+ const deltaX = this._viewportDragPos.x - x;
+ const deltaY = this._viewportDragPos.y - y;
if (this._viewportHasMoved || (Math.abs(deltaX) > dragThreshold ||
Math.abs(deltaY) > dragThreshold)) {
return;
}
- if (this._view_only) { return; } // View only, skip mouse events
+ if (this._viewOnly) { return; } // View only, skip mouse events
if (this._rfb_connection_state !== 'connected') { return; }
RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), this._mouse_buttonMask);
- },
+ }
// Message Handlers
- _negotiate_protocol_version: function () {
+ _negotiate_protocol_version() {
if (this._sock.rQlen() < 12) {
- return this._fail("Error while negotiating with server",
- "Incomplete protocol version");
+ return this._fail("Received incomplete protocol version.");
}
- var sversion = this._sock.rQshiftStr(12).substr(4, 7);
+ const sversion = this._sock.rQshiftStr(12).substr(4, 7);
Log.Info("Server ProtocolVersion: " + sversion);
- var is_repeater = 0;
+ let is_repeater = 0;
switch (sversion) {
case "000.000": // UltraVNC repeater
is_repeater = 1;
this._rfb_version = 3.8;
break;
default:
- return this._fail("Unsupported server",
- "Invalid server version: " + sversion);
+ return this._fail("Invalid server version " + sversion);
}
if (is_repeater) {
- var repeaterID = this._repeaterID;
+ let repeaterID = "ID:" + this._repeaterID;
while (repeaterID.length < 250) {
repeaterID += "\0";
}
this._rfb_version = this._rfb_max_version;
}
- var cversion = "00" + parseInt(this._rfb_version, 10) +
+ const cversion = "00" + parseInt(this._rfb_version, 10) +
".00" + ((this._rfb_version * 10) % 10);
this._sock.send_string("RFB " + cversion + "\n");
Log.Debug('Sent ProtocolVersion: ' + cversion);
this._rfb_init_state = 'Security';
- },
+ }
- _negotiate_security: function () {
+ _negotiate_security() {
// Polyfill since IE and PhantomJS doesn't have
// TypedArray.includes()
function includes(item, array) {
- for (var i = 0; i < array.length; i++) {
+ for (let i = 0; i < array.length; i++) {
if (array[i] === item) {
return true;
}
if (this._rfb_version >= 3.7) {
// Server sends supported list, client decides
- var num_types = this._sock.rQshift8();
+ const num_types = this._sock.rQshift8();
if (this._sock.rQwait("security type", num_types, 1)) { return false; }
if (num_types === 0) {
- var strlen = this._sock.rQshift32();
- var reason = this._sock.rQshiftStr(strlen);
- return this._fail("Error while negotiating with server",
- "Security failure: " + reason);
+ return this._handle_security_failure("no security types");
}
- var types = this._sock.rQshiftBytes(num_types);
+ const types = this._sock.rQshiftBytes(num_types);
Log.Debug("Server security types: " + types);
// Look for each auth in preferred order
} else if (includes(2, types)) {
this._rfb_auth_scheme = 2; // VNC Auth
} else {
- return this._fail("Unsupported server",
- "Unsupported security types: " + types);
+ return this._fail("Unsupported security types (types: " + types + ")");
}
this._sock.send([this._rfb_auth_scheme]);
Log.Debug('Authenticating using scheme: ' + this._rfb_auth_scheme);
return this._init_msg(); // jump to authentication
- },
+ }
- // authentication
- _negotiate_xvp_auth: function () {
- var xvp_sep = this._xvp_password_sep;
- var xvp_auth = this._rfb_password.split(xvp_sep);
- if (xvp_auth.length < 3) {
- var msg = 'XVP credentials required (user' + xvp_sep +
- 'target' + xvp_sep + 'password) -- got only ' + this._rfb_password;
- this._onPasswordRequired(this, msg);
+ /*
+ * Get the security failure reason if sent from the server and
+ * send the 'securityfailure' event.
+ *
+ * - The optional parameter context can be used to add some extra
+ * context to the log output.
+ *
+ * - The optional parameter security_result_status can be used to
+ * add a custom status code to the event.
+ */
+ _handle_security_failure(context, security_result_status) {
+
+ if (typeof context === 'undefined') {
+ context = "";
+ } else {
+ context = " on " + context;
+ }
+
+ if (typeof security_result_status === 'undefined') {
+ security_result_status = 1; // fail
+ }
+
+ if (this._sock.rQwait("reason length", 4)) {
return false;
}
+ const strlen = this._sock.rQshift32();
+ let reason = "";
- var xvp_auth_str = String.fromCharCode(xvp_auth[0].length) +
- String.fromCharCode(xvp_auth[1].length) +
- xvp_auth[0] +
- xvp_auth[1];
+ if (strlen > 0) {
+ if (this._sock.rQwait("reason", strlen, 8)) { return false; }
+ reason = this._sock.rQshiftStr(strlen);
+ }
+
+ if (reason !== "") {
+ this.dispatchEvent(new CustomEvent(
+ "securityfailure",
+ { detail: { status: security_result_status, reason: reason } }));
+
+ return this._fail("Security negotiation failed" + context +
+ " (reason: " + reason + ")");
+ } else {
+ this.dispatchEvent(new CustomEvent(
+ "securityfailure",
+ { detail: { status: security_result_status } }));
+
+ return this._fail("Security negotiation failed" + context);
+ }
+ }
+
+ // authentication
+ _negotiate_xvp_auth() {
+ if (!this._rfb_credentials.username ||
+ !this._rfb_credentials.password ||
+ !this._rfb_credentials.target) {
+ this.dispatchEvent(new CustomEvent(
+ "credentialsrequired",
+ { detail: { types: ["username", "password", "target"] } }));
+ return false;
+ }
+
+ const xvp_auth_str = String.fromCharCode(this._rfb_credentials.username.length) +
+ String.fromCharCode(this._rfb_credentials.target.length) +
+ this._rfb_credentials.username +
+ this._rfb_credentials.target;
this._sock.send_string(xvp_auth_str);
- this._rfb_password = xvp_auth.slice(2).join(xvp_sep);
this._rfb_auth_scheme = 2;
return this._negotiate_authentication();
- },
+ }
- _negotiate_std_vnc_auth: function () {
+ _negotiate_std_vnc_auth() {
if (this._sock.rQwait("auth challenge", 16)) { return false; }
- if (this._rfb_password.length === 0) {
- this._onPasswordRequired(this);
+ if (!this._rfb_credentials.password) {
+ this.dispatchEvent(new CustomEvent(
+ "credentialsrequired",
+ { detail: { types: ["password"] } }));
return false;
}
// TODO(directxman12): make genDES not require an Array
- var challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16));
- var response = RFB.genDES(this._rfb_password, challenge);
+ const challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16));
+ const response = RFB.genDES(this._rfb_credentials.password, challenge);
this._sock.send(response);
this._rfb_init_state = "SecurityResult";
return true;
- },
+ }
- _negotiate_tight_tunnels: function (numTunnels) {
- var clientSupportedTunnelTypes = {
+ _negotiate_tight_tunnels(numTunnels) {
+ const clientSupportedTunnelTypes = {
0: { vendor: 'TGHT', signature: 'NOTUNNEL' }
};
- var serverSupportedTunnelTypes = {};
+ const serverSupportedTunnelTypes = {};
// receive tunnel capabilities
- for (var i = 0; i < numTunnels; i++) {
- var cap_code = this._sock.rQshift32();
- var cap_vendor = this._sock.rQshiftStr(4);
- var cap_signature = this._sock.rQshiftStr(8);
+ for (let i = 0; i < numTunnels; i++) {
+ const cap_code = this._sock.rQshift32();
+ const cap_vendor = this._sock.rQshiftStr(4);
+ const cap_signature = this._sock.rQshiftStr(8);
serverSupportedTunnelTypes[cap_code] = { vendor: cap_vendor, signature: cap_signature };
}
+ Log.Debug("Server Tight tunnel types: " + serverSupportedTunnelTypes);
+
+ // Siemens touch panels have a VNC server that supports NOTUNNEL,
+ // but forgets to advertise it. Try to detect such servers by
+ // looking for their custom tunnel type.
+ if (serverSupportedTunnelTypes[1] &&
+ (serverSupportedTunnelTypes[1].vendor === "SICR") &&
+ (serverSupportedTunnelTypes[1].signature === "SCHANNEL")) {
+ Log.Debug("Detected Siemens server. Assuming NOTUNNEL support.");
+ serverSupportedTunnelTypes[0] = { vendor: 'TGHT', signature: 'NOTUNNEL' };
+ }
+
// choose the notunnel type
if (serverSupportedTunnelTypes[0]) {
if (serverSupportedTunnelTypes[0].vendor != clientSupportedTunnelTypes[0].vendor ||
serverSupportedTunnelTypes[0].signature != clientSupportedTunnelTypes[0].signature) {
- return this._fail("Unsupported server",
- "Client's tunnel type had the incorrect " +
+ return this._fail("Client's tunnel type had the incorrect " +
"vendor or signature");
}
+ Log.Debug("Selected tunnel type: " + clientSupportedTunnelTypes[0]);
this._sock.send([0, 0, 0, 0]); // use NOTUNNEL
return false; // wait until we receive the sub auth count to continue
} else {
- return this._fail("Unsupported server",
- "Server wanted tunnels, but doesn't support " +
+ return this._fail("Server wanted tunnels, but doesn't support " +
"the notunnel type");
}
- },
+ }
- _negotiate_tight_auth: function () {
+ _negotiate_tight_auth() {
if (!this._rfb_tightvnc) { // first pass, do the tunnel negotiation
if (this._sock.rQwait("num tunnels", 4)) { return false; }
- var numTunnels = this._sock.rQshift32();
+ const numTunnels = this._sock.rQshift32();
if (numTunnels > 0 && this._sock.rQwait("tunnel capabilities", 16 * numTunnels, 4)) { return false; }
this._rfb_tightvnc = true;
// second pass, do the sub-auth negotiation
if (this._sock.rQwait("sub auth count", 4)) { return false; }
- var subAuthCount = this._sock.rQshift32();
+ const subAuthCount = this._sock.rQshift32();
if (subAuthCount === 0) { // empty sub-auth list received means 'no auth' subtype selected
this._rfb_init_state = 'SecurityResult';
return true;
if (this._sock.rQwait("sub auth capabilities", 16 * subAuthCount, 4)) { return false; }
- var clientSupportedTypes = {
+ const clientSupportedTypes = {
'STDVNOAUTH__': 1,
'STDVVNCAUTH_': 2
};
- var serverSupportedTypes = [];
+ const serverSupportedTypes = [];
- for (var i = 0; i < subAuthCount; i++) {
- var capNum = this._sock.rQshift32();
- var capabilities = this._sock.rQshiftStr(12);
+ for (let i = 0; i < subAuthCount; i++) {
+ this._sock.rQshift32(); // capNum
+ const capabilities = this._sock.rQshiftStr(12);
serverSupportedTypes.push(capabilities);
}
- for (var authType in clientSupportedTypes) {
+ Log.Debug("Server Tight authentication types: " + serverSupportedTypes);
+
+ for (let authType in clientSupportedTypes) {
if (serverSupportedTypes.indexOf(authType) != -1) {
this._sock.send([0, 0, 0, clientSupportedTypes[authType]]);
+ Log.Debug("Selected authentication type: " + authType);
switch (authType) {
case 'STDVNOAUTH__': // no auth
this._rfb_auth_scheme = 2;
return this._init_msg();
default:
- return this._fail("Unsupported server",
- "Unsupported tiny auth scheme: " +
- authType);
+ return this._fail("Unsupported tiny auth scheme " +
+ "(scheme: " + authType + ")");
}
}
}
- return this._fail("Unsupported server",
- "No supported sub-auth types!");
- },
+ return this._fail("No supported sub-auth types!");
+ }
- _negotiate_authentication: function () {
+ _negotiate_authentication() {
switch (this._rfb_auth_scheme) {
case 0: // connection failed
- if (this._sock.rQwait("auth reason", 4)) { return false; }
- var strlen = this._sock.rQshift32();
- var reason = this._sock.rQshiftStr(strlen);
- return this._fail("Authentication failure", reason);
+ return this._handle_security_failure("authentication scheme");
case 1: // no auth
if (this._rfb_version >= 3.8) {
return this._negotiate_tight_auth();
default:
- return this._fail("Unsupported server",
- "Unsupported auth scheme: " +
- this._rfb_auth_scheme);
+ return this._fail("Unsupported auth scheme (scheme: " +
+ this._rfb_auth_scheme + ")");
}
- },
+ }
- _handle_security_result: function () {
+ _handle_security_result() {
if (this._sock.rQwait('VNC auth response ', 4)) { return false; }
- switch (this._sock.rQshift32()) {
- case 0: // OK
- this._rfb_init_state = 'ClientInitialisation';
- Log.Debug('Authentication OK');
- return this._init_msg();
- case 1: // failed
- if (this._rfb_version >= 3.8) {
- var length = this._sock.rQshift32();
- if (this._sock.rQwait("SecurityResult reason", length, 8)) { return false; }
- var reason = this._sock.rQshiftStr(length);
- return this._fail("Authentication failure", reason);
- } else {
- return this._fail("Authentication failure");
- }
- case 2:
- return this._fail("Too many authentication attempts");
- default:
- return this._fail("Unsupported server",
- "Unknown SecurityResult");
+
+ const status = this._sock.rQshift32();
+
+ if (status === 0) { // OK
+ this._rfb_init_state = 'ClientInitialisation';
+ Log.Debug('Authentication OK');
+ return this._init_msg();
+ } else {
+ if (this._rfb_version >= 3.8) {
+ return this._handle_security_failure("security result", status);
+ } else {
+ this.dispatchEvent(new CustomEvent(
+ "securityfailure",
+ { detail: { status: status } }));
+
+ return this._fail("Security handshake failed");
+ }
}
- },
+ }
- _negotiate_server_init: function () {
+ _negotiate_server_init() {
if (this._sock.rQwait("server initialization", 24)) { return false; }
/* Screen size */
- var width = this._sock.rQshift16();
- var height = this._sock.rQshift16();
+ const width = this._sock.rQshift16();
+ const height = this._sock.rQshift16();
/* PIXEL_FORMAT */
- var bpp = this._sock.rQshift8();
- var depth = this._sock.rQshift8();
- var big_endian = this._sock.rQshift8();
- var true_color = this._sock.rQshift8();
-
- var red_max = this._sock.rQshift16();
- var green_max = this._sock.rQshift16();
- var blue_max = this._sock.rQshift16();
- var red_shift = this._sock.rQshift8();
- var green_shift = this._sock.rQshift8();
- var blue_shift = this._sock.rQshift8();
+ const bpp = this._sock.rQshift8();
+ const depth = this._sock.rQshift8();
+ const big_endian = this._sock.rQshift8();
+ const true_color = this._sock.rQshift8();
+
+ const red_max = this._sock.rQshift16();
+ const green_max = this._sock.rQshift16();
+ const blue_max = this._sock.rQshift16();
+ const red_shift = this._sock.rQshift8();
+ const green_shift = this._sock.rQshift8();
+ const blue_shift = this._sock.rQshift8();
this._sock.rQskipBytes(3); // padding
// NB(directxman12): we don't want to call any callbacks or print messages until
// *after* we're past the point where we could backtrack
/* Connection name/title */
- var name_length = this._sock.rQshift32();
+ const name_length = this._sock.rQshift32();
if (this._sock.rQwait('server init name', name_length, 24)) { return false; }
this._fb_name = decodeUTF8(this._sock.rQshiftStr(name_length));
if (this._rfb_tightvnc) {
if (this._sock.rQwait('TightVNC extended server init header', 8, 24 + name_length)) { return false; }
// In TightVNC mode, ServerInit message is extended
- var numServerMessages = this._sock.rQshift16();
- var numClientMessages = this._sock.rQshift16();
- var numEncodings = this._sock.rQshift16();
+ const numServerMessages = this._sock.rQshift16();
+ const numClientMessages = this._sock.rQshift16();
+ const numEncodings = this._sock.rQshift16();
this._sock.rQskipBytes(2); // padding
- var totalMessagesLength = (numServerMessages + numClientMessages + numEncodings) * 16;
+ const totalMessagesLength = (numServerMessages + numClientMessages + numEncodings) * 16;
if (this._sock.rQwait('TightVNC extended server init header', totalMessagesLength, 32 + name_length)) { return false; }
// we don't actually do anything with the capability information that TIGHT sends,
}
// we're past the point where we could backtrack, so it's safe to call this
- this._onDesktopName(this, this._fb_name);
+ this.dispatchEvent(new CustomEvent(
+ "desktopname",
+ { detail: { name: this._fb_name } }));
this._resize(width, height);
- if (!this._view_only) { this._keyboard.grab(); }
- if (!this._view_only) { this._mouse.grab(); }
+ if (!this._viewOnly) { this._keyboard.grab(); }
+ if (!this._viewOnly) { this._mouse.grab(); }
this._fb_depth = 24;
this._timing.fbu_rt_start = (new Date()).getTime();
this._timing.pixels = 0;
- // Cursor will be server side until the server decides to honor
- // our request and send over the cursor image
- this._display.disableLocalCursor();
-
this._updateConnectionState('connected');
return true;
- },
+ }
- _sendEncodings: function () {
- var encs = [];
+ _sendEncodings() {
+ const encs = [];
// In preference order
encs.push(encodings.encodingCopyRect);
// Only supported with full depth support
if (this._fb_depth == 24) {
encs.push(encodings.encodingTight);
+ encs.push(encodings.encodingTightPNG);
encs.push(encodings.encodingHextile);
encs.push(encodings.encodingRRE);
}
encs.push(encodings.encodingRaw);
// Psuedo-encoding settings
- encs.push(encodings.pseudoEncodingTightPNG);
encs.push(encodings.pseudoEncodingQualityLevel0 + 6);
encs.push(encodings.pseudoEncodingCompressLevel0 + 2);
encs.push(encodings.pseudoEncodingFence);
encs.push(encodings.pseudoEncodingContinuousUpdates);
- if (this._local_cursor && this._fb_depth == 24) {
+ if (this._fb_depth == 24) {
encs.push(encodings.pseudoEncodingCursor);
}
RFB.messages.clientEncodings(this._sock, encs);
- },
+ }
/* RFB protocol initialization states:
* ProtocolVersion
* ClientInitialization - not triggered by server message
* ServerInitialization
*/
- _init_msg: function () {
+ _init_msg() {
switch (this._rfb_init_state) {
case 'ProtocolVersion':
return this._negotiate_protocol_version();
return this._negotiate_server_init();
default:
- return this._fail("Internal error", "Unknown init state: " +
- this._rfb_init_state);
+ return this._fail("Unknown init state (state: " +
+ this._rfb_init_state + ")");
}
- },
+ }
- _handle_set_colour_map_msg: function () {
+ _handle_set_colour_map_msg() {
Log.Debug("SetColorMapEntries");
- return this._fail("Protocol error", "Unexpected SetColorMapEntries message");
- },
+ return this._fail("Unexpected SetColorMapEntries message");
+ }
- _handle_server_cut_text: function () {
+ _handle_server_cut_text() {
Log.Debug("ServerCutText");
if (this._sock.rQwait("ServerCutText header", 7, 1)) { return false; }
this._sock.rQskipBytes(3); // Padding
- var length = this._sock.rQshift32();
+ const length = this._sock.rQshift32();
if (this._sock.rQwait("ServerCutText", length, 8)) { return false; }
- var text = this._sock.rQshiftStr(length);
+ const text = this._sock.rQshiftStr(length);
- if (this._view_only) { return true; }
+ if (this._viewOnly) { return true; }
- this._onClipboard(this, text);
+ this.dispatchEvent(new CustomEvent(
+ "clipboard",
+ { detail: { text: text } }));
return true;
- },
+ }
- _handle_server_fence_msg: function() {
+ _handle_server_fence_msg() {
if (this._sock.rQwait("ServerFence header", 8, 1)) { return false; }
this._sock.rQskipBytes(3); // Padding
- var flags = this._sock.rQshift32();
- var length = this._sock.rQshift8();
+ let flags = this._sock.rQshift32();
+ let length = this._sock.rQshift8();
if (this._sock.rQwait("ServerFence payload", length, 9)) { return false; }
length = 64;
}
- var payload = this._sock.rQshiftStr(length);
+ const payload = this._sock.rQshiftStr(length);
this._supportsFence = true;
*/
if (!(flags & (1<<31))) {
- return this._fail("Internal error",
- "Unexpected fence response");
+ return this._fail("Unexpected fence response");
}
// Filter out unsupported flags
RFB.messages.clientFence(this._sock, flags, payload);
return true;
- },
+ }
- _handle_xvp_msg: function () {
+ _handle_xvp_msg() {
if (this._sock.rQwait("XVP version and message", 3, 1)) { return false; }
this._sock.rQskip8(); // Padding
- var xvp_ver = this._sock.rQshift8();
- var xvp_msg = this._sock.rQshift8();
+ const xvp_ver = this._sock.rQshift8();
+ const xvp_msg = this._sock.rQshift8();
switch (xvp_msg) {
case 0: // XVP_FAIL
- Log.Error("Operation Failed");
- this._notification("XVP Operation Failed", 'error');
+ Log.Error("XVP Operation Failed");
break;
case 1: // XVP_INIT
this._rfb_xvp_ver = xvp_ver;
Log.Info("XVP extensions enabled (version " + this._rfb_xvp_ver + ")");
- this._onXvpInit(this._rfb_xvp_ver);
+ this._setCapability("power", true);
break;
default:
- this._fail("Unexpected server message",
- "Illegal server XVP message " + xvp_msg);
+ this._fail("Illegal server XVP message (msg: " + xvp_msg + ")");
break;
}
return true;
- },
-
- _normal_msg: function () {
- var msg_type;
+ }
+ _normal_msg() {
+ let msg_type;
if (this._FBU.rects > 0) {
msg_type = 0;
} else {
msg_type = this._sock.rQshift8();
}
+ let first, ret;
switch (msg_type) {
case 0: // FramebufferUpdate
- var ret = this._framebufferUpdate();
+ ret = this._framebufferUpdate();
if (ret && !this._enabledContinuousUpdates) {
RFB.messages.fbUpdateRequest(this._sock, true, 0, 0,
this._fb_width, this._fb_height);
case 2: // Bell
Log.Debug("Bell");
- this._onBell(this);
+ this.dispatchEvent(new CustomEvent(
+ "bell",
+ { detail: {} }));
return true;
case 3: // ServerCutText
return this._handle_server_cut_text();
case 150: // EndOfContinuousUpdates
- var first = !(this._supportsContinuousUpdates);
+ first = !this._supportsContinuousUpdates;
this._supportsContinuousUpdates = true;
this._enabledContinuousUpdates = false;
if (first) {
return this._handle_xvp_msg();
default:
- this._fail("Unexpected server message", "Type:" + msg_type);
+ this._fail("Unexpected server message (type " + msg_type + ")");
Log.Debug("sock.rQslice(0, 30): " + this._sock.rQslice(0, 30));
return true;
}
- },
+ }
- _onFlush: function() {
+ _onFlush() {
this._flushing = false;
// Resume processing
if (this._sock.rQlen() > 0) {
this._handle_message();
}
- },
-
- _framebufferUpdate: function () {
- var ret = true;
- var now;
+ }
+ _framebufferUpdate() {
if (this._FBU.rects === 0) {
if (this._sock.rQwait("FBU header", 3, 1)) { return false; }
this._sock.rQskip8(); // Padding
this._FBU.bytes = 0;
this._timing.cur_fbu = 0;
if (this._timing.fbu_rt_start > 0) {
- now = (new Date()).getTime();
+ const now = (new Date()).getTime();
Log.Info("First FBU latency: " + (now - this._timing.fbu_rt_start));
}
if (this._sock.rQwait("rect header", 12)) { return false; }
/* New FramebufferUpdate */
- var hdr = this._sock.rQshiftBytes(12);
+ const hdr = this._sock.rQshiftBytes(12);
this._FBU.x = (hdr[0] << 8) + hdr[1];
this._FBU.y = (hdr[2] << 8) + hdr[3];
this._FBU.width = (hdr[4] << 8) + hdr[5];
this._FBU.encoding = parseInt((hdr[8] << 24) + (hdr[9] << 16) +
(hdr[10] << 8) + hdr[11], 10);
- this._onFBUReceive(this,
- {'x': this._FBU.x, 'y': this._FBU.y,
- 'width': this._FBU.width, 'height': this._FBU.height,
- 'encoding': this._FBU.encoding,
- 'encodingName': encodingName(this._FBU.encoding)});
-
if (!this._encHandlers[this._FBU.encoding]) {
- this._fail("Unexpected server message",
- "Unsupported encoding " +
- this._FBU.encoding);
+ this._fail("Unsupported encoding (encoding: " +
+ this._FBU.encoding + ")");
return false;
}
}
this._timing.last_fbu = (new Date()).getTime();
- ret = this._encHandlers[this._FBU.encoding]();
+ const ret = this._encHandlers[this._FBU.encoding]();
- now = (new Date()).getTime();
+ const now = (new Date()).getTime();
this._timing.cur_fbu += (now - this._timing.last_fbu);
if (ret) {
}
if (this._timing.fbu_rt_start > 0) {
- var fbu_rt_diff = now - this._timing.fbu_rt_start;
+ const fbu_rt_diff = now - this._timing.fbu_rt_start;
this._timing.fbu_rt_total += fbu_rt_diff;
this._timing.fbu_rt_cnt++;
Log.Info("full FBU round-trip, cur: " +
this._display.flip();
- this._onFBUComplete(this);
-
return true; // We finished this FBU
- },
+ }
- _updateContinuousUpdates: function() {
+ _updateContinuousUpdates() {
if (!this._enabledContinuousUpdates) { return; }
RFB.messages.enableContinuousUpdates(this._sock, true, 0, 0,
this._fb_width, this._fb_height);
- },
+ }
- _resize: function(width, height) {
+ _resize(width, height) {
this._fb_width = width;
this._fb_height = height;
this._destBuff = new Uint8Array(this._fb_width * this._fb_height * 4);
this._display.resize(this._fb_width, this._fb_height);
- this._onFBResize(this, this._fb_width, this._fb_height);
+
+ // Adjust the visible viewport based on the new dimensions
+ this._updateClip();
+ this._updateScale();
this._timing.fbu_rt_start = (new Date()).getTime();
this._updateContinuousUpdates();
}
-};
-make_properties(RFB, [
- ['target', 'wo', 'dom'], // VNC display rendering Canvas object
- ['encrypt', 'rw', 'bool'], // Use TLS/SSL/wss encryption
- ['local_cursor', 'rw', 'bool'], // Request locally rendered cursor
- ['shared', 'rw', 'bool'], // Request shared mode
- ['view_only', 'rw', 'bool'], // Disable client mouse/keyboard
- ['touchButton', 'rw', 'int'], // Button mask (1, 2, 4) for touch devices (0 means ignore clicks)
- ['scale', 'rw', 'float'], // Display area scale factor
- ['viewport', 'rw', 'bool'], // Use viewport clipping
- ['xvp_password_sep', 'rw', 'str'], // Separator for XVP password fields
- ['disconnectTimeout', 'rw', 'int'], // Time (s) to wait for disconnection
- ['wsProtocols', 'rw', 'arr'], // Protocols to use in the WebSocket connection
- ['repeaterID', 'rw', 'str'], // [UltraVNC] RepeaterID to connect to
- ['viewportDrag', 'rw', 'bool'], // Move the viewport on mouse drags
-
- // Callback functions
- ['onUpdateState', 'rw', 'func'], // onUpdateState(rfb, state, oldstate): connection state change
- ['onNotification', 'rw', 'func'], // onNotification(rfb, msg, level, options): notification for the UI
- ['onDisconnected', 'rw', 'func'], // onDisconnected(rfb, reason): disconnection finished
- ['onPasswordRequired', 'rw', 'func'], // onPasswordRequired(rfb, msg): VNC password is required
- ['onClipboard', 'rw', 'func'], // onClipboard(rfb, text): RFB clipboard contents received
- ['onBell', 'rw', 'func'], // onBell(rfb): RFB Bell message received
- ['onFBUReceive', 'rw', 'func'], // onFBUReceive(rfb, fbu): RFB FBU received but not yet processed
- ['onFBUComplete', 'rw', 'func'], // onFBUComplete(rfb, fbu): RFB FBU received and processed
- ['onFBResize', 'rw', 'func'], // onFBResize(rfb, width, height): frame buffer resized
- ['onDesktopName', 'rw', 'func'], // onDesktopName(rfb, name): desktop name received
- ['onXvpInit', 'rw', 'func'] // onXvpInit(version): XVP extensions active for this connection
-]);
-
-RFB.prototype.set_local_cursor = function (cursor) {
- if (!cursor || (cursor in {'0': 1, 'no': 1, 'false': 1})) {
- this._local_cursor = false;
- this._display.disableLocalCursor(); //Only show server-side cursor
- } else {
- if (this._display.get_cursor_uri()) {
- this._local_cursor = true;
- } else {
- Log.Warn("Browser does not support local cursor");
- this._display.disableLocalCursor();
- }
+ _xvpOp(ver, op) {
+ if (this._rfb_xvp_ver < ver) { return; }
+ Log.Info("Sending XVP operation " + op + " (version " + ver + ")");
+ RFB.messages.xvpOp(this._sock, ver, op);
}
- // Need to send an updated list of encodings if we are connected
- if (this._rfb_connection_state === "connected") {
- this._sendEncodings();
+ _updateCursor(rgba, hotx, hoty, w, h) {
+ this._cursorImage = {
+ rgbaPixels: rgba,
+ hotx: hotx, hoty: hoty, w: w, h: h,
+ };
+ this._refreshCursor();
}
-};
-RFB.prototype.set_view_only = function (view_only) {
- this._view_only = view_only;
-
- if (this._rfb_connection_state === "connecting" ||
- this._rfb_connection_state === "connected") {
- if (view_only) {
- this._keyboard.ungrab();
- this._mouse.ungrab();
- } else {
- this._keyboard.grab();
- this._mouse.grab();
+ _shouldShowDotCursor() {
+ // Called when this._cursorImage is updated
+ if (!this._showDotCursor) {
+ // User does not want to see the dot, so...
+ return false;
}
- }
-};
-
-RFB.prototype.set_touchButton = function (button) {
- this._mouse.set_touchButton(button);
-};
-
-RFB.prototype.get_touchButton = function () {
- return this._mouse.get_touchButton();
-};
-RFB.prototype.set_scale = function (scale) {
- this._display.set_scale(scale);
-};
-
-RFB.prototype.get_scale = function () {
- return this._display.get_scale();
-};
+ // The dot should not be shown if the cursor is already visible,
+ // i.e. contains at least one not-fully-transparent pixel.
+ // So iterate through all alpha bytes in rgba and stop at the
+ // first non-zero.
+ for (let i = 3; i < this._cursorImage.rgbaPixels.length; i += 4) {
+ if (this._cursorImage.rgbaPixels[i]) {
+ return false;
+ }
+ }
-RFB.prototype.set_viewport = function (viewport) {
- this._display.set_viewport(viewport);
-};
+ // At this point, we know that the cursor is fully transparent, and
+ // the user wants to see the dot instead of this.
+ return true;
+ }
-RFB.prototype.get_viewport = function () {
- return this._display.get_viewport();
-};
+ _refreshCursor() {
+ const image = this._shouldShowDotCursor() ? RFB.cursors.dot : this._cursorImage;
+ this._cursor.change(image.rgbaPixels,
+ image.hotx, image.hoty,
+ image.w, image.h
+ );
+ }
-RFB.prototype.get_keyboard = function () { return this._keyboard; };
+ static genDES(password, challenge) {
+ const passwd = [];
+ for (let i = 0; i < password.length; i++) {
+ passwd.push(password.charCodeAt(i));
+ }
+ return (new DES(passwd)).encrypt(challenge);
+ }
+}
// Class Methods
RFB.messages = {
- keyEvent: function (sock, keysym, down) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ keyEvent(sock, keysym, down) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 4; // msg-type
buff[offset + 1] = down;
sock.flush();
},
- QEMUExtendedKeyEvent: function (sock, keysym, down, keycode) {
+ QEMUExtendedKeyEvent(sock, keysym, down, keycode) {
function getRFBkeycode(xt_scancode) {
- var upperByte = (keycode >> 8);
- var lowerByte = (keycode & 0x00ff);
+ const upperByte = (keycode >> 8);
+ const lowerByte = (keycode & 0x00ff);
if (upperByte === 0xe0 && lowerByte < 0x7f) {
- lowerByte = lowerByte | 0x80;
- return lowerByte;
+ return lowerByte | 0x80;
}
return xt_scancode;
}
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 255; // msg-type
buff[offset + 1] = 0; // sub msg-type
buff[offset + 6] = (keysym >> 8);
buff[offset + 7] = keysym;
- var RFBkeycode = getRFBkeycode(keycode);
+ const RFBkeycode = getRFBkeycode(keycode);
buff[offset + 8] = (RFBkeycode >> 24);
buff[offset + 9] = (RFBkeycode >> 16);
sock.flush();
},
- pointerEvent: function (sock, x, y, mask) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ pointerEvent(sock, x, y, mask) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 5; // msg-type
},
// TODO(directxman12): make this unicode compatible?
- clientCutText: function (sock, text) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ clientCutText(sock, text) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 6; // msg-type
buff[offset + 2] = 0; // padding
buff[offset + 3] = 0; // padding
- var n = text.length;
+ let length = text.length;
- buff[offset + 4] = n >> 24;
- buff[offset + 5] = n >> 16;
- buff[offset + 6] = n >> 8;
- buff[offset + 7] = n;
+ buff[offset + 4] = length >> 24;
+ buff[offset + 5] = length >> 16;
+ buff[offset + 6] = length >> 8;
+ buff[offset + 7] = length;
- for (var i = 0; i < n; i++) {
- buff[offset + 8 + i] = text.charCodeAt(i);
- }
+ sock._sQlen += 8;
- sock._sQlen += 8 + n;
- sock.flush();
+ // We have to keep track of from where in the text we begin creating the
+ // buffer for the flush in the next iteration.
+ let textOffset = 0;
+
+ let remaining = length;
+ while (remaining > 0) {
+
+ let flushSize = Math.min(remaining, (sock._sQbufferSize - sock._sQlen));
+ if (flushSize <= 0) {
+ this._fail("Clipboard contents could not be sent");
+ break;
+ }
+
+ for (let i = 0; i < flushSize; i++) {
+ buff[sock._sQlen + i] = text.charCodeAt(textOffset + i);
+ }
+
+ sock._sQlen += flushSize;
+ sock.flush();
+
+ remaining -= flushSize;
+ textOffset += flushSize;
+ }
},
- setDesktopSize: function (sock, width, height, id, flags) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ setDesktopSize(sock, width, height, id, flags) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 251; // msg-type
buff[offset + 1] = 0; // padding
sock.flush();
},
- clientFence: function (sock, flags, payload) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ clientFence(sock, flags, payload) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 248; // msg-type
buff[offset + 6] = flags >> 8;
buff[offset + 7] = flags;
- var n = payload.length;
+ const n = payload.length;
buff[offset + 8] = n; // length
- for (var i = 0; i < n; i++) {
+ for (let i = 0; i < n; i++) {
buff[offset + 9 + i] = payload.charCodeAt(i);
}
sock.flush();
},
- enableContinuousUpdates: function (sock, enable, x, y, width, height) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ enableContinuousUpdates(sock, enable, x, y, width, height) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 150; // msg-type
buff[offset + 1] = enable; // enable-flag
sock.flush();
},
- pixelFormat: function (sock, depth, true_color) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ pixelFormat(sock, depth, true_color) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
- var bpp, bits;
+ let bpp;
if (depth > 16) {
bpp = 32;
bpp = 8;
}
- bits = Math.floor(depth/3);
+ const bits = Math.floor(depth/3);
buff[offset] = 0; // msg-type
sock.flush();
},
- clientEncodings: function (sock, encodings) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ clientEncodings(sock, encodings) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
buff[offset] = 2; // msg-type
buff[offset + 1] = 0; // padding
buff[offset + 2] = encodings.length >> 8;
buff[offset + 3] = encodings.length;
- var i, j = offset + 4;
- for (i = 0; i < encodings.length; i++) {
- var enc = encodings[i];
+ let j = offset + 4;
+ for (let i = 0; i < encodings.length; i++) {
+ const enc = encodings[i];
buff[j] = enc >> 24;
buff[j + 1] = enc >> 16;
buff[j + 2] = enc >> 8;
sock.flush();
},
- fbUpdateRequest: function (sock, incremental, x, y, w, h) {
- var buff = sock._sQ;
- var offset = sock._sQlen;
+ fbUpdateRequest(sock, incremental, x, y, w, h) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
if (typeof(x) === "undefined") { x = 0; }
if (typeof(y) === "undefined") { y = 0; }
sock._sQlen += 10;
sock.flush();
- }
-};
+ },
+
+ xvpOp(sock, ver, op) {
+ const buff = sock._sQ;
+ const offset = sock._sQlen;
-RFB.genDES = function (password, challenge) {
- var passwd = [];
- for (var i = 0; i < password.length; i++) {
- passwd.push(password.charCodeAt(i));
+ buff[offset] = 250; // msg-type
+ buff[offset + 1] = 0; // padding
+
+ buff[offset + 2] = ver;
+ buff[offset + 3] = op;
+
+ sock._sQlen += 4;
+ sock.flush();
}
- return (new DES(passwd)).encrypt(challenge);
};
+
RFB.encodingHandlers = {
- RAW: function () {
+ RAW() {
if (this._FBU.lines === 0) {
this._FBU.lines = this._FBU.height;
}
- var pixelSize = this._fb_depth == 8 ? 1 : 4;
+ const pixelSize = this._fb_depth == 8 ? 1 : 4;
this._FBU.bytes = this._FBU.width * pixelSize; // at least a line
if (this._sock.rQwait("RAW", this._FBU.bytes)) { return false; }
- var cur_y = this._FBU.y + (this._FBU.height - this._FBU.lines);
- var curr_height = Math.min(this._FBU.lines,
+ const cur_y = this._FBU.y + (this._FBU.height - this._FBU.lines);
+ const curr_height = Math.min(this._FBU.lines,
Math.floor(this._sock.rQlen() / (this._FBU.width * pixelSize)));
- var data = this._sock.get_rQ();
- var index = this._sock.get_rQi();
+ let data = this._sock.get_rQ();
+ let index = this._sock.get_rQi();
if (this._fb_depth == 8) {
- var pixels = this._FBU.width * curr_height
- var newdata = new Uint8Array(pixels * 4);
- var i;
- for (i = 0;i < pixels;i++) {
+ const pixels = this._FBU.width * curr_height
+ const newdata = new Uint8Array(pixels * 4);
+ for (let i = 0; i < pixels; i++) {
newdata[i * 4 + 0] = ((data[index + i] >> 0) & 0x3) * 255 / 3;
newdata[i * 4 + 1] = ((data[index + i] >> 2) & 0x3) * 255 / 3;
newdata[i * 4 + 2] = ((data[index + i] >> 4) & 0x3) * 255 / 3;
return true;
},
- COPYRECT: function () {
+ COPYRECT() {
this._FBU.bytes = 4;
if (this._sock.rQwait("COPYRECT", 4)) { return false; }
this._display.copyImage(this._sock.rQshift16(), this._sock.rQshift16(),
return true;
},
- RRE: function () {
- var color;
+ RRE() {
+ let color;
if (this._FBU.subrects === 0) {
this._FBU.bytes = 4 + 4;
if (this._sock.rQwait("RRE", 4 + 4)) { return false; }
while (this._FBU.subrects > 0 && this._sock.rQlen() >= (4 + 8)) {
color = this._sock.rQshiftBytes(4);
- var x = this._sock.rQshift16();
- var y = this._sock.rQshift16();
- var width = this._sock.rQshift16();
- var height = this._sock.rQshift16();
+ const x = this._sock.rQshift16();
+ const y = this._sock.rQshift16();
+ const width = this._sock.rQshift16();
+ const height = this._sock.rQshift16();
this._display.fillRect(this._FBU.x + x, this._FBU.y + y, width, height, color);
this._FBU.subrects--;
}
if (this._FBU.subrects > 0) {
- var chunk = Math.min(this._rre_chunk_sz, this._FBU.subrects);
+ const chunk = Math.min(this._rre_chunk_sz, this._FBU.subrects);
this._FBU.bytes = (4 + 8) * chunk;
} else {
this._FBU.rects--;
return true;
},
- HEXTILE: function () {
- var rQ = this._sock.get_rQ();
- var rQi = this._sock.get_rQi();
+ HEXTILE() {
+ const rQ = this._sock.get_rQ();
+ let rQi = this._sock.get_rQi();
if (this._FBU.tiles === 0) {
this._FBU.tiles_x = Math.ceil(this._FBU.width / 16);
while (this._FBU.tiles > 0) {
this._FBU.bytes = 1;
if (this._sock.rQwait("HEXTILE subencoding", this._FBU.bytes)) { return false; }
- var subencoding = rQ[rQi]; // Peek
+ const subencoding = rQ[rQi]; // Peek
if (subencoding > 30) { // Raw
- this._fail("Unexpected server message",
- "Illegal hextile subencoding: " + subencoding);
+ this._fail("Illegal hextile subencoding (subencoding: " +
+ subencoding + ")");
return false;
}
- var subrects = 0;
- var curr_tile = this._FBU.total_tiles - this._FBU.tiles;
- var tile_x = curr_tile % this._FBU.tiles_x;
- var tile_y = Math.floor(curr_tile / this._FBU.tiles_x);
- var x = this._FBU.x + tile_x * 16;
- var y = this._FBU.y + tile_y * 16;
- var w = Math.min(16, (this._FBU.x + this._FBU.width) - x);
- var h = Math.min(16, (this._FBU.y + this._FBU.height) - y);
+ let subrects = 0;
+ const curr_tile = this._FBU.total_tiles - this._FBU.tiles;
+ const tile_x = curr_tile % this._FBU.tiles_x;
+ const tile_y = Math.floor(curr_tile / this._FBU.tiles_x);
+ const x = this._FBU.x + tile_x * 16;
+ const y = this._FBU.y + tile_y * 16;
+ const w = Math.min(16, (this._FBU.x + this._FBU.width) - x);
+ const h = Math.min(16, (this._FBU.y + this._FBU.height) - y);
// Figure out how much we are expecting
if (subencoding & 0x01) { // Raw
subrects = rQ[rQi];
rQi++;
- for (var s = 0; s < subrects; s++) {
- var color;
+ for (let s = 0; s < subrects; s++) {
+ let color;
if (this._FBU.subencoding & 0x10) { // SubrectsColoured
color = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]];
rQi += 4;
} else {
color = this._FBU.foreground;
}
- var xy = rQ[rQi];
+ const xy = rQ[rQi];
rQi++;
- var sx = (xy >> 4);
- var sy = (xy & 0x0f);
+ const sx = (xy >> 4);
+ const sy = (xy & 0x0f);
- var wh = rQ[rQi];
+ const wh = rQ[rQi];
rQi++;
- var sw = (wh >> 4) + 1;
- var sh = (wh & 0x0f) + 1;
+ const sw = (wh >> 4) + 1;
+ const sh = (wh & 0x0f) + 1;
this._display.subTile(sx, sy, sw, sh, color);
}
return true;
},
- TIGHT: function () {
+ TIGHT(isTightPNG) {
this._FBU.bytes = 1; // compression-control byte
if (this._sock.rQwait("TIGHT compression-control", this._FBU.bytes)) { return false; }
- var checksum = function (data) {
- var sum = 0;
- for (var i = 0; i < data.length; i++) {
- sum += data[i];
- if (sum > 65536) sum -= 65536;
- }
- return sum;
- };
-
- var resetStreams = 0;
- var streamId = -1;
- var decompress = function (data, expected) {
- for (var i = 0; i < 4; i++) {
+ let resetStreams = 0;
+ let streamId = -1;
+ const decompress = (data, expected) => {
+ for (let i = 0; i < 4; i++) {
if ((resetStreams >> i) & 1) {
this._FBU.zlibs[i].reset();
Log.Info("Reset zlib stream " + i);
}
}
- //var uncompressed = this._FBU.zlibs[streamId].uncompress(data, 0);
- var uncompressed = this._FBU.zlibs[streamId].inflate(data, true, expected);
+ //const uncompressed = this._FBU.zlibs[streamId].uncompress(data, 0);
+ const uncompressed = this._FBU.zlibs[streamId].inflate(data, true, expected);
/*if (uncompressed.status !== 0) {
Log.Error("Invalid data in zlib stream");
}*/
//return uncompressed.data;
return uncompressed;
- }.bind(this);
+ };
- var indexedToRGBX2Color = function (data, palette, width, height) {
+ const indexedToRGBX2Color = (data, palette, width, height) => {
// Convert indexed (palette based) image data to RGB
// TODO: reduce number of calculations inside loop
- var dest = this._destBuff;
- var w = Math.floor((width + 7) / 8);
- var w1 = Math.floor(width / 8);
-
- /*for (var y = 0; y < height; y++) {
- var b, x, dp, sp;
- var yoffset = y * width;
- var ybitoffset = y * w;
- var xoffset, targetbyte;
+ const dest = this._destBuff;
+ const w = Math.floor((width + 7) / 8);
+ const w1 = Math.floor(width / 8);
+
+ /*for (let y = 0; y < height; y++) {
+ let b, x, dp, sp;
+ const yoffset = y * width;
+ const ybitoffset = y * w;
+ let xoffset, targetbyte;
for (x = 0; x < w1; x++) {
xoffset = yoffset + x * 8;
targetbyte = data[ybitoffset + x];
}
}*/
- for (var y = 0; y < height; y++) {
- var b, x, dp, sp;
+ for (let y = 0; y < height; y++) {
+ let dp, sp, x;
for (x = 0; x < w1; x++) {
- for (b = 7; b >= 0; b--) {
+ for (let b = 7; b >= 0; b--) {
dp = (y * width + x * 8 + 7 - b) * 4;
sp = (data[y * w + x] >> b & 1) * 3;
dest[dp] = palette[sp];
}
}
- for (b = 7; b >= 8 - width % 8; b--) {
+ for (let b = 7; b >= 8 - width % 8; b--) {
dp = (y * width + x * 8 + 7 - b) * 4;
sp = (data[y * w + x] >> b & 1) * 3;
dest[dp] = palette[sp];
}
return dest;
- }.bind(this);
+ };
- var indexedToRGBX = function (data, palette, width, height) {
+ const indexedToRGBX = (data, palette, width, height) => {
// Convert indexed (palette based) image data to RGB
- var dest = this._destBuff;
- var total = width * height * 4;
- for (var i = 0, j = 0; i < total; i += 4, j++) {
- var sp = data[j] * 3;
+ const dest = this._destBuff;
+ const total = width * height * 4;
+ for (let i = 0, j = 0; i < total; i += 4, j++) {
+ const sp = data[j] * 3;
dest[i] = palette[sp];
dest[i + 1] = palette[sp + 1];
dest[i + 2] = palette[sp + 2];
}
return dest;
- }.bind(this);
+ };
- var rQi = this._sock.get_rQi();
- var rQ = this._sock.rQwhole();
- var cmode, data;
- var cl_header, cl_data;
+ const rQi = this._sock.get_rQi();
+ const rQ = this._sock.rQwhole();
+ let cmode, data;
+ let cl_header, cl_data;
- var handlePalette = function () {
- var numColors = rQ[rQi + 2] + 1;
- var paletteSize = numColors * 3;
+ const handlePalette = () => {
+ const numColors = rQ[rQi + 2] + 1;
+ const paletteSize = numColors * 3;
this._FBU.bytes += paletteSize;
if (this._sock.rQwait("TIGHT palette " + cmode, this._FBU.bytes)) { return false; }
- var bpp = (numColors <= 2) ? 1 : 8;
- var rowSize = Math.floor((this._FBU.width * bpp + 7) / 8);
- var raw = false;
+ const bpp = (numColors <= 2) ? 1 : 8;
+ const rowSize = Math.floor((this._FBU.width * bpp + 7) / 8);
+ let raw = false;
if (rowSize * this._FBU.height < 12) {
raw = true;
cl_header = 0;
//clength = [0, rowSize * this._FBU.height];
} else {
// begin inline getTightCLength (returning two-item arrays is bad for performance with GC)
- var cl_offset = rQi + 3 + paletteSize;
+ const cl_offset = rQi + 3 + paletteSize;
cl_header = 1;
cl_data = 0;
cl_data += rQ[cl_offset] & 0x7f;
// Shift ctl, filter id, num colors, palette entries, and clength off
this._sock.rQskipBytes(3);
- //var palette = this._sock.rQshiftBytes(paletteSize);
+ //const palette = this._sock.rQshiftBytes(paletteSize);
this._sock.rQshiftTo(this._paletteBuff, paletteSize);
this._sock.rQskipBytes(cl_header);
}
// Convert indexed (palette based) image data to RGB
- var rgbx;
+ let rgbx;
if (numColors == 2) {
rgbx = indexedToRGBX2Color(data, this._paletteBuff, this._FBU.width, this._FBU.height);
- this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false);
} else {
rgbx = indexedToRGBX(data, this._paletteBuff, this._FBU.width, this._FBU.height);
- this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false);
}
+ this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false);
+
return true;
- }.bind(this);
+ };
- var handleCopy = function () {
- var raw = false;
- var uncompressedSize = this._FBU.width * this._FBU.height * 3;
+ const handleCopy = () => {
+ let raw = false;
+ const uncompressedSize = this._FBU.width * this._FBU.height * 3;
if (uncompressedSize < 12) {
raw = true;
cl_header = 0;
cl_data = uncompressedSize;
} else {
// begin inline getTightCLength (returning two-item arrays is for peformance with GC)
- var cl_offset = rQi + 1;
+ const cl_offset = rQi + 1;
cl_header = 1;
cl_data = 0;
cl_data += rQ[cl_offset] & 0x7f;
this._display.blitRgbImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, data, 0, false);
return true;
- }.bind(this);
+ };
- var ctl = this._sock.rQpeek8();
+ let ctl = this._sock.rQpeek8();
// Keep tight reset bits
resetStreams = ctl & 0xF;
else if (ctl === 0x0A) cmode = "png";
else if (ctl & 0x04) cmode = "filter";
else if (ctl < 0x04) cmode = "copy";
- else return this._fail("Unexpected server message",
- "Illegal tight compression received, " +
- "ctl: " + ctl);
+ else return this._fail("Illegal tight compression received (ctl: " +
+ ctl + ")");
+
+ if (isTightPNG && (ctl < 0x08)) {
+ return this._fail("BasicCompression received in TightPNG rect");
+ }
+ if (!isTightPNG && (ctl === 0x0A)) {
+ return this._fail("PNG received in standard Tight rect");
+ }
switch (cmode) {
// fill use depth because TPIXELs drop the padding byte
if (this._sock.rQwait("TIGHT " + cmode, this._FBU.bytes)) { return false; }
// Determine FBU.bytes
+ let cl_offset, filterId;
switch (cmode) {
case "fill":
// skip ctl byte
case "png":
case "jpeg":
// begin inline getTightCLength (returning two-item arrays is for peformance with GC)
- var cl_offset = rQi + 1;
+ cl_offset = rQi + 1;
cl_header = 1;
cl_data = 0;
cl_data += rQ[cl_offset] & 0x7f;
this._display.imageRect(this._FBU.x, this._FBU.y, "image/" + cmode, data);
break;
case "filter":
- var filterId = rQ[rQi + 1];
+ filterId = rQ[rQi + 1];
if (filterId === 1) {
if (!handlePalette()) { return false; }
} else {
// Filter 0, Copy could be valid here, but servers don't send it as an explicit filter
// Filter 2, Gradient is valid but not use if jpeg is enabled
- this._fail("Unexpected server message",
- "Unsupported tight subencoding received, " +
- "filter: " + filterId);
+ this._fail("Unsupported tight subencoding received " +
+ "(filter: " + filterId + ")");
}
break;
case "copy":
return true;
},
- last_rect: function () {
+ last_rect() {
this._FBU.rects = 0;
return true;
},
- ExtendedDesktopSize: function () {
+ ExtendedDesktopSize() {
this._FBU.bytes = 1;
if (this._sock.rQwait("ExtendedDesktopSize", this._FBU.bytes)) { return false; }
+ const firstUpdate = !this._supportsSetDesktopSize;
this._supportsSetDesktopSize = true;
- var number_of_screens = this._sock.rQpeek8();
+
+ // Normally we only apply the current resize mode after a
+ // window resize event. However there is no such trigger on the
+ // initial connect. And we don't know if the server supports
+ // resizing until we've gotten here.
+ if (firstUpdate) {
+ this._requestRemoteResize();
+ }
+
+ const number_of_screens = this._sock.rQpeek8();
this._FBU.bytes = 4 + (number_of_screens * 16);
if (this._sock.rQwait("ExtendedDesktopSize", this._FBU.bytes)) { return false; }
this._sock.rQskipBytes(1); // number-of-screens
this._sock.rQskipBytes(3); // padding
- for (var i = 0; i < number_of_screens; i += 1) {
+ for (let i = 0; i < number_of_screens; i += 1) {
// Save the id and flags of the first screen
if (i === 0) {
this._screen_id = this._sock.rQshiftBytes(4); // id
// We need to handle errors when we requested the resize.
if (this._FBU.x === 1 && this._FBU.y !== 0) {
- var msg = "";
+ let msg = "";
// The y-position indicates the status code from the server
switch (this._FBU.y) {
case 1:
msg = "Unknown reason";
break;
}
- this._notification("Server did not accept the resize request: "
- + msg, 'normal');
+ Log.Warn("Server did not accept the resize request: "
+ + msg);
} else {
this._resize(this._FBU.width, this._FBU.height);
}
return true;
},
- DesktopSize: function () {
+ DesktopSize() {
this._resize(this._FBU.width, this._FBU.height);
this._FBU.bytes = 0;
this._FBU.rects -= 1;
return true;
},
- Cursor: function () {
+ Cursor() {
Log.Debug(">> set_cursor");
- var x = this._FBU.x; // hotspot-x
- var y = this._FBU.y; // hotspot-y
- var w = this._FBU.width;
- var h = this._FBU.height;
+ const hotx = this._FBU.x; // hotspot-x
+ const hoty = this._FBU.y; // hotspot-y
+ const w = this._FBU.width;
+ const h = this._FBU.height;
- var pixelslength = w * h * 4;
- var masklength = Math.floor((w + 7) / 8) * h;
+ const pixelslength = w * h * 4;
+ const masklength = Math.ceil(w / 8) * h;
this._FBU.bytes = pixelslength + masklength;
if (this._sock.rQwait("cursor encoding", this._FBU.bytes)) { return false; }
- this._display.changeCursor(this._sock.rQshiftBytes(pixelslength),
- this._sock.rQshiftBytes(masklength),
- x, y, w, h);
+ // Decode from BGRX pixels + bit mask to RGBA
+ const pixels = this._sock.rQshiftBytes(pixelslength);
+ const mask = this._sock.rQshiftBytes(masklength);
+ let rgba = new Uint8Array(w * h * 4);
+
+ let pix_idx = 0;
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ let mask_idx = y * Math.ceil(w / 8) + Math.floor(x / 8);
+ let alpha = (mask[mask_idx] << (x % 8)) & 0x80 ? 255 : 0;
+ rgba[pix_idx ] = pixels[pix_idx + 2];
+ rgba[pix_idx + 1] = pixels[pix_idx + 1];
+ rgba[pix_idx + 2] = pixels[pix_idx];
+ rgba[pix_idx + 3] = alpha;
+ pix_idx += 4;
+ }
+ }
+
+ this._updateCursor(rgba, hotx, hoty, w, h);
this._FBU.bytes = 0;
this._FBU.rects--;
return true;
},
- QEMUExtendedKeyEvent: function () {
+ QEMUExtendedKeyEvent() {
this._FBU.rects--;
// Old Safari doesn't support creating keyboard events
try {
- var keyboardEvent = document.createEvent("keyboardEvent");
+ const keyboardEvent = document.createEvent("keyboardEvent");
if (keyboardEvent.code !== undefined) {
this._qemuExtKeyEventSupported = true;
}
} catch (err) {
+ // Do nothing
}
- },
+ }
+}
+
+RFB.cursors = {
+ none: {
+ rgbaPixels: new Uint8Array(),
+ w: 0, h: 0,
+ hotx: 0, hoty: 0,
+ },
+
+ dot: {
+ rgbaPixels: new Uint8Array([
+ 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255,
+ 0, 0, 0, 255, 0, 0, 0, 0, 0, 0, 0, 255,
+ 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255,
+ ]),
+ w: 3, h: 3,
+ hotx: 1, hoty: 1,
+ }
};