HTML and CSS Reference
In-Depth Information
The user interface of the client is composed of
vnc.html
,
ui.js
, and
vnc.css
.
These files define the page structure, application behavior, and appearance of the VNC
application, respectively. On the server side, we use a Node.js script to proxy WebSocket
connections to TCP connections. This proxy connects to a backend RFB server running
on a remote desktop.
Setting Up a Proxy Server
RFB is an application layer protocol that uses TCP for its transport layer. This layering
should be fairly familiar by now, as it is a common theme shared by the protocols in the
previous two chapters. As discussed in Chapter 4, when using a standard TCP protocol
over WebSocket, you have a choice between upgrading the server to accept WebSocket
connections and using a proxy to relay between WebSocket and TCP.
In the example shown in Listing 6-1, we use a simple proxy adapted from the Node.js
server we wrote in Chapter 3. This proxy is unaware of RFB and is completely application
agnostic. It simply handles incoming WebSocket connections and makes outgoing TCP
connections. Data streams in as WebSocket messages on one side of the proxy and out as
TCP on the other. In our completed application, the proxy will handle connections from
our RFB client and proxy the WebSocket connection over TCP to the back-end RFB server.
Refer to Figure
6-2
in the previous section, which shows where the proxy server lies in our
architecture.
Listing 6-1.
Proxy Server Code
var websocket = require("./websocket-example");
var net = require("net");
var remotePort = 5900;
var remoteHost = "192.168.56.101";
websocket.listen(8080, "localhost", function(websocket) {
// set up backend TCP connection
var tcpsocket = new net.Socket({type:"tcp4"});
tcpsocket.connect(remotePort, remoteHost);
// TCP handler functions
tcpsocket.on("connect", function() {
console.log("TCP connection open");
});
tcpsocket.on("data", function(data) {
websocket.send(data);
});
tcpsocket.on("error", function() {
console.log("TCP connection error", arguments);
});
