2010-05-12 15:39:38 +01:00
|
|
|
noVNC: HTML5 VNC Client
|
|
|
|
======================
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
|
|
|
|
Description
|
|
|
|
-----------
|
|
|
|
|
2010-05-12 15:39:38 +01:00
|
|
|
noVNC is a VNC client implemented using HTML5 technologies,
|
|
|
|
specifically Canvas and WebSocket (supports 'wss://' encryption).
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-04-19 02:53:54 +01:00
|
|
|
For browsers that do not have builtin WebSocket support, the project
|
|
|
|
includes web-socket-js, a WebSocket emulator using Adobe Flash
|
|
|
|
(http://github.com/gimite/web-socket-js).
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-04-30 22:41:09 +01:00
|
|
|
In addition, as3crypto has been added to web-socket-js to implement
|
|
|
|
WebSocket SSL/TLS encryption, i.e. the "wss://" URI scheme.
|
|
|
|
(http://github.com/lyokato/as3crypto_patched).
|
|
|
|
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
Requirements
|
|
|
|
------------
|
|
|
|
|
2010-04-19 02:53:54 +01:00
|
|
|
Until there is VNC server support for WebSocket connections, you need
|
|
|
|
to use a WebSocket to TCP socket proxy. There is a python proxy
|
2010-04-30 22:41:09 +01:00
|
|
|
included ('wsproxy'). One advantage of using the proxy is that it has
|
|
|
|
builtin support for SSL/TLS encryption (i.e. "wss://").
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-04-19 02:53:54 +01:00
|
|
|
There a few reasons why a proxy is required:
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-04-19 02:53:54 +01:00
|
|
|
1. WebSocket is not a pure socket protocol. There is an initial HTTP
|
|
|
|
like handshake to allow easy hand-off by web servers and allow
|
|
|
|
some origin policy exchange. Also, each WebSocket frame begins
|
|
|
|
with 0 ('\x00') and ends with 255 ('\xff').
|
2010-04-07 03:37:35 +01:00
|
|
|
|
|
|
|
2. Javascript itself does not have the ability to handle pure byte
|
2010-04-19 02:53:54 +01:00
|
|
|
strings (Unicode encoding messes with it) even though you can
|
|
|
|
read them with WebSocket. The python proxy encodes the data so
|
|
|
|
that the Javascript client can base64 decode the data into an
|
2010-05-15 18:38:50 +01:00
|
|
|
array.
|
2010-04-19 02:53:54 +01:00
|
|
|
|
|
|
|
3. When using the web-socket-js as a fallback, WebSocket 'onmessage'
|
|
|
|
events may arrive out of order. In order to compensate for this
|
|
|
|
the client asks the proxy (using the initial query string) to add
|
|
|
|
sequence numbers to each packet.
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
|
|
|
|
Usage
|
|
|
|
-----
|
|
|
|
|
2010-06-14 20:34:05 +01:00
|
|
|
* To encrypt the traffic using the WebSocket 'wss://' URI scheme you
|
|
|
|
need to generate a certificate for the proxy to load. You can generate
|
|
|
|
a self-signed certificate using openssl. The common name should be the
|
|
|
|
hostname of the server where the proxy will be running:
|
|
|
|
|
|
|
|
`openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem`
|
|
|
|
|
2010-04-07 03:34:56 +01:00
|
|
|
* run a VNC server.
|
|
|
|
|
2010-04-19 02:53:54 +01:00
|
|
|
`vncserver :1`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
* run the python proxy:
|
|
|
|
|
2010-06-17 23:50:15 +01:00
|
|
|
`./utils/wsproxy.py -f source_port target_addr:target_port
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-06-17 23:50:15 +01:00
|
|
|
`./utils/wsproxy.py -f 8787 localhost:5901`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
|
|
|
|
* run the mini python web server to serve the directory:
|
|
|
|
|
2010-06-07 18:47:02 +01:00
|
|
|
`./utils/web.py PORT`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-06-07 18:47:02 +01:00
|
|
|
`./utils/web.py 8080`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
* Point your web browser at http://localhost:8080/vnc.html
|
|
|
|
(or whatever port you used above to run the web server).
|
|
|
|
|
2010-04-19 02:57:34 +01:00
|
|
|
* Specify the host and port where the proxy is running and the
|
2010-04-19 02:53:54 +01:00
|
|
|
password that the vnc server is using (if any). Hit the Connect
|
|
|
|
button and enjoy!
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-05-11 22:13:52 +01:00
|
|
|
|
2010-06-21 19:20:57 +01:00
|
|
|
Browser Support
|
|
|
|
---------------
|
|
|
|
|
|
|
|
I only currently test under Linux. Here are the current results:
|
|
|
|
|
2010-06-23 22:08:36 +01:00
|
|
|
* Chrome 5.0.375.29 beta: Works great. Native WebSockets support. Very
|
|
|
|
fast.
|
2010-07-01 18:18:18 +01:00
|
|
|
* firefox 3.5: Works well. Large full-color images are slow mostly due
|
|
|
|
to flash WebSockets emulator overhead.
|
|
|
|
* Opera 10.60: Works. Rendering performance is between firefox 3.5 and
|
|
|
|
Chrome. However flash WebSockets emulator interaction causes overall
|
|
|
|
performance to be lower than firefox 3.5 and causes occasional
|
|
|
|
hangs.
|
2010-06-23 22:08:36 +01:00
|
|
|
* Arora 0.50: Works. Broken putImageData so large full-color images
|
|
|
|
are slow.
|
|
|
|
|
2010-07-01 18:18:18 +01:00
|
|
|
* Konqueror 4.2.2: Broken: flash WebSockets emulator never loads.
|
2010-06-21 19:20:57 +01:00
|
|
|
|
|
|
|
|
2010-05-11 22:13:52 +01:00
|
|
|
Integration
|
|
|
|
-----------
|
|
|
|
|
|
|
|
The client is designed to be easily integrated with existing web
|
|
|
|
structure and style.
|
|
|
|
|
2010-06-03 14:39:42 +01:00
|
|
|
At a minimum you must include the `vnc.js` and `default_controls.js`
|
|
|
|
scripts and call their load() functions. For example:
|
2010-05-11 22:13:52 +01:00
|
|
|
|
2010-07-01 15:53:38 +01:00
|
|
|
<head>
|
|
|
|
<script src='include/vnc.js'></script>
|
|
|
|
<script src="include/default_controls.js"></script>
|
|
|
|
</head>
|
2010-05-11 22:13:52 +01:00
|
|
|
<body>
|
|
|
|
<div id='vnc'>Loading</div>
|
|
|
|
</body>
|
2010-06-02 23:18:46 +01:00
|
|
|
<script>
|
|
|
|
window.onload = function () {
|
|
|
|
DefaultControls.load('vnc');
|
|
|
|
RFB.load(); };
|
|
|
|
</script>
|
2010-05-11 22:13:52 +01:00
|
|
|
|
2010-06-03 14:39:42 +01:00
|
|
|
See `vnc.html` and `vnc_auto.html` for examples. The file
|
|
|
|
`include/plain.css` has a list of stylable elements.
|
2010-06-02 23:28:28 +01:00
|
|
|
|
|
|
|
The `vnc.js` also includes other scripts within the `include`
|
|
|
|
sub-directory. The `VNC_uri_prefix` variable can be use override the
|
|
|
|
URL path to the directory that contains the `include` sub-directory.
|