HTML and CSS Reference
In-Depth Information
// WebSocket handler functions
websocket.on("data", function(opcode, data) {
tcpsocket.write(data);
});
websocket.on("close", function(code, reason) {
console.log("WebSocket closed")
// close backend connection
tcpsocket.end();
});
console.log("WebSocket connection open");
});
While there are many RFB servers that accept WebSocket connections directly, you
have the flexibility to use any compatible RFB server with this example. Note, though, that
because the binding of RFB onto WebSocket has not been specified, there may be some
potential complications and incompatibility. In our example, we use the popular and
widely used open source TightVNC server (which is based on RFB) on a virtual machine.
TightVNC does not currently support WebSocket natively, but works with our proxy server.
The address of the virtual machine is hard coded into the proxy script. Hardcoding
the address is convenient for development but is
not
suitable for production. To use this
in your environment, you may need to change the hostname and port variables. Also, we
should emphasize that neither the WebSocket server nor the VNC server in this example
authenticates incoming connections, which is extremely unwise for any purpose other
than a simple demonstration. See Chapter 7 for better security practices.
The RFB Client
Now that we have set up a proxy server that can accept RFB over WebSocket connections,
we can build the front-end portion, or the client. While the RFB client is thin in nature, we
want it to be able to view the screen of the RFB server, which involves receiving graphical
information about what is happening on that screen. We also want to be able to control
the remote computer (also known as the RFB server).
In this section, we explore:
·
Building a simple client in JavaScript
·
Techniques for working with the binary data from the RFB
protocol and the WebSocket Protocol
·
Connecting to the server
·
Enabling the client to accept framebuffer updates
·
Using HTML5 <canvas> to render a framebuffer
·
Handling device input
