Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

noVNC: A VNC Viewer In JavaScript

June 18th 2010

It seems that just about everything can and will be built in JavaScript, and now we can cross a VNC Viewer off the list.  Joel Martin has done the honors this time around.  While not the first implementation I have seen, it is the first implementation truly written in JavaScript.  It works using WebSockets, and the Canvas element from the HTML5 spec, and includes an emulator (using Flash) of WebSockets for browsers that don’t support the feature yet.  Unfortunately, WebSockets are not the same as TCP sockets, and so there is a simple Python proxy server that does the translation.  There are a few reasons why a proxy is required:

  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’).
  2. Javascript itself does not have the ability to handle pure byte 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 array.

  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.

Very nice work!  You can check out the source code, and download it for your own enjoyment on Github.