6 noVNC example: lightweight example using minimal UI and features
8 This is a self-contained file which doesn't import WebUtil or external CSS.
10 Copyright (C) 2019 The noVNC Authors
11 noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
12 This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
14 Connect parameters are provided in query string:
15 http://example.com/?host=HOST&port=PORT&scale=true
19 <meta charset=
"utf-8">
21 <!-- Always force latest IE rendering engine (even in intranet) &
22 Chrome Frame. Remove this if you use the .htaccess -->
23 <meta http-equiv=
"X-UA-Compatible" content=
"IE=edge" />
29 background-color: dimgrey;
32 flex-direction: column;
39 background-color: #
6e84a3;
41 font: bold
12px Helvetica;
42 padding:
6px
5px
4px
5px;
43 border-bottom:
1px outset;
48 #sendCtrlAltDelButton {
53 padding:
5px
5px
4px
5px;
58 flex:
1; /* fill remaining space */
64 <!-- Promise polyfill for IE11 -->
65 <script src=
"vendor/promise.js"></script>
67 <!-- ES2015/ES6 modules polyfill -->
68 <script nomodule
src=
"vendor/browser-es-module-loader/dist/browser-es-module-loader.js"></script>
70 <!-- actual script modules -->
71 <script type=
"module" crossorigin=
"anonymous">
72 // RFB holds the API to connect and communicate with a VNC server
73 import RFB from './core/rfb.js';
78 // When this function is called we have
79 // successfully connected to a server
80 function connectedToServer(e) {
81 status(
"Connected to " + desktopName);
84 // This function is called when we are disconnected
85 function disconnectedFromServer(e) {
87 status(
"Disconnected");
89 status(
"Something went wrong, connection is closed");
93 // When this function is called, the server requires
94 // credentials to authenticate
95 function credentialsAreRequired(e) {
96 const password = prompt(
"Password Required:");
97 rfb.sendCredentials({ password: password });
100 // When this function is called we have received
101 // a desktop name from the server
102 function updateDesktopName(e) {
103 desktopName = e.detail.name;
106 // Since most operating systems will catch Ctrl+Alt+Del
107 // before they get a chance to be intercepted by the browser,
108 // we provide a way to emulate this key sequence.
109 function sendCtrlAltDel() {
110 rfb.sendCtrlAltDel();
114 // Show a status text in the top bar
115 function status(text) {
116 document.getElementById('status').textContent = text;
119 // This function extracts the value of one variable from the
120 // query string. If the variable isn't defined in the URL
121 // it returns the default value instead.
122 function readQueryVariable(name, defaultValue) {
123 // A URL with a query parameter can look like this:
124 // https://www.example.com?myqueryparam=myvalue
126 // Note that we use location.href instead of location.search
127 // because Firefox <
53 has a bug w.r.t location.search
128 const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
129 match = document.location.href.match(re);
132 // We have to decode the URL since want the cleartext value
133 return decodeURIComponent(match[
1]);
139 document.getElementById('sendCtrlAltDelButton')
140 .onclick = sendCtrlAltDel;
142 // Read parameters specified in the URL query string
143 // By default, use the host and port of server that served this file
144 const host = readQueryVariable('host', window.location.hostname);
145 let port = readQueryVariable('port', window.location.port);
146 const password = readQueryVariable('password');
147 const path = readQueryVariable('path', 'websockify');
150 // | | | Connect | | |
153 status(
"Connecting");
155 // Build the websocket URL used to connect
157 if (window.location.protocol ===
"https:") {
168 // Creating a new RFB object will start a new connection
169 rfb = new RFB(document.getElementById('screen'), url,
170 { credentials: { password: password } });
172 // Add listeners to important events from the RFB module
173 rfb.addEventListener(
"connect", connectedToServer);
174 rfb.addEventListener(
"disconnect", disconnectedFromServer);
175 rfb.addEventListener(
"credentialsrequired", credentialsAreRequired);
176 rfb.addEventListener(
"desktopname", updateDesktopName);
178 // Set parameters that can be changed on an active connection
179 rfb.viewOnly = readQueryVariable('view_only', false);
180 rfb.scaleViewport = readQueryVariable('scale', false);
186 <div id=
"status">Loading
</div>
187 <div id=
"sendCtrlAltDelButton">Send CtrlAltDel
</div>
190 <!-- This is where the remote screen will appear -->