HTML and CSS Reference
In the next section, we walk through a basic example of using VNC, which illustrates
how to use RFB over WebSocket: viewing another computer's screen using a web client and
controlling it (with a keyboard and mouse). Figure 6-2 illustrates the flow of information
in our example. Here, an RFB client runs in a browser tab and communicates with an RFB
(VNC) server using a WebSocket to TCP proxy between the web client and RFB server.
Using this client, a user can view and control a remote desktop entirely within a web
application over WebSocket and RFB.
Figure 6-2. Connecting with RFB over WebSocket
Building a VNC (RFB) Client over WebSocket
Now that we've examined some of the concepts behind VNC over WebSocket, let's take a
look at a working example.
■ For the purposes of this section, while “VNC” refers to remote desktop
connections that use RFb as the underlying protocol, we will refer to the components that
use RFb for VNC as “RFb components” (specifically, the “RFb client” and “RFb server”).
by using RFb, you effectively build a VNC application.
In this example, we look at how we can combine this popular and widely used
technology with WebSocket. We examine the key components of an RFB client we built
using HTML5 and WebSocket, which can view and control the graphical user interface of
We've seen how WebSocket can elevate HTML5 applications to first class network
participants. The client application in this section is much like a desktop RFB client
in every way, except it is implemented using web technology and runs in the browser.
We also add remote device input, which allows you to control the other GUI with your
keyboard and mouse. The steps in this section not only show you how to control the GUI
of a remote computer over RFB and WebSocket, you might find this example inspirational
when building your own graphical applications that use WebSocket. Finally, we examine
some of the exciting applications that you can build that will let your users remotely
control another computer—all from within a browser tab.
The client side of this application is split into two layers. The protocol library,
library handles the RFB syntax defined by the specification that is understood by all