Skip to content

N
noVNC
Commit 91308399 authored by Joel Martin's avatar Joel Martin
Browse files
Options

Direct example. Move all DOM code default_controls.js. 

Move DOM manipulation into include/default_controls.js and update
vnc.html to use it.

Add an example vnc_auto.html which automatically connects using
parameters from the query string and doesn't use default_controls.js.

Reorder functions in vnc.js to put external interface functions at the
top of the RFB namespace.
parent 325d9eb7
Show whitespace changes
Inline Side-by-side
Showing with 364 additions and 213 deletions
include/default_controls.js 0 → 100644
View file @ 91308399
DefaultControls = {
load: function(target) {
var url;
/* Handle state updates */
RFB.setUpdateState(DefaultControls.updateState);
RFB.setClipboardReceive(DefaultControls.clipReceive);
/* Populate the 'target' DOM element with default controls */
if (!target) { target = 'vnc'; }
html = "";
html += '<div id="VNC_controls">';
html += ' <ul>';
html += ' <li>Host: <input id="VNC_host"></li>';
html += ' <li>Port: <input id="VNC_port"></li>';
html += ' <li>Password: <input id="VNC_password"';
html += ' type="password"></li>';
html += ' <li>Encrypt: <input id="VNC_encrypt"';
html += ' type="checkbox"></li>';
html += ' <li>True Color: <input id="VNC_true_color"';
html += ' type="checkbox" checked></li>';
html += ' <li><input id="VNC_connect_button" type="button"';
html += ' value="Loading" disabled></li>';
html += ' </ul>';
html += '</div>';
html += '<div id="VNC_screen">';
html += ' <div id="VNC_status">Loading</div>';
html += ' <canvas id="VNC_canvas" width="640px" height="20px">';
html += ' Canvas not supported.';
html += ' </canvas>';
html += '</div>';
html += '<br><br>';
html += '<div id="VNC_clipboard">';
html += ' VNC Clipboard:';
html += ' <input id="VNC_clipboard_clear_button"';
html += ' type="button" value="Clear"';
html += ' onclick="DefaultControls.clipClear();">';
html += ' <br>';
html += ' <textarea id="VNC_clipboard_text" cols=80 rows=5';
html += ' onfocus="DefaultControls.clipFocus();"';
html += ' onblur="DefaultControls.clipBlur();"';
html += ' onchange="DefaultControls.clipSend();"></textarea>';
html += '</div>';
$(target).innerHTML = html;
/* Populate the controls if defaults are provided in the URL */
url = document.location.href;
$('VNC_host').value = (url.match(/host=([A-Za-z0-9.\-]*)/) ||
['',''])[1];
$('VNC_port').value = (url.match(/port=([0-9]*)/) ||
['',''])[1];
$('VNC_password').value = (url.match(/password=([^&#]*)/) ||
['',''])[1];
$('VNC_encrypt').checked = (url.match(/encrypt=([A-Za-z0-9]*)/) ||
['',''])[1];
},
updateState: function(state, msg) {
var s, c, klass;
s = $('VNC_status');
c = $('VNC_connect_button');
switch (state) {
case 'failed':
c.disabled = true;
klass = "VNC_status_error";
break;
case 'normal':
c.value = "Disconnect";
c.onclick = DefaultControls.disconnect;
c.disabled = false;
klass = "VNC_status_normal";
break;
case 'disconnected':
c.value = "Connect";
c.onclick = DefaultControls.connect;
c.disabled = false;
klass = "VNC_status_normal";
break;
default:
c.disabled = true;
klass = "VNC_status_warn";
break;
}
if (typeof(msg) !== 'undefined') {
s.setAttribute("class", klass);
s.innerHTML = msg;
}
},
connect: function() {
var host, port, password, encrypt, true_color;
host = $('VNC_host').value;
port = $('VNC_port').value;
password = $('VNC_password').value;
encrypt = $('VNC_encrypt').checked;
true_color = $('VNC_true_color').checked;
if ((!host) || (!port)) {
alert("Must set host and port");
return;
}
RFB.connect(host, port, password, encrypt, true_color);
},
disconnect: function() {
RFB.disconnect();
},
clipFocus: function() {
RFB.clipboardFocus = true;
},
clipBlur: function() {
RFB.clipboardFocus = false;
},
clipClear: function() {
$('VNC_clipboard_text').value = "";
RFB.clipboardPasteFrom("");
},
clipReceive: function(text) {
console.log(">> DefaultControls.clipReceive: " + text.substr(0,40) + "...");
$('VNC_clipboard_text').value = text;
console.log("<< DefaultControls.clipReceive");
},
clipSend: function() {
var text = $('VNC_clipboard_text').value;
console.log(">> DefaultControls.clipSend: " + text.substr(0,40) + "...");
RFB.clipboardPasteFrom(text);
console.log("<< DefaultControls.clipSend");
}
}
vnc.html
View file @ 91308399
<!--
noVNC example: simple example using default controls
-->
<html> <html>
<head> <head>
<title>VNC Client</title> <title>VNC Client</title>
<link rel="stylesheet" href="include/plain.css"> <link rel="stylesheet" href="include/plain.css">
...@@ -10,8 +12,11 @@ ...@@ -10,8 +12,11 @@
</body> </body>
<script src="vnc.js"></script> <script src="vnc.js"></script>
<script src="include/default_controls.js"></script>
<script> <script>
window.onload = function () { RFB.load('vnc'); } window.onload = function () {
DefaultControls.load('vnc');
RFB.load();
}
</script> </script>
</html> </html>
vnc.js
View file @ 91308399
...@@ -7,19 +7,20 @@ ...@@ -7,19 +7,20 @@
*/ */
"use strict"; "use strict";
/*global window, WebSocket, $, Browser, Canvas, Base64, DES */ /*global window, WebSocket, $, Browser, Canvas, VNC_uri_prefix Base64, DES */
// Globals defined here // Globals defined here
var VNC_native_ws, RFB; var VNC_native_ws, RFB;
/* /*
* Load supporting scripts * Load supporting scripts
*/ */
(function () { (function () {
var extra, start, end; var extra, start, end;
if (typeof VNC_uri_prefix === "undefined") { VNC_uri_prefix=""; }
extra = ""; extra = "";
start = "<script src='"; start = "<script src='" + VNC_uri_prefix;
end = "'><\/script>"; end = "'><\/script>";
// Uncomment to activate firebug lite // Uncomment to activate firebug lite
...@@ -50,6 +51,122 @@ var VNC_native_ws, RFB; ...@@ -50,6 +51,122 @@ var VNC_native_ws, RFB;
RFB = { RFB = {
/*
* External interface variables and methods
*/
clipboardFocus : false,
setUpdateState: function(externalUpdateState) {
RFB.externalUpdateState = externalUpdateState;
},
setClipboardReceive: function(clipReceive) {
RFB.clipboardCopyTo = clipReceive;
},
setCanvasID: function(canvasID) {
RFB.canvasID = canvasID;
},
setPassword: function(passwd) {
RFB.password = passwd;
RFB.state = "Authentication";
setTimeout(RFB.init_msg, 1);
},
load: function () {
//console.log(">> load");
/* Load web-socket-js if no builtin WebSocket support */
if (VNC_native_ws) {
console.log("Using native WebSockets");
RFB.updateState('disconnected', 'Disconnected');
} else {
console.log("Using web-socket-js flash bridge");
if ((! Browser.Plugins.Flash) ||
(Browser.Plugins.Flash.version < 9)) {
RFB.updateState('failed', "WebSockets or Adobe Flash is required");
} else if (location.href.substr(0, 7) === "file://") {
RFB.updateState('failed',
"'file://' URL is incompatible with Adobe Flash");
} else {
WebSocket.__swfLocation = VNC_uri_prefix +
"include/web-socket-js/WebSocketMain.swf";
WebSocket.__initialize();
RFB.use_seq = true;
RFB.updateState('disconnected', 'Disconnected');
}
}
//console.log("<< load");
},
connect: function (host, port, password, encrypt, true_color) {
console.log(">> connect");
RFB.host = host;
RFB.port = port;
RFB.password = (password !== undefined) ? password : "";
RFB.encrypt = (encrypt !== undefined) ? encrypt : true;
if ((RFB.encrypt === "0") ||
(RFB.encrypt === "no") ||
(RFB.encrypt === "false")) {
RFB.encrypt = false;
}
RFB.true_color = (true_color !== undefined) ? true_color: true;
if ((RFB.true_color === "0") ||
(RFB.true_color === "no") ||
(RFB.true_color === "false")) {
RFB.true_color = false;
}
if ((!RFB.host) || (!RFB.port)) {
updateState('disconnected', "Must set host and port");
return;
}
RFB.init_vars();
if ((RFB.ws) && (RFB.ws.readyState === WebSocket.OPEN)) {
RFB.ws.close();
}
RFB.init_ws();
RFB.updateState('ProtocolVersion');
console.log("<< connect");
},
disconnect: function () {
console.log(">> disconnect");
if ((RFB.ws) && (RFB.ws.readyState === WebSocket.OPEN)) {
RFB.updateState('closed');
RFB.ws.onmessage = function (e) { return; };
RFB.ws.close();
}
if (Canvas.ctx) {
Canvas.stop();
if (! /__debug__$/i.test(document.location.href)) {
Canvas.clear();
}
}
RFB.updateState('disconnected', 'Disconnected');
console.log("<< disconnect");
},
clipboardPasteFrom: function (text) {
if (RFB.state !== "normal") { return; }
//console.log(">> clipboardPasteFrom: " + text.substr(0,40) + "...");
RFB.send_array(RFB.clientCutText(text));
//console.log("<< clipboardPasteFrom");
},
/*
* Private variables and methods
*/
ws : null, // Web Socket object ws : null, // Web Socket object
sendID : null, sendID : null,
use_seq : false, use_seq : false,
...@@ -81,18 +198,12 @@ true_color : false, ...@@ -81,18 +198,12 @@ true_color : false,
fb_Bpp : 4, fb_Bpp : 4,
fb_depth : 3, fb_depth : 3,
// DOM objects
statusLine : null,
connectBtn : null,
clipboard : null,
max_version : 3.8, max_version : 3.8,
version : 0, version : 0,
auth_scheme : '', auth_scheme : '',
state : 'disconnected', state : 'disconnected',
cuttext : 'none', // ServerCutText wait state cuttext : 'none', // ServerCutText wait state
ct_length : 0, ct_length : 0,
clipboardFocus : false,
shared : 1, shared : 1,
check_rate : 217, check_rate : 217,
...@@ -103,6 +214,7 @@ host : '', ...@@ -103,6 +214,7 @@ host : '',
port : 5900, port : 5900,
password : '', password : '',
canvasID : 'VNC_canvas',
fb_width : 0, fb_width : 0,
fb_height : 0, fb_height : 0,
fb_name : "", fb_name : "",
...@@ -124,7 +236,6 @@ timing : { ...@@ -124,7 +236,6 @@ timing : {
mouse_buttonmask : 0, mouse_buttonmask : 0,
mouse_arr : [], mouse_arr : [],
/* /*
* Server message handlers * Server message handlers
*/ */
...@@ -179,17 +290,13 @@ init_msg: function () { ...@@ -179,17 +290,13 @@ init_msg: function () {
} }
types = RQ.shiftBytes(num_types); types = RQ.shiftBytes(num_types);
if ((types[0] !== 1) && (types[0] !== 2)) { RFB.auth_scheme = types[0];
if ((RFB.auth_scheme !== 1) && (RFB.auth_scheme !== 2)) {
RFB.updateState('failed', RFB.updateState('failed',
"Disconnected: invalid security types list: " + types); "Disconnected: invalid security types list: " + types);
return; return;
} }
if (RFB.password.length === 0) {
RFB.auth_scheme = 1;
} else {
RFB.auth_scheme = types[0];
}
RFB.send_array([RFB.auth_scheme]); RFB.send_array([RFB.auth_scheme]);
} else { } else {
if (RQ.length < 4) { if (RQ.length < 4) {
...@@ -220,6 +327,10 @@ init_msg: function () { ...@@ -220,6 +327,10 @@ init_msg: function () {
RFB.updateState('SecurityResult'); RFB.updateState('SecurityResult');
break; break;
case 2: // VNC authentication case 2: // VNC authentication
if (RFB.password.length === 0) {
RFB.updateState('password', "Password Required");
return;
}
if (RQ.length < 16) { if (RQ.length < 16) {
console.log(" waiting for auth challenge bytes"); console.log(" waiting for auth challenge bytes");
return; return;
...@@ -296,7 +407,7 @@ init_msg: function () { ...@@ -296,7 +407,7 @@ init_msg: function () {
name_length = RQ.shift32(); name_length = RQ.shift32();
RFB.fb_name = RQ.shiftStr(name_length); RFB.fb_name = RQ.shiftStr(name_length);
Canvas.init('VNC_canvas', RFB.fb_width, RFB.fb_height, RFB.true_color, Canvas.init(RFB.canvasID, RFB.fb_width, RFB.fb_height, RFB.true_color,
RFB.keyDown, RFB.keyUp, RFB.mouseDown, RFB.mouseUp, RFB.keyDown, RFB.keyUp, RFB.mouseDown, RFB.mouseUp,
RFB.mouseMove, RFB.mouseWheel); RFB.mouseMove, RFB.mouseWheel);
...@@ -795,7 +906,7 @@ pointerEvent: function (x, y) { ...@@ -795,7 +906,7 @@ pointerEvent: function (x, y) {
}, },
clientCutText: function (text) { clientCutText: function (text) {
console.log(">> clientCutText"); //console.log(">> clientCutText");
var arr; var arr;
arr = [6]; // msg-type arr = [6]; // msg-type
arr.push8(0); // padding arr.push8(0); // padding
...@@ -803,7 +914,7 @@ clientCutText: function (text) { ...@@ -803,7 +914,7 @@ clientCutText: function (text) {
arr.push8(0); // padding arr.push8(0); // padding
arr.push32(text.length); arr.push32(text.length);
arr.pushStr(text); arr.pushStr(text);
console.log("<< clientCutText:" + arr); //console.log("<< clientCutText:" + arr);
return arr; return arr;
}, },
...@@ -1066,68 +1177,41 @@ mouseWheel: function (e) { ...@@ -1066,68 +1177,41 @@ mouseWheel: function (e) {
clipboardCopyTo: function (text) { clipboardCopyTo: function (text) {
console.log(">> clipboardCopyTo: " + text.substr(0,40) + "..."); console.log(">> clipboardCopyTo stub");
RFB.clipboard.value = text; // Stub
console.log("<< clipboardCopyTo");
},
clipboardPasteFrom: function () {
var text;
if (RFB.state !== "normal") { return; }
text = RFB.clipboard.value;
console.log(">> clipboardPasteFrom: " + text.substr(0,40) + "...");
RFB.send_array(RFB.clientCutText(text));
console.log("<< clipboardPasteFrom");
}, },
clipboardClear: function () { externalUpdateState: function(state, msg) {
RFB.clipboard.value = ''; console.log(">> externalUpdateState stub");
RFB.clipboardPasteFrom(); // Stub
}, },
updateState: function(state, statusMsg) { updateState: function(state, statusMsg) {
var s, c, func, klass, cmsg; var func, cmsg;
s = RFB.statusLine;
c = RFB.connectBtn;
func = function(msg) { console.log(msg); }; func = function(msg) { console.log(msg); };
switch (state) { switch (state) {
case 'failed': case 'failed':
func = function(msg) { console.error(msg); }; func = function(msg) { console.error(msg); };
c.disabled = true;
klass = "error";
break; break;
case 'normal': case 'normal':
c.value = "Disconnect";
c.onclick = RFB.disconnect;
c.disabled = false;
klass = "normal";
break; break;
case 'disconnected': case 'disconnected':
c.value = "Connect";
c.onclick = function () { RFB.connect(); };
c.disabled = false;
klass = "normal";
break; break;
default: default:
func = function(msg) { console.warn(msg); }; func = function(msg) { console.warn(msg); };
c.disabled = true;
klass = "warn";
break; break;
} }
cmsg = typeof(statusMsg) !== 'undefined' ? (" Msg: " + statusMsg) : "";
func("New state '" + state + "'." + cmsg);
if ((RFB.state === 'failed') && if ((RFB.state === 'failed') &&
((state === 'disconnected') || (state === 'closed'))) { ((state === 'disconnected') || (state === 'closed'))) {
// Leave the failed message // Leave the failed message
return; RFB.externalUpdateState(state)
} } else {
RFB.state = state; RFB.state = state;
s.setAttribute("class", "VNC_status_" + klass); RFB.externalUpdateState(state, statusMsg)
cmsg = typeof(statusMsg) !== 'undefined' ? (" Msg: " + statusMsg) : "";
func("New state '" + state + "'." + cmsg);
if (typeof(statusMsg) !== 'undefined') {
s.innerHTML = statusMsg;
} }
}, },
...@@ -1206,157 +1290,6 @@ init_vars: function () { ...@@ -1206,157 +1290,6 @@ init_vars: function () {
RFB.FBU.tiles = 0; // HEXTILE RFB.FBU.tiles = 0; // HEXTILE
RFB.mouse_buttonmask = 0; RFB.mouse_buttonmask = 0;
RFB.mouse_arr = []; RFB.mouse_arr = [];
},
connect: function (host, port, password, encrypt, true_color) {
console.log(">> connect");
RFB.host = (host !== undefined) ? host :
$('VNC_host').value;
RFB.port = (port !== undefined) ? port :
$('VNC_port').value;
RFB.password = (password !== undefined) ? password :
$('VNC_password').value;
RFB.encrypt = (encrypt !== undefined) ? encrypt :
$('VNC_encrypt').checked;
RFB.true_color = (true_color !== undefined) ? true_color:
$('VNC_true_color').checked;
if ((!RFB.host) || (!RFB.port)) {
alert("Must set host and port");
return;
}
RFB.init_vars();
if ((RFB.ws) && (RFB.ws.readyState === WebSocket.OPEN)) {
RFB.ws.close();
}
RFB.init_ws();
RFB.updateState('ProtocolVersion');
console.log("<< connect");
},
disconnect: function () {
console.log(">> disconnect");
if ((RFB.ws) && (RFB.ws.readyState === WebSocket.OPEN)) {
RFB.updateState('closed');
RFB.ws.onmessage = function (e) { return; };
RFB.ws.close();
}
if (Canvas.ctx) {
Canvas.stop();
if (! /__debug__$/i.test(document.location.href)) {
Canvas.clear();
}
}
RFB.updateState('disconnected', 'Disconnected');
console.log("<< disconnect");
},
/*
* Load the controls
*/
load: function (target) {
//console.log(">> load");
var html, url;
if (!target) { target = 'vnc'; }
/* Populate the 'vnc' div */
html = "";
if ($('VNC_controls') === null) {
html += '<div id="VNC_controls">';
html += ' <ul>';
html += ' <li>Host: <input id="VNC_host"></li>';
html += ' <li>Port: <input id="VNC_port"></li>';
html += ' <li>Password: <input id="VNC_password"';
html += ' type="password"></li>';
html += ' <li>Encrypt: <input id="VNC_encrypt"';
html += ' type="checkbox"></li>';
html += ' <li>True Color: <input id="VNC_true_color"';
html += ' type="checkbox" checked></li>';
html += ' <li><input id="VNC_connect_button" type="button"';
html += ' value="Loading" disabled></li>';
html += ' </ul>';
html += '</div>';
}
if ($('VNC_screen') === null) {
html += '<div id="VNC_screen">';
html += '</div>';
}
if ($('VNC_clipboard') === null) {
html += '<br><br>';
html += '<div id="VNC_clipboard">';
html += ' VNC Clipboard:';
html += ' <input id="VNC_clipboard_clear_button"';
html += ' type="button" value="Clear">';
html += ' <br>';
html += ' <textarea id="VNC_clipboard_text" cols=80 rows=5>';
html += ' </textarea>';
html += '</div>';
}
$(target).innerHTML = html;
html = "";
if ($('VNC_status') === null) {
html += '<div id="VNC_status">Loading</div>';
}
if ($('VNC_canvas') === null) {
html += '<canvas id="VNC_canvas" width="640px" height="20px">';
html += ' Canvas not supported.';
html += '</canvas>';
}
$('VNC_screen').innerHTML += html;
/* DOM object references */
RFB.statusLine = $('VNC_status');
RFB.connectBtn = $('VNC_connect_button');
RFB.clipboard = $('VNC_clipboard_text');
/* Add handlers */
$('VNC_clipboard_clear_button').onclick = RFB.clipboardClear;
RFB.clipboard.onchange = RFB.clipboardPasteFrom;
RFB.clipboard.onfocus = function () { RFB.clipboardFocus = true; };
RFB.clipboard.onblur = function () { RFB.clipboardFocus = false; };
/* Load web-socket-js if no builtin WebSocket support */
if (VNC_native_ws) {
console.log("Using native WebSockets");
RFB.updateState('disconnected', 'Disconnected');
} else {
console.log("Using web-socket-js flash bridge");
if ((! Browser.Plugins.Flash) ||
(Browser.Plugins.Flash.version < 9)) {
RFB.updateState('failed', "WebSockets or Adobe Flash is required");
} else if (location.href.substr(0, 7) === "file://") {
RFB.updateState('failed',
"'file://' URL is incompatible with Adobe Flash");
} else {
WebSocket.__swfLocation = "include/web-socket-js/WebSocketMain.swf";
WebSocket.__initialize();
RFB.use_seq = true;
RFB.updateState('disconnected', 'Disconnected');
}
}
/* Populate the controls if defaults are provided in the URL */
if (RFB.state === 'disconnected') {
url = document.location.href;
$('VNC_host').value = (url.match(/host=([A-Za-z0-9.\-]*)/) ||
['',''])[1];
$('VNC_port').value = (url.match(/port=([0-9]*)/) ||
['',''])[1];
$('VNC_password').value = (url.match(/password=([^&#]*)/) ||
['',''])[1];
$('VNC_encrypt').checked = (url.match(/encrypt=([A-Za-z0-9]*)/) ||
['',''])[1];
}
//console.log("<< load");
} }
}; /* End of RFB */ }; /* End of RFB */
vnc_auto.html 0 → 100644
View file @ 91308399
<!--
noVNC Example: Automatically connect on page load.
Connect parameters are provided in query string:
http://example.com/?host=HOST&port=PORT&encrypt=1&true_color=1
-->
<html>
<head>
<title>VNC Client</title>
<link rel="stylesheet" href="include/plain.css">
</head>
<body>
<div id="VNC_screen">
<div id="VNC_status" style="margin-top: 0px;">Loading</div>
<canvas id="VNC_canvas" width="640px" height="20px">
Canvas not supported.
</canvas>
</div>
</body>
<script src="vnc.js"></script>
<script>
function setPassword() {
RFB.setPassword($('password_input').value);
return false;
}
function updateState(state, msg) {
var s, klass, html;
s = $('VNC_status');
switch (state) {
case 'failed': klass = "VNC_status_error"; break;
case 'normal': klass = "VNC_status_normal"; break;
case 'disconnected': klass = "VNC_status_normal"; break;
default: klass = "VNC_status_warn"; break;
}
if (typeof(msg) !== 'undefined') {
s.setAttribute("class", klass);
s.innerHTML = msg;
}
if (state === 'password') {
html = '<form onsubmit="return setPassword();"';
html += ' style="margin-bottom: 0px">';
html += 'Password Required: ';
html += '<input type=password size=10 id="password_input">';
html += '</form>';
s.innerHTML = html;
}
}
window.onload = function () {
var host, port, password, encrypt;
url = document.location.href;
host = (url.match(/host=([A-Za-z0-9.\-]*)/) || ['',''])[1];
port = (url.match(/port=([0-9]*)/) || ['',''])[1];
password = (url.match(/password=([^&#]*)/) || ['',''])[1];
encrypt = (url.match(/encrypt=([A-Za-z0-9]*)/) || ['',1])[1];
true_color = (url.match(/true_color=([A-Za-z0-9]*)/) || ['',1])[1];
if ((!host) || (!port)) {
updateState('failed',
"Must specify host and port in URL");
return;
}
RFB.setUpdateState(updateState);
RFB.load();
RFB.connect(host, port, password, encrypt, true_color);
}
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment