HTML and CSS Reference
In-Depth Information
In Listing 6-16, the
doKeyEvent()
function takes a key value and a
downFlag
and
constructs the corresponding RFB client message. The padding bytes seem wasteful.
They clearly are today, since network bandwidth and latency are more precious than
CPU cycles. Aligning integer values to 32-bit boundaries is a vestigial optimization in the
protocol design that trades bytes of network bandwidth for processing speed on some
computing platforms. Since we are generating these values in JavaScript, which doesn't
even have a 32-bit integer type, it looks pretty funny!
■
Keyboard events are device-dependent, which means a mapping with the
operating system must occur for the keyboard events to be generated.
Note
Table
6-3
describes the DOM Keyboard Event Types.
Table 6-3.
DOM Keyboard Event Types
Event Type
Description
keydown
Indicates that a specific key was pressed on the keyboard and
triggers before the
keypress
event
keyup
Indicates that a specific key was released
This example uses the
event.which
property to detect keyboard keys. The property
is a legacy DOM API, but is suitable for the purposes of this example. The
event.which
property returns the value of the character represented by the key that was pressed or
released. We can map that value to the key value used by RFB in
KeyEvent
messages.
Putting It All Together
At this point, we are ready to connect to a RFB server and start using a remote desktop.
Open
vnc.html
in a modern browser that supports the required JavaScript APIs. This will
probably work from your local file system. Otherwise, serve all of the static files for this
example from a location where you can reach them with your browser.
Start the WebSocket-to-TCP proxy and the back-end RFB server. When you press
the Connect button in your application, you should see a remote desktop appear in your
browser tab. Try using the UI of the remote system. It's magical.
■
Keep in mind that you can simply install and launch the server and client from the
Vm. See Appendix b for more information.
Note
