入口文件
vnc.html，
css入口
<link rel="stylesheet" href="app/styles/base.css">
<link rel="stylesheet" href="app/styles/input.css">
js入口
<script type="module" crossorigin="anonymous" src="app/error-handler.js"></script>
<script type="module" crossorigin="anonymous" src="app/ui.js"></script>
js主要逻辑
ui.js
ui.js导出文件前,l10n.setup设置语言,UI.prime加载主要逻辑.
l10n语言默认为en,通过window.navigator.languages获取浏览器语言,并根据传输LINGUAS判断是否加载对应语言
l10n.setup(LINGUAS, "app/locale/")
.catch(err => Log.Error("Failed to load translations: " + err))
.then(UI.prime);
UI.prime
调用WebUtil.initSettings初始化全局setting设置,并且在HTML 被完全加载以及解析时,调用UI.start()
prime() {
return WebUtil.initSettings().then(() => {
if (document.readyState === "interactive" || document.readyState === "complete") {
return UI.start();
}
return new Promise((resolve, reject) => {
document.addEventListener('DOMContentLoaded', () => UI.start().then(resolve).catch(reject));
});
});
},
UI.start()
UI.start()设置全局setting,加载版本,
加载事件处理器
// Setup event handlers
UI.addControlbarHandlers();
UI.addTouchSpecificHandlers();
UI.addExtraKeysHandlers();
UI.addMachineHandlers();
UI.addConnectionControlHandlers();
UI.addClipboardHandlers();
UI.addSettingsHandlers();
document.getElementById("noVNC_status") .addEventListener('click', UI.hideStatus);
// Bootstrap fallback input handler
UI.keyboardinputReset();
UI.openControlbar();
UI.updateVisualState('init');
start() {
// initSettings设置全局setting
UI.initSettings();
// Translate the DOM
l10n.translateDOM();
// We rely on modern APIs which might not be available in an
// insecure context
if (!window.isSecureContext) {
// FIXME: This gets hidden when connecting
UI.showStatus(_("HTTPS is required for full functionality"), 'error');
}
// Try to fetch version number
fetch('./package.json')
.then((response) => {
if (!response.ok) {
throw Error("" + response.status + " " + response.statusText);
}
return response.json();
})
.then((packageInfo) => {
Array.from(document.getElementsByClassName('noVNC_version')).forEach(el => el.innerText = packageInfo.version);
})
.catch((err) => {
Log.Error("Couldn't fetch package.json: " + err);
Array.from(document.getElementsByClassName('noVNC_version_wrapper'))
.concat(Array.from(document.getElementsByClassName('noVNC_version_separator')))
.forEach(el => el.style.display = 'none');
});
// Adapt the interface for touch screen devices
if (isTouchDevice) {
// Remove the address bar
setTimeout(() => window.scrollTo(0, 1), 100);
}
// Restore control bar position
if (WebUtil.readSetting('controlbar_pos') === 'right') {
UI.toggleControlbarSide();
}
UI.initFullscreen();
// Setup event handlers
UI.addControlbarHandlers();
UI.addTouchSpecificHandlers();
UI.addExtraKeysHandlers();
UI.addMachineHandlers();
UI.addConnectionControlHandlers();
UI.addClipboardHandlers();
UI.addSettingsHandlers();
document.getElementById("noVNC_status")
.addEventListener('click', UI.hideStatus);
// Bootstrap fallback input handler
UI.keyboardinputReset();
UI.openControlbar();
UI.updateVisualState('init');
document.documentElement.classList.remove("noVNC_loading");
let autoconnect = WebUtil.getConfigVar('autoconnect', false);
if (autoconnect === 'true' || autoconnect == '1') {
autoconnect = true;
UI.connect();
} else {
autoconnect = false;
// Show the connect panel on first load unless autoconnecting
UI.openConnectPanel();
}
return Promise.resolve(UI.rfb);
},
UI.initSettings()
设置全局的setting
日志级别,
htttp/https协议,
host,port,
图片质量,压缩参数,
是否只能查看,
重连,重连延时
...
initSettings() {
// Logging selection dropdown
const llevels = ['error', 'warn', 'info', 'debug'];
for (let i = 0; i < llevels.length; i += 1) {
UI.addOption(document.getElementById('noVNC_setting_logging'), llevels[i], llevels[i]);
}
// Settings with immediate effects
UI.initSetting('logging', 'warn');
UI.updateLogging();
// if port == 80 (or 443) then it won't be present and should be
// set manually
let port = window.location.port;
if (!port) {
if (window.location.protocol.substring(0, 5) == 'https') {
port = 443;
} else if (window.location.protocol.substring(0, 4) == 'http') {
port = 80;
}
}
/* Populate the controls if defaults are provided in the URL */
UI.initSetting('host', window.location.hostname);
UI.initSetting('port', port);
UI.initSetting('encrypt', (window.location.protocol === "https:"));
UI.initSetting('view_clip', false);
UI.initSetting('resize', 'off');
UI.initSetting('quality', 6);
UI.initSetting('compression', 2);
UI.initSetting('shared', true);
UI.initSetting('view_only', false);
UI.initSetting('show_dot', false);
UI.initSetting('path', 'websockify');
UI.initSetting('repeaterID', '');
UI.initSetting('reconnect', false);
UI.initSetting('reconnect_delay', 5000);
UI.setupSettingLabels();
},
UI.addConnectionControlHandlers()
远程协助连接和断开事件监听
addConnectionControlHandlers() {
document.getElementById("noVNC_disconnect_button")
.addEventListener('click', UI.disconnect);
document.getElementById("noVNC_connect_button")
.addEventListener('click', UI.connect);
document.getElementById("noVNC_cancel_reconnect_button")
.addEventListener('click', UI.cancelReconnect);
document.getElementById("noVNC_approve_server_button")
.addEventListener('click', UI.approveServer);
document.getElementById("noVNC_reject_server_button")
.addEventListener('click', UI.rejectServer);
document.getElementById("noVNC_credentials_button")
.addEventListener('click', UI.setCredentials);
},
UI.connect()
根据host,port等建立连接,连接使用RFB协议
new RFB(target, urlOrChannel, options)
connect(event, password) {
// Ignore when rfb already exists
if (typeof UI.rfb !== 'undefined') {
return;
}
const host = UI.getSetting('host');
const port = UI.getSetting('port');
const path = UI.getSetting('path');
if (typeof password === 'undefined') {
password = WebUtil.getConfigVar('password');
UI.reconnectPassword = password;
}
if (password === null) {
password = undefined;
}
UI.hideStatus();
if (!host) {
Log.Error("Can't connect when host is: " + host);
UI.showStatus(_("Must set host"), 'error');
return;
}
UI.closeConnectPanel();
UI.updateVisualState('connecting');
let url;
url = UI.getSetting('encrypt') ? 'wss' : 'ws';
url += '://' + host;
if (port) {
url += ':' + port;
}
url += '/' + path;
UI.rfb = new RFB(document.getElementById('noVNC_container'), url,
{ shared: UI.getSetting('shared'),
repeaterID: UI.getSetting('repeaterID'),
credentials: { password: password } });
UI.rfb.addEventListener("connect", UI.connectFinished);
UI.rfb.addEventListener("disconnect", UI.disconnectFinished);
UI.rfb.addEventListener("serververification", UI.serverVerify);
UI.rfb.addEventListener("credentialsrequired", UI.credentials);
UI.rfb.addEventListener("securityfailure", UI.securityFailed);
UI.rfb.addEventListener("clippingviewport", UI.updateViewDrag);
UI.rfb.addEventListener("capabilities", UI.updatePowerButton);
UI.rfb.addEventListener("clipboard", UI.clipboardReceive);
UI.rfb.addEventListener("bell", UI.bell);
UI.rfb.addEventListener("desktopname", UI.updateDesktopName);
UI.rfb.clipViewport = UI.getSetting('view_clip');
UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
UI.rfb.showDotCursor = UI.getSetting('show_dot');
UI.updateViewOnly(); // requires UI.rfb
},
rfb.js
new RFB(target, urlOrChannel, options)
初始化rfb,
设置_eventHandlers，绑定鼠标，重绘事件...，
创建canvas元素用于绘制远程图像,
设置_decoders，
设置鼠标事件
new Websock并绑定websocket的open，close，message，error事件
_updateConnectionState('connecting')请求websockify建立连接
export default class RFB extends EventTargetMixin {
constructor(target, urlOrChannel, options) {
if (!target) {
throw new Error("Must specify target");
}
if (!urlOrChannel) {
throw new Error("Must specify URL, WebSocket or RTCDataChannel");
}
// We rely on modern APIs which might not be available in an
// insecure context
if (!window.isSecureContext) {
Log.Error("noVNC requires a secure context (TLS). Expect crashes!");
}
super();
this._target = target;
if (typeof urlOrChannel === "string") {
this._url = urlOrChannel;
} else {
this._url = null;
this._rawChannel = urlOrChannel;
}
// Connection details
options = options || {};
this._rfbCredentials = options.credentials || {};
this._shared = 'shared' in options ? !!options.shared : true;
this._repeaterID = options.repeaterID || '';
this._wsProtocols = options.wsProtocols || [];
// Internal state
this._rfbConnectionState = '';
this._rfbInitState = '';
this._rfbAuthScheme = -1;
this._rfbCleanDisconnect = true;
this._rfbRSAAESAuthenticationState = null;
// Server capabilities
this._rfbVersion = 0;
this._rfbMaxVersion = 3.8;
this._rfbTightVNC = false;
this._rfbVeNCryptState = 0;
this._rfbXvpVer = 0;
this._fbWidth = 0;
this._fbHeight = 0;
this._fbName = "";
this._capabilities = { power: false };
this._supportsFence = false;
this._supportsContinuousUpdates = false;
this._enabledContinuousUpdates = false;
this._supportsSetDesktopSize = false;
this._screenID = 0;
this._screenFlags = 0;
this._qemuExtKeyEventSupported = false;
this._clipboardText = null;
this._clipboardServerCapabilitiesActions = {};
this._clipboardServerCapabilitiesFormats = {};
// 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._gestures = null; // Gesture input handler object
this._resizeObserver = null; // Resize observer object
// Timers
this._disconnTimer = null; // disconnection timer
this._resizeTimeout = null; // resize rate limiting
this._mouseMoveTimer = null;
// Decoder states
this._decoders = {};
this._FBU = {
rects: 0,
x: 0,
y: 0,
width: 0,
height: 0,
encoding: null,
};
// Mouse state
this._mousePos = {};
this._mouseButtonMask = 0;
this._mouseLastMoveTime = 0;
this._viewportDragging = false;
this._viewportDragPos = {};
this._viewportHasMoved = false;
this._accumulatedWheelDeltaX = 0;
this._accumulatedWheelDeltaY = 0;
// Gesture state
this._gestureLastTapTime = null;
this._gestureFirstDoubleTapEv = null;
this._gestureLastMagnitudeX = 0;
this._gestureLastMagnitudeY = 0;
// Bound event handlers
this._eventHandlers = {
focusCanvas: this._focusCanvas.bind(this),
handleResize: this._handleResize.bind(this),
handleMouse: this._handleMouse.bind(this),
handleWheel: this._handleWheel.bind(this),
handleGesture: this._handleGesture.bind(this),
handleRSAAESCredentialsRequired: this._handleRSAAESCredentialsRequired.bind(this),
handleRSAAESServerVerification: this._handleRSAAESServerVerification.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.background = DEFAULT_BACKGROUND;
this._canvas = document.createElement('canvas');
this._canvas.style.margin = 'auto';
// Some browsers add an outline on focus
this._canvas.style.outline = 'none';
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 decoder array with objects
this._decoders[encodings.encodingRaw] = new RawDecoder();
this._decoders[encodings.encodingCopyRect] = new CopyRectDecoder();
this._decoders[encodings.encodingRRE] = new RREDecoder();
this._decoders[encodings.encodingHextile] = new HextileDecoder();
this._decoders[encodings.encodingTight] = new TightDecoder();
this._decoders[encodings.encodingTightPNG] = new TightPNGDecoder();
this._decoders[encodings.encodingZRLE] = new ZRLEDecoder();
this._decoders[encodings.encodingJPEG] = new JPEGDecoder();
// 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._keyboard = new Keyboard(this._canvas);
this._keyboard.onkeyevent = this._handleKeyEvent.bind(this);
this._gestures = new GestureHandler();
this._sock = new Websock();
this._sock.on('open', this._socketOpen.bind(this));
this._sock.on('close', this._socketClose.bind(this));
this._sock.on('message', this._handleMessage.bind(this));
this._sock.on('error', this._socketError.bind(this));
this._expectedClientWidth = null;
this._expectedClientHeight = null;
this._resizeObserver = new ResizeObserver(this._eventHandlers.handleResize);
// All prepared, kick off the connection
this._updateConnectionState('connecting');
Log.Debug("<< RFB.constructor");
// ===== PROPERTIES =====
this.dragViewport = false;
this.focusOnClick = true;
this._viewOnly = false;
this._clipViewport = false;
this._clippingViewport = false;
this._scaleViewport = false;
this._resizeSession = false;
this._showDotCursor = false;
if (options.showDotCursor !== undefined) {
Log.Warn("Specifying showDotCursor as a RFB constructor argument is deprecated");
this._showDotCursor = options.showDotCursor;
}
this._qualityLevel = 6;
this._compressionLevel = 2;
}
...
}
_handleMessage()
处理connecting，connected，disconnected事件及message数据
_handleMessage() {
if (this._sock.rQlen === 0) {
Log.Warn("handleMessage called on an empty receive queue");
return;
}
switch (this._rfbConnectionState) {
case 'disconnected':
Log.Error("Got data while disconnected");
break;
case 'connected':
while (true) {
if (this._flushing) {
break;
}
if (!this._normalMsg()) {
break;
}
if (this._sock.rQlen === 0) {
break;
}
}
break;
case 'connecting':
while (this._rfbConnectionState === 'connecting') {
if (!this._initMsg()) {
break;
}
}
break;
default:
Log.Error("Got data while in an invalid state");
break;
}
}
_updateConnectionState(state)
Connection states:
connecting
connected
disconnecting
disconnected - permanent state
/*
* Connection states:
* connecting
* connected
* disconnecting
* disconnected - permanent state
*/
_updateConnectionState(state) {
const oldstate = this._rfbConnectionState;
if (state === oldstate) {
Log.Debug("Already in state '" + state + "', ignoring");
return;
}
// The 'disconnected' state is permanent for each RFB object
if (oldstate === 'disconnected') {
Log.Error("Tried changing state of a disconnected RFB object");
return;
}
// Ensure proper transitions before doing anything
switch (state) {
case 'connected':
if (oldstate !== 'connecting') {
Log.Error("Bad transition to connected state, " +
"previous connection state: " + oldstate);
return;
}
break;
case 'disconnected':
if (oldstate !== 'disconnecting') {
Log.Error("Bad transition to disconnected state, " +
"previous connection state: " + oldstate);
return;
}
break;
case 'connecting':
if (oldstate !== '') {
Log.Error("Bad transition to connecting state, " +
"previous connection state: " + oldstate);
return;
}
break;
case 'disconnecting':
if (oldstate !== 'connected' && oldstate !== 'connecting') {
Log.Error("Bad transition to disconnecting state, " +
"previous connection state: " + oldstate);
return;
}
break;
default:
Log.Error("Unknown connection state: " + state);
return;
}
// State change actions
this._rfbConnectionState = state;
Log.Debug("New state '" + state + "', was '" + oldstate + "'.");
if (this._disconnTimer && state !== 'disconnecting') {
Log.Debug("Clearing disconnect timer");
clearTimeout(this._disconnTimer);
this._disconnTimer = null;
// make sure we don't get a double event
this._sock.off('close');
}
switch (state) {
case 'connecting':
this._connect();
break;
case 'connected':
this.dispatchEvent(new CustomEvent("connect", { detail: {} }));
break;
case 'disconnecting':
this._disconnect();
this._disconnTimer = setTimeout(() => {
Log.Error("Disconnection timed out.");
this._updateConnectionState('disconnected');
}, DISCONNECT_TIMEOUT * 1000);
break;
case 'disconnected':
this.dispatchEvent(new CustomEvent(
"disconnect", { detail:
{ clean: this._rfbCleanDisconnect } }));
break;
}
}
_connect()
_connect() {
Log.Debug(">> RFB.connect");
if (this._url) {
Log.Info(`connecting to ${this._url}`);
this._sock.open(this._url, this._wsProtocols);
} else {
Log.Info(`attaching ${this._rawChannel} to Websock`);
this._sock.attach(this._rawChannel);
if (this._sock.readyState === 'closed') {
throw Error("Cannot use already closed WebSocket/RTCDataChannel");
}
if (this._sock.readyState === 'open') {
// FIXME: _socketOpen() can in theory call _fail(), which
// isn't allowed this early, but I'm not sure that can
// happen without a bug messing up our state variables
this._socketOpen();
}
}
// Make our elements part of the page
this._target.appendChild(this._screen);
this._gestures.attach(this._canvas);
this._cursor.attach(this._canvas);
this._refreshCursor();
// Monitor size changes of the screen element
this._resizeObserver.observe(this._screen);
// Always grab focus on some kind of click event
this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas);
this._canvas.addEventListener("touchstart", this._eventHandlers.focusCanvas);
// Mouse events
this._canvas.addEventListener('mousedown', this._eventHandlers.handleMouse);
this._canvas.addEventListener('mouseup', this._eventHandlers.handleMouse);
this._canvas.addEventListener('mousemove', this._eventHandlers.handleMouse);
// Prevent middle-click pasting (see handler for why we bind to document)
this._canvas.addEventListener('click', this._eventHandlers.handleMouse);
// preventDefault() on mousedown doesn't stop this event for some
// reason so we have to explicitly block it
this._canvas.addEventListener('contextmenu', this._eventHandlers.handleMouse);
// Wheel events
this._canvas.addEventListener("wheel", this._eventHandlers.handleWheel);
// Gesture events
this._canvas.addEventListener("gesturestart", this._eventHandlers.handleGesture);
this._canvas.addEventListener("gesturemove", this._eventHandlers.handleGesture);
this._canvas.addEventListener("gestureend", this._eventHandlers.handleGesture);
Log.Debug("<< RFB.connect");
}
websock.js
websocket连接建立,
数据encode和decode
send(arr) {
this._sQ.set(arr, this._sQlen);
this._sQlen += arr.length;
this.flush();
}
_encodeMessage() {
// Put in a binary arraybuffer
// according to the spec, you can send ArrayBufferViews with the send method
return new Uint8Array(this._sQ.buffer, 0, this._sQlen);
}
_DecodeMessage(data) {
const u8 = new Uint8Array(data);
if (u8.length > this._rQbufferSize - this._rQlen) {
this._expandCompactRQ(u8.length);
}
this._rQ.set(u8, this._rQlen);
this._rQlen += u8.length;
}
_recvMessage(e) {
this._DecodeMessage(e.data);
if (this.rQlen > 0) {
this._eventHandlers.message();
if (this._rQlen == this._rQi) {
// All data has now been processed, this means we
// can reset the receive queue.
this._rQlen = 0;
this._rQi = 0;
}
} else {
Log.Debug("Ignoring empty message");
}
}
_normalMsg() {
let msgType;
if (this._FBU.rects > 0) {
msgType = 0;
} else {
msgType = this._sock.rQshift8();
}
let first, ret;
switch (msgType) {
case 0: // FramebufferUpdate
ret = this._framebufferUpdate();
if (ret && !this._enabledContinuousUpdates) {
RFB.messages.fbUpdateRequest(this._sock, true, 0, 0,
this._fbWidth, this._fbHeight);
}
return ret;
case 1: // SetColorMapEntries
return this._handleSetColourMapMsg();
case 2: // Bell
Log.Debug("Bell");
this.dispatchEvent(new CustomEvent(
"bell",
{ detail: {} }));
return true;
case 3: // ServerCutText
return this._handleServerCutText();
case 150: // EndOfContinuousUpdates
first = !this._supportsContinuousUpdates;
this._supportsContinuousUpdates = true;
this._enabledContinuousUpdates = false;
if (first) {
this._enabledContinuousUpdates = true;
this._updateContinuousUpdates();
Log.Info("Enabling continuous updates.");
} else {
// FIXME: We need to send a framebufferupdaterequest here
// if we add support for turning off continuous updates
}
return true;
case 248: // ServerFence
return this._handleServerFenceMsg();
case 250: // XVP
return this._handleXvpMsg();
default:
this._fail("Unexpected server message (type " + msgType + ")");
Log.Debug("sock.rQslice(0, 30): " + this._sock.rQslice(0, 30));
return true;
}
}
远程协助连接建立过程
1、new RFB(target, urlOrChannel, options)中发起连接
this._updateConnectionState('connecting');
2、_updateConnectionState根据connecting状态发起链接
switch (state) {
case 'connecting':
this._connect();
break;
...
}
3、_connect
connect() {
Log.Debug(">> RFB.connect");
if (this._url) {
Log.Info(`connecting to ${this._url}`);
this._sock.open(this._url, this._wsProtocols);
} else {
Log.Info(`attaching ${this._rawChannel} to Websock`);
this._sock.attach(this._rawChannel);
...
}
...
}
4、_socketOpen设置_rfbInitState为ProtocolVersion，等待服务器信息
_socketOpen() {
if ((this._rfbConnectionState === 'connecting') &&
(this._rfbInitState === '')) {
this._rfbInitState = 'ProtocolVersion';
Log.Debug("Starting VNC handshake");
} else {
this._fail("Unexpected server connection while " +
this._rfbConnectionState);
}
}
5、接受远程信息
00000000: 5246 4220 3030 332e 3030 380a RFB 003.008.
6、通过rfb.js中_handleMessage处理返回数据
_recvMessage(e) {
this._DecodeMessage(e.data);
if (this.rQlen > 0) {
this._eventHandlers.message();
if (this._rQlen == this._rQi) {
// All data has now been processed, this means we
// can reset the receive queue.
this._rQlen = 0;
this._rQi = 0;
}
} else {
Log.Debug("Ignoring empty message");
}
}
_handleMessage() {
if (this._sock.rQlen === 0) {
Log.Warn("handleMessage called on an empty receive queue");
return;
}
debugger
switch (this._rfbConnectionState) {
case 'disconnected':
Log.Error("Got data while disconnected");
break;
case 'connected':
while (true) {
if (this._flushing) {
break;
}
if (!this._normalMsg()) {
break;
}
if (this._sock.rQlen === 0) {
break;
}
}
break;
case 'connecting':
while (this._rfbConnectionState === 'connecting') {
if (!this._initMsg()) {
break;
}
}
break;
default:
Log.Error("Got data while in an invalid state");
break;
}
}
7、_initMsg根据this._rfbInitState转换到对应处理
/* RFB protocol initialization states:
* ProtocolVersion
* Security
* Authentication
* SecurityResult
* ClientInitialization - not triggered by server message
* ServerInitialization
*/
_initMsg() {
switch (this._rfbInitState) {
case 'ProtocolVersion':
return this._negotiateProtocolVersion();
case 'Security':
return this._negotiateSecurity();
case 'Authentication':
return this._negotiateAuthentication();
case 'SecurityResult':
return this._handleSecurityResult();
case 'SecurityReason':
return this._handleSecurityReason();
case 'ClientInitialisation':
this._sock.send([this._shared ? 1 : 0]); // ClientInitialisation
this._rfbInitState = 'ServerInitialisation';
return true;
case 'ServerInitialisation':
return this._negotiateServerInit();
default:
return this._fail("Unknown init state (state: " +
this._rfbInitState + ")");
}
}
8、_negotiateProtocolVersion发送web端支持的协议，并且将_rfbInitState设置为Security
version未匹配时抛出Invalid server version，结束连接
00000000: 5246 4220 3030 332e 3030 380a RFB 003.008.
_negotiateProtocolVersion() {
if (this._sock.rQwait("version", 12)) {
return false;
}
const sversion = this._sock.rQshiftStr(12).substr(4, 7);
Log.Info("Server ProtocolVersion: " + sversion);
let isRepeater = 0;
switch (sversion) {
case "000.000": // UltraVNC repeater
isRepeater = 1;
break;
case "003.003":
case "003.006": // UltraVNC
this._rfbVersion = 3.3;
break;
case "003.007":
this._rfbVersion = 3.7;
break;
case "003.008":
case "003.889": // Apple Remote Desktop
case "004.000": // Intel AMT KVM
case "004.001": // RealVNC 4.6
case "005.000": // RealVNC 5.3
this._rfbVersion = 3.8;
break;
default:
return this._fail("Invalid server version " + sversion);
}
if (isRepeater) {
let repeaterID = "ID:" + this._repeaterID;
while (repeaterID.length < 250) {
repeaterID += "\0";
}
this._sock.sendString(repeaterID);
return true;
}
if (this._rfbVersion > this._rfbMaxVersion) {
this._rfbVersion = this._rfbMaxVersion;
}
const cversion = "00" + parseInt(this._rfbVersion, 10) +
".00" + ((this._rfbVersion * 10) % 10);
this._sock.sendString("RFB " + cversion + "\n");
Log.Debug('Sent ProtocolVersion: ' + cversion);
this._rfbInitState = 'Security';
}
9、接收Security信息
00000000: 0202 10 ...
10、重复步骤6，步骤7
11、_negotiateSecurity()判断是否支持服务器发送的security方式
1)、支持：给服务器发送对应security信息，并更新_rfbInitState为Authentication
2）、不支持：并更新_rfbInitState为SecurityReason，显示失败原因并断开连接，过程结束
_rfbVersion小于3.7：
_negotiateSecurity() {
if (this._rfbVersion >= 3.7) {
// Server sends supported list, client decides
const numTypes = this._sock.rQshift8();
if (this._sock.rQwait("security type", numTypes, 1)) { return false; }
if (numTypes === 0) {
this._rfbInitState = "SecurityReason";
this._securityContext = "no security types";
this._securityStatus = 1;
return true;
}
const types = this._sock.rQshiftBytes(numTypes);
Log.Debug("Server security types: " + types);
// Look for a matching security type in the order that the
// server prefers
this._rfbAuthScheme = -1;
for (let type of types) {
if (this._isSupportedSecurityType(type)) {
this._rfbAuthScheme = type;
break;
}
}
if (this._rfbAuthScheme === -1) {
return this._fail("Unsupported security types (types: " + types + ")");
}
this._sock.send([this._rfbAuthScheme]);
} else {
// Server decides
if (this._sock.rQwait("security scheme", 4)) { return false; }
this._rfbAuthScheme = this._sock.rQshift32();
if (this._rfbAuthScheme == 0) {
this._rfbInitState = "SecurityReason";
this._securityContext = "authentication scheme";
this._securityStatus = 1;
return true;
}
}
this._rfbInitState = 'Authentication';
Log.Debug('Authenticating using scheme: ' + this._rfbAuthScheme);
return true;
}
12、发送web支持的security信息
根据步骤9，web给服务器发送不通的security信息
需要认证时发送02，并进入步骤13
00000000: 02 .
不需要认证时发送01，并进入步骤15
00000000: 01 .
13、接收服务器信息
00000000: fcd1 f317 be81 444b f79b dff5 c029 bffd ......DK.....)..
14、重复步骤6，步骤7
15、_negotiateAuthentication控制认证展示
根据步骤12，步骤13的信息，匹配对应认证逻辑
例如：
_rfbAuthScheme == 01 == securityTypeNone 不进行认证，直接跳到步骤19
_rfbAuthScheme == 02 == securityTypeVNCAuth
，进入_negotiateStdVNCAuth()流程，调度"credentialsrequired"事件，进入UI.credentials方法来显示密码输入：document.getElementById('noVNC_credentials_dlg').classList.add('noVNC_open');
_negotiateAuthentication() {
switch (this._rfbAuthScheme) {
case securityTypeNone:
this._rfbInitState = 'SecurityResult';
return true;
case securityTypeXVP:
return this._negotiateXvpAuth();
case securityTypeARD:
return this._negotiateARDAuth();
case securityTypeVNCAuth:
return this._negotiateStdVNCAuth();
case securityTypeTight:
return this._negotiateTightAuth();
case securityTypeVeNCrypt:
return this._negotiateVeNCryptAuth();
case securityTypePlain:
return this._negotiatePlainAuth();
case securityTypeUnixLogon:
return this._negotiateTightUnixAuth();
case securityTypeRA2ne:
return this._negotiateRA2neAuth();
case securityTypeMSLogonII:
return this._negotiateMSLogonIIAuth();
default:
return this._fail("Unsupported auth scheme (scheme: " +
this._rfbAuthScheme + ")");
}
}
_negotiateStdVNCAuth() {
if (this._sock.rQwait("auth challenge", 16)) { return false; }
if (this._rfbCredentials.password === undefined) {
this.dispatchEvent(new CustomEvent(
"credentialsrequired",
{ detail: { types: ["password"] } }));
return false;
}
// TODO(directxman12): make genDES not require an Array
const challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16));
const response = RFB.genDES(this._rfbCredentials.password, challenge);
this._sock.send(response);
this._rfbInitState = "SecurityResult";
return true;
}
credentials(e) {
// FIXME: handle more types
document.getElementById("noVNC_username_block").classList.remove("noVNC_hidden");
document.getElementById("noVNC_password_block").classList.remove("noVNC_hidden");
let inputFocus = "none";
if (e.detail.types.indexOf("username") === -1) {
document.getElementById("noVNC_username_block").classList.add("noVNC_hidden");
} else {
inputFocus = inputFocus === "none" ? "noVNC_username_input" : inputFocus;
}
if (e.detail.types.indexOf("password") === -1) {
document.getElementById("noVNC_password_block").classList.add("noVNC_hidden");
} else {
inputFocus = inputFocus === "none" ? "noVNC_password_input" : inputFocus;
}
document.getElementById('noVNC_credentials_dlg')
.classList.add('noVNC_open');
setTimeout(() => document
.getElementById(inputFocus).focus(), 100);
Log.Warn("Server asked for credentials");
UI.showStatus(_("Credentials are required"), "warning");
},
16、发送远程客户端密码
输入被远程协助客户端配置的密码，并将_rfbInitState设置为SecurityResult
_negotiateStdVNCAuth() {
if (this._sock.rQwait("auth challenge", 16)) { return false; }
if (this._rfbCredentials.password === undefined) {
this.dispatchEvent(new CustomEvent(
"credentialsrequired",
{ detail: { types: ["password"] } }));
return false;
}
// TODO(directxman12): make genDES not require an Array
const challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16));
const response = RFB.genDES(this._rfbCredentials.password, challenge);
this._sock.send(response);
this._rfbInitState = "SecurityResult";
return true;
}
17、接收客户端信息
00000000: 0000 0000 ....
18、重复步骤6，步骤7
19、_handleSecurityResult处理认证
确认已接收的服务器信息，认证结果通过，将_rfbInitState设置为ClientInitialisation
_handleSecurityResult() {
// There is no security choice, and hence no security result
// until RFB 3.7
if (this._rfbVersion < 3.7) {
this._rfbInitState = 'ClientInitialisation';
return true;
}
if (this._sock.rQwait('VNC auth response ', 4)) { return false; }
const status = this._sock.rQshift32();
if (status === 0) { // OK
this._rfbInitState = 'ClientInitialisation';
Log.Debug('Authentication OK');
return true;
} else {
if (this._rfbVersion >= 3.8) {
this._rfbInitState = "SecurityReason";
this._securityContext = "security result";
this._securityStatus = status;
return true;
} else {
this.dispatchEvent(new CustomEvent(
"securityfailure",
{ detail: { status: status } }));
return this._fail("Security handshake failed");
}
}
}
20、重复步骤7，进入ClientInitialisation
21、ClientInitialisation发送远程模式
00000000: 01 .
this._sock.send([this._shared ? 1 : 0]);发送远程模式，并将_rfbInitState状态设置为ServerInitialisation
_initMsg() {
switch (this._rfbInitState) {
case 'ProtocolVersion':
return this._negotiateProtocolVersion();
case 'Security':
return this._negotiateSecurity();
case 'Authentication':
return this._negotiateAuthentication();
case 'SecurityResult':
return this._handleSecurityResult();
case 'SecurityReason':
return this._handleSecurityReason();
case 'ClientInitialisation':
this._sock.send([this._shared ? 1 : 0]); // ClientInitialisation
this._rfbInitState = 'ServerInitialisation';
return true;
case 'ServerInitialisation':
return this._negotiateServerInit();
default:
return this._fail("Unknown init state (state: " +
this._rfbInitState + ")");
}
}
22、重复步骤7，进入ServerInitialisation
21、_negotiateServerInit()判断连接是否完成
读取缓存的服务器返回值，判断是否连接完成
连接未完成：等待服务器返回信息
连接已完成：设置server属性，并且将连接状态设置为connected，
_negotiateServerInit() {
if (this._sock.rQwait("server initialization", 24)) { return false; }
/* Screen size */
const width = this._sock.rQshift16();
const height = this._sock.rQshift16();
/* PIXEL_FORMAT */
const bpp = this._sock.rQshift8();
const depth = this._sock.rQshift8();
const bigEndian = this._sock.rQshift8();
const trueColor = this._sock.rQshift8();
const redMax = this._sock.rQshift16();
const greenMax = this._sock.rQshift16();
const blueMax = this._sock.rQshift16();
const redShift = this._sock.rQshift8();
const greenShift = this._sock.rQshift8();
const blueShift = 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 */
const nameLength = this._sock.rQshift32();
if (this._sock.rQwait('server init name', nameLength, 24)) { return false; }
let name = this._sock.rQshiftStr(nameLength);
name = decodeUTF8(name, true);
if (this._rfbTightVNC) {
if (this._sock.rQwait('TightVNC extended server init header', 8, 24 + nameLength)) { return false; }
// In TightVNC mode, ServerInit message is extended
const numServerMessages = this._sock.rQshift16();
const numClientMessages = this._sock.rQshift16();
const numEncodings = this._sock.rQshift16();
this._sock.rQskipBytes(2); // padding
const totalMessagesLength = (numServerMessages + numClientMessages + numEncodings) * 16;
if (this._sock.rQwait('TightVNC extended server init header', totalMessagesLength, 32 + nameLength)) { return false; }
// we don't actually do anything with the capability information that TIGHT sends,
// so we just skip the all of this.
// TIGHT server message capabilities
this._sock.rQskipBytes(16 * numServerMessages);
// TIGHT client message capabilities
this._sock.rQskipBytes(16 * numClientMessages);
// TIGHT encoding capabilities
this._sock.rQskipBytes(16 * numEncodings);
}
// NB(directxman12): these are down here so that we don't run them multiple times
// if we backtrack
Log.Info("Screen: " + width + "x" + height +
", bpp: " + bpp + ", depth: " + depth +
", bigEndian: " + bigEndian +
", trueColor: " + trueColor +
", redMax: " + redMax +
", greenMax: " + greenMax +
", blueMax: " + blueMax +
", redShift: " + redShift +
", greenShift: " + greenShift +
", blueShift: " + blueShift);
// we're past the point where we could backtrack, so it's safe to call this
this._setDesktopName(name);
this._resize(width, height);
if (!this._viewOnly) { this._keyboard.grab(); }
this._fbDepth = 24;
if (this._fbName === "Intel(r) AMT KVM") {
Log.Warn("Intel AMT KVM only supports 8/16 bit depths. Using low color mode.");
this._fbDepth = 8;
}
RFB.messages.pixelFormat(this._sock, this._fbDepth, true);
this._sendEncodings();
RFB.messages.fbUpdateRequest(this._sock, false, 0, 0, this._fbWidth, this._fbHeight);
this._updateConnectionState('connected');
return true;
}
22、接收服务器信息
接收信息，继续_negotiateServerInit()
00000000: 0320 0258 2018 0001 00ff 00ff 00ff 1008 . .X ...........
00000001: 0000 0000 0000 000b 7869 616f 3230 3232 ........xiao2022
00000002: 2d70 63 -pc
23、发送像素格式，encoding数组，桌面更新
继续_negotiateServerInit，
...
RFB.messages.pixelFormat(this._sock, this._fbDepth, true);
this._sendEncodings();
RFB.messages.fbUpdateRequest(this._sock, false, 0, 0, this._fbWidth, this._fbHeight);
...
发送像素格式
RFB.messages.pixelFormat(this._sock, this._fbDepth, true);
00000000: 0000 0000 2018 0001 00ff 00ff 00ff 0008 .... ...........
00000001: 1000 0000 ....
发送VNC encodings数组: raw, copyrect, rre, hextile, tight, tightPNG...
00000000: 0200 0015 0000 0001 0000 0007 ffff fefc ................
00000001: 0000 0010 0000 0015 0000 0005 0000 0002 ................
00000002: 0000 0000 ffff ffe6 ffff ff02 ffff ff21 ...............!
00000003: ffff ff20 ffff fefe ffff fecc ffff fecb ... ............
00000004: ffff fec8 ffff fec7 ffff fecd c0a1 e5ce ................
00000005: 574d 5664 ffff ff11 WMVd....
发送桌面更新RFB.messages.fbUpdateRequest(this._sock, false, 0, 0, this._fbWidth, this._fbHeight);
00000000: 0300 0000 0000 0320 0258 ....... .X
24、连接状态设置为connected
继续_negotiateServerInit
连接完成，设置server属性，并且将连接状态设置为connected
...
this._updateConnectionState('connected');
...
缓存和事件处理
默认缓存设置
接收消息队列默认缓存大小为4M，
接收消息队列最大缓存大小为40M
发送消息队列默认缓存大小为10K
// this has performance issues in some versions Chromium, and
// doesn't gain a tremendous amount of performance increase in Firefox
// at the moment. It may be valuable to turn it on in the future.
const MAX_RQ_GROW_SIZE = 40 * 1024 * 1024; // 40 MiB
export default class Websock {
constructor() {
this._websocket = null; // WebSocket or RTCDataChannel object
this._rQi = 0; // Receive queue index
this._rQlen = 0; // Next write position in the receive queue
this._rQbufferSize = 1024 * 1024 * 4; // Receive queue buffer size (4 MiB)
// called in init: this._rQ = new Uint8Array(this._rQbufferSize);
this._rQ = null; // Receive queue
this._sQbufferSize = 1024 * 10; // 10 KiB
// called in init: this._sQ = new Uint8Array(this._sQbufferSize);
this._sQlen = 0;
this._sQ = null; // Send queue
this._eventHandlers = {
message: () => {},
open: () => {},
close: () => {},
error: () => {}
};
}
...
}
接收消息缓存
_recvMessage(e)接收消息，进行_DecodeMessage(e.data);消息解码，消息长度大于可用缓存时使用_expandCompactRQ(u8.length)判断是否压缩及扩容，如果需要的缓存不到缓存区不到1/8，不进行扩容，将上一次的消息移动到_rQ队列头部，将新的消息加入队列。如果大于1/8将缓存区大小加倍，并保证至少有当前数据量8倍的缓存空间，最大缓存不能超过40M，超过40M时抛出错误，停止对这一次消息的处理，等待下一次的消息。
_recvMessage(e) {
// debugger
this._DecodeMessage(e.data);
if (this.rQlen > 0) {
this._eventHandlers.message();
if (this._rQlen == this._rQi) {
// All data has now been processed, this means we
// can reset the receive queue.
this._rQlen = 0;
this._rQi = 0;
}
} else {
Log.Debug("Ignoring empty message");
}
}
// push arraybuffer values onto the end of the receive que
_DecodeMessage(data) {
const u8 = new Uint8Array(data);
if (u8.length > this._rQbufferSize - this._rQlen) {
this._expandCompactRQ(u8.length);
}
this._rQ.set(u8, this._rQlen);
this._rQlen += u8.length;
}
// We want to move all the unread data to the start of the queue,
// e.g. compacting.
// The function also expands the receive que if needed, and for
// performance reasons we combine these two actions to avoid
// unnecessary copying.
_expandCompactRQ(minFit) {
// if we're using less than 1/8th of the buffer even with the incoming bytes, compact in place
// instead of resizing
const requiredBufferSize = (this._rQlen - this._rQi + minFit) * 8;
const resizeNeeded = this._rQbufferSize < requiredBufferSize;
if (resizeNeeded) {
// Make sure we always *at least* double the buffer size, and have at least space for 8x
// the current amount of data
this._rQbufferSize = Math.max(this._rQbufferSize * 2, requiredBufferSize);
}
// we don't want to grow unboundedly
if (this._rQbufferSize > MAX_RQ_GROW_SIZE) {
this._rQbufferSize = MAX_RQ_GROW_SIZE;
if (this._rQbufferSize - this.rQlen < minFit) {
throw new Error("Receive Queue buffer exceeded " + MAX_RQ_GROW_SIZE + " bytes, and the new message could not fit");
}
}
if (resizeNeeded) {
const oldRQbuffer = this._rQ.buffer;
this._rQ = new Uint8Array(this._rQbufferSize);
this._rQ.set(new Uint8Array(oldRQbuffer, this._rQi, this._rQlen - this._rQi));
} else {
this._rQ.copyWithin(0, this._rQi, this._rQlen);
}
this._rQlen = this._rQlen - this._rQi;
this._rQi = 0;
}
远程协助连接中图像事件处理
_normalMsg
connected状态下，接收远程二进制数据，将数据处理为图像
用_framebufferUpdate举例
_normalMsg() {
let msgType;
if (this._FBU.rects > 0) {
msgType = 0;
} else {
msgType = this._sock.rQshift8();
}
let first, ret;
switch (msgType) {
case 0: // FramebufferUpdate
ret = this._framebufferUpdate();
if (ret && !this._enabledContinuousUpdates) {
RFB.messages.fbUpdateRequest(this._sock, true, 0, 0,
this._fbWidth, this._fbHeight);
}
return ret;
case 1: // SetColorMapEntries
return this._handleSetColourMapMsg();
case 2: // Bell
Log.Debug("Bell");
this.dispatchEvent(new CustomEvent(
"bell",
{ detail: {} }));
return true;
case 3: // ServerCutText
return this._handleServerCutText();
case 150: // EndOfContinuousUpdates
first = !this._supportsContinuousUpdates;
this._supportsContinuousUpdates = true;
this._enabledContinuousUpdates = false;
if (first) {
this._enabledContinuousUpdates = true;
this._updateContinuousUpdates();
Log.Info("Enabling continuous updates.");
} else {
// FIXME: We need to send a framebufferupdaterequest here
// if we add support for turning off continuous updates
}
return true;
case 248: // ServerFence
return this._handleServerFenceMsg();
case 250: // XVP
return this._handleXvpMsg();
default:
this._fail("Unexpected server message (type " + msgType + ")");
Log.Debug("sock.rQslice(0, 30): " + this._sock.rQslice(0, 30));
return true;
}
}
_framebufferUpdate()
_framebufferUpdate() {
if (this._FBU.rects === 0) {
if (this._sock.rQwait("FBU header", 3, 1)) { return false; }
this._sock.rQskipBytes(1); // Padding
this._FBU.rects = this._sock.rQshift16();
// Make sure the previous frame is fully rendered first
// to avoid building up an excessive queue
if (this._display.pending()) {
this._flushing = true;
this._display.flush();
return false;
}
}
while (this._FBU.rects > 0) {
if (this._FBU.encoding === null) {
if (this._sock.rQwait("rect header", 12)) { return false; }
/* New FramebufferUpdate */
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.height = (hdr[6] << 8) + hdr[7];
this._FBU.encoding = parseInt((hdr[8] << 24) + (hdr[9] << 16) +
(hdr[10] << 8) + hdr[11], 10);
}
if (!this._handleRect()) {
return false;
}
this._FBU.rects--;
this._FBU.encoding = null;
}
this._display.flip();
return true; // We finished this FBU
}
_handleRect()
_handleRect() {
switch (this._FBU.encoding) {
case encodings.pseudoEncodingLastRect:
this._FBU.rects = 1; // Will be decreased when we return
return true;
case encodings.pseudoEncodingVMwareCursor:
return this._handleVMwareCursor();
case encodings.pseudoEncodingCursor:
return this._handleCursor();
case encodings.pseudoEncodingQEMUExtendedKeyEvent:
this._qemuExtKeyEventSupported = true;
return true;
case encodings.pseudoEncodingDesktopName:
return this._handleDesktopName();
case encodings.pseudoEncodingDesktopSize:
this._resize(this._FBU.width, this._FBU.height);
return true;
case encodings.pseudoEncodingExtendedDesktopSize:
return this._handleExtendedDesktopSize();
default:
return this._handleDataRect();
}
}
