2011-01-30 23:42:28 -06:00
|
|
|
<!DOCTYPE html>
|
2019-03-13 14:19:51 +01:00
|
|
|
<html lang="en">
|
2013-04-03 15:54:49 +02:00
|
|
|
<head>
|
|
|
|
|
|
2013-09-21 12:19:59 -07:00
|
|
|
<!--
|
2017-05-12 08:57:23 +02:00
|
|
|
noVNC example: lightweight example using minimal UI and features
|
2018-08-15 09:43:24 +02:00
|
|
|
|
|
|
|
|
This is a self-contained file which doesn't import WebUtil or external CSS.
|
|
|
|
|
|
2019-09-30 15:35:33 +02:00
|
|
|
Copyright (C) 2019 The noVNC Authors
|
2012-10-11 12:16:58 -05:00
|
|
|
noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
|
2012-06-24 16:23:58 -05:00
|
|
|
This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
2010-09-08 10:11:11 -05:00
|
|
|
|
|
|
|
|
Connect parameters are provided in query string:
|
2018-08-16 11:15:45 +02:00
|
|
|
http://example.com/?host=HOST&port=PORT&scale=true
|
2010-09-08 10:11:11 -05:00
|
|
|
-->
|
2013-04-03 15:54:49 +02:00
|
|
|
<title>noVNC</title>
|
|
|
|
|
|
2019-03-14 14:11:52 +01:00
|
|
|
<style>
|
2018-08-15 09:55:52 +02:00
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
2018-08-15 09:18:43 +02:00
|
|
|
background-color: dimgrey;
|
2018-08-15 09:55:52 +02:00
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
html {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-21 11:29:05 +02:00
|
|
|
#top_bar {
|
2018-08-15 09:18:43 +02:00
|
|
|
background-color: #6e84a3;
|
2018-08-21 11:24:08 +02:00
|
|
|
color: white;
|
|
|
|
|
font: bold 12px Helvetica;
|
|
|
|
|
padding: 6px 5px 4px 5px;
|
2018-08-15 09:18:43 +02:00
|
|
|
border-bottom: 1px outset;
|
2018-08-15 09:55:52 +02:00
|
|
|
}
|
2018-08-21 11:29:05 +02:00
|
|
|
#status {
|
2018-08-21 11:24:08 +02:00
|
|
|
text-align: center;
|
2018-08-15 09:55:52 +02:00
|
|
|
}
|
2018-08-21 11:24:08 +02:00
|
|
|
#sendCtrlAltDelButton {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
border: 1px outset;
|
|
|
|
|
padding: 5px 5px 4px 5px;
|
|
|
|
|
cursor: pointer;
|
2018-08-15 09:55:52 +02:00
|
|
|
}
|
|
|
|
|
|
2018-08-21 11:29:39 +02:00
|
|
|
#screen {
|
|
|
|
|
flex: 1; /* fill remaining space */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-15 09:55:52 +02:00
|
|
|
</style>
|
2013-04-03 15:54:49 +02:00
|
|
|
|
2017-10-09 16:00:38 +02:00
|
|
|
<script type="module" crossorigin="anonymous">
|
2018-08-15 09:43:24 +02:00
|
|
|
// RFB holds the API to connect and communicate with a VNC server
|
2017-03-01 16:26:15 -05:00
|
|
|
import RFB from './core/rfb.js';
|
2012-10-17 11:47:07 -05:00
|
|
|
|
2018-08-16 11:34:17 +02:00
|
|
|
let rfb;
|
|
|
|
|
let desktopName;
|
2010-08-02 17:07:27 -05:00
|
|
|
|
2018-08-16 11:52:32 +02:00
|
|
|
// When this function is called we have
|
|
|
|
|
// successfully connected to a server
|
|
|
|
|
function connectedToServer(e) {
|
|
|
|
|
status("Connected to " + desktopName);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// This function is called when we are disconnected
|
|
|
|
|
function disconnectedFromServer(e) {
|
|
|
|
|
if (e.detail.clean) {
|
|
|
|
|
status("Disconnected");
|
|
|
|
|
} else {
|
|
|
|
|
status("Something went wrong, connection is closed");
|
|
|
|
|
}
|
2016-09-18 00:52:25 +02:00
|
|
|
}
|
2018-08-15 09:43:24 +02:00
|
|
|
|
|
|
|
|
// When this function is called, the server requires
|
|
|
|
|
// credentials to authenticate
|
2018-08-16 11:38:35 +02:00
|
|
|
function credentialsAreRequired(e) {
|
2018-08-16 12:23:54 +02:00
|
|
|
const password = prompt("Password Required:");
|
|
|
|
|
rfb.sendCredentials({ password: password });
|
2011-05-11 15:55:44 -05:00
|
|
|
}
|
2018-08-15 09:43:24 +02:00
|
|
|
|
2018-08-16 11:52:32 +02:00
|
|
|
// When this function is called we have received
|
|
|
|
|
// a desktop name from the server
|
|
|
|
|
function updateDesktopName(e) {
|
|
|
|
|
desktopName = e.detail.name;
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-15 09:43:24 +02:00
|
|
|
// Since most operating systems will catch Ctrl+Alt+Del
|
|
|
|
|
// before they get a chance to be intercepted by the browser,
|
|
|
|
|
// we provide a way to emulate this key sequence.
|
2010-06-15 17:47:01 -05:00
|
|
|
function sendCtrlAltDel() {
|
2010-08-02 17:07:27 -05:00
|
|
|
rfb.sendCtrlAltDel();
|
2010-07-22 11:33:21 -05:00
|
|
|
return false;
|
2010-06-15 17:47:01 -05:00
|
|
|
}
|
2018-08-16 11:52:32 +02:00
|
|
|
|
2018-08-15 09:43:24 +02:00
|
|
|
// Show a status text in the top bar
|
2018-08-15 09:18:43 +02:00
|
|
|
function status(text) {
|
2018-08-21 11:29:05 +02:00
|
|
|
document.getElementById('status').textContent = text;
|
2016-09-18 00:52:25 +02:00
|
|
|
}
|
2010-06-02 17:08:25 -05:00
|
|
|
|
2018-08-16 11:23:11 +02:00
|
|
|
// This function extracts the value of one variable from the
|
|
|
|
|
// query string. If the variable isn't defined in the URL
|
|
|
|
|
// it returns the default value instead.
|
|
|
|
|
function readQueryVariable(name, defaultValue) {
|
2023-04-06 17:11:47 +02:00
|
|
|
// A URL with a query parameter can look like this:
|
2018-08-16 11:23:11 +02:00
|
|
|
// https://www.example.com?myqueryparam=myvalue
|
|
|
|
|
//
|
|
|
|
|
// Note that we use location.href instead of location.search
|
|
|
|
|
// because Firefox < 53 has a bug w.r.t location.search
|
|
|
|
|
const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
|
2023-04-06 17:11:47 +02:00
|
|
|
match = document.location.href.match(re);
|
2018-08-16 11:23:11 +02:00
|
|
|
|
|
|
|
|
if (match) {
|
|
|
|
|
// We have to decode the URL since want the cleartext value
|
|
|
|
|
return decodeURIComponent(match[1]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return defaultValue;
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-28 10:34:00 +02:00
|
|
|
document.getElementById('sendCtrlAltDelButton')
|
|
|
|
|
.onclick = sendCtrlAltDel;
|
2010-06-02 17:08:25 -05:00
|
|
|
|
2018-08-16 11:23:11 +02:00
|
|
|
// Read parameters specified in the URL query string
|
2017-03-01 16:26:15 -05:00
|
|
|
// By default, use the host and port of server that served this file
|
2018-08-16 11:34:17 +02:00
|
|
|
const host = readQueryVariable('host', window.location.hostname);
|
|
|
|
|
let port = readQueryVariable('port', window.location.port);
|
2019-12-23 09:35:51 +01:00
|
|
|
const password = readQueryVariable('password');
|
2018-08-16 11:34:17 +02:00
|
|
|
const path = readQueryVariable('path', 'websockify');
|
2015-10-01 17:26:44 -03:00
|
|
|
|
2018-08-15 09:43:24 +02:00
|
|
|
// | | | | | |
|
|
|
|
|
// | | | Connect | | |
|
|
|
|
|
// v v v v v v
|
2012-04-03 10:34:24 -07:00
|
|
|
|
2018-08-16 11:34:17 +02:00
|
|
|
status("Connecting");
|
2010-06-02 17:08:25 -05:00
|
|
|
|
2018-08-16 11:34:17 +02:00
|
|
|
// Build the websocket URL used to connect
|
|
|
|
|
let url;
|
|
|
|
|
if (window.location.protocol === "https:") {
|
|
|
|
|
url = 'wss';
|
|
|
|
|
} else {
|
|
|
|
|
url = 'ws';
|
|
|
|
|
}
|
|
|
|
|
url += '://' + host;
|
|
|
|
|
if(port) {
|
|
|
|
|
url += ':' + port;
|
|
|
|
|
}
|
|
|
|
|
url += '/' + path;
|
|
|
|
|
|
|
|
|
|
// Creating a new RFB object will start a new connection
|
2018-08-21 11:29:39 +02:00
|
|
|
rfb = new RFB(document.getElementById('screen'), url,
|
2018-08-16 11:34:17 +02:00
|
|
|
{ credentials: { password: password } });
|
|
|
|
|
|
|
|
|
|
// Add listeners to important events from the RFB module
|
2018-08-16 11:38:35 +02:00
|
|
|
rfb.addEventListener("connect", connectedToServer);
|
|
|
|
|
rfb.addEventListener("disconnect", disconnectedFromServer);
|
|
|
|
|
rfb.addEventListener("credentialsrequired", credentialsAreRequired);
|
2018-08-16 11:34:17 +02:00
|
|
|
rfb.addEventListener("desktopname", updateDesktopName);
|
|
|
|
|
|
|
|
|
|
// Set parameters that can be changed on an active connection
|
|
|
|
|
rfb.viewOnly = readQueryVariable('view_only', false);
|
|
|
|
|
rfb.scaleViewport = readQueryVariable('scale', false);
|
2017-03-01 16:26:15 -05:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
2017-10-31 16:06:57 +01:00
|
|
|
<body>
|
2018-08-21 11:29:05 +02:00
|
|
|
<div id="top_bar">
|
|
|
|
|
<div id="status">Loading</div>
|
|
|
|
|
<div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
|
|
|
|
|
</div>
|
2018-08-21 11:29:39 +02:00
|
|
|
<div id="screen">
|
|
|
|
|
<!-- This is where the remote screen will appear -->
|
|
|
|
|
</div>
|
2017-10-31 16:06:57 +01:00
|
|
|
</body>
|
2010-06-02 17:08:25 -05:00
|
|
|
</html>
|
