<commit_before>---
title: VNC client on 200 lines of JavaScript
author: minko_gechev
layout: post
permalink: /2013/08/30/vnc-javascript-nodejs/
categories:
  - Browsers
  - Canvas
  - Computer science
  - CSS3
  - Development
  - HTML5
  - Immediately Invoked Function Expression
  - JavaScript
  - Node.js
  - OpenSource
  - Programming
  - VNC
tags:
  - Computer science
  - Development
  - HTML5
  - HTTP
  - JavaScript
  - Node.js
  - OpenSource
  - vnc
---

In this quick blog post I&#8217;ll show you how to create a simple VNC client in about 200 lines of JavaScript.  
For our goal we&#8217;re going to use only HTML5 and JavaScript (client and server side).  
The end result will be something like this:

[<img src="http://blog.mgechev.com/wp-content/uploads/2013/08/js-vnc-1024x946.png" alt="js-vnc" width="600" height="554" class="alignnone size-large wp-image-500" />][1]

So, let&#8217;s begin!

Our application will have very simple architecture &#8211; a proxy server written in Node.js and a client in HTML5 and JavaScript. The Node.js server will stay between the browser and the VNC server. We need it because the client-side JavaScript does not supports TCP sockets so we can&#8217;t connect directly to the VNC server. The HTML5 client will have a canvas on which we will draw the frames we receive from the server.  
For VNC server you can use the free version of [RealVNC][2].

First lets start with the server. Make sure you have node.js installed. We will use four node modules: [rfb2][3], [connect][4], [socket.io][5] and [node-png][6].

Enter the following commands in your terminal:

{% highlight bash %}cd ~
mkdir js-vnc
cd js-vnc
npm init{% endhighlight %}

Now you should have folder called &#8220;js-vnc&#8221; with file named &#8220;package.json&#8221; in it.  
Use the following lines of code to install almost all the dependencies:

{% highlight bash %}npm install rfb2 -save
npm install connect --save
npm install socket.io --save{% endhighlight %}

Unfortunately node-png is not in the npm registry and we have to build it from source.  
Use:

{% highlight bash %}sudo npm install -g node-gyp
cd node_modules
git clone <EMAIL>:pkrumins/node-png.git
cd node-png
node-gyp configure build{% endhighlight %}

and that was all&#8230;Now we can start creating our server.  
Let&#8217;s include all the required modules and initialize an array which will contains all the connected clients. Create a file called &#8220;server.js&#8221; in your project base directory and add the following content in it:

{% highlight javascript %}var rfb = require('rfb2'),
    socketio = require('socket.io').listen(8091, { log: false }),
    Png = require('./node_modules/node-png/build/Release/png').Png,
    connect = require('connect'),<commit_msg>Add extra dash<commit_after>---
title: VNC client on 200 lines of JavaScript
author: minko_gechev
layout: post
permalink: /2013/08/30/vnc-javascript-nodejs/
categories:
  - Browsers
  - Canvas
  - Computer science
  - CSS3
  - Development
  - HTML5
  - Immediately Invoked Function Expression
  - JavaScript
  - Node.js
  - OpenSource
  - Programming
  - VNC
tags:
  - Computer science
  - Development
  - HTML5
  - HTTP
  - JavaScript
  - Node.js
  - OpenSource
  - vnc
---

In this quick blog post I&#8217;ll show you how to create a simple VNC client in about 200 lines of JavaScript.  
For our goal we&#8217;re going to use only HTML5 and JavaScript (client and server side).  
The end result will be something like this:

[<img src="http://blog.mgechev.com/wp-content/uploads/2013/08/js-vnc-1024x946.png" alt="js-vnc" width="600" height="554" class="alignnone size-large wp-image-500" />][1]

So, let&#8217;s begin!

Our application will have very simple architecture &#8211; a proxy server written in Node.js and a client in HTML5 and JavaScript. The Node.js server will stay between the browser and the VNC server. We need it because the client-side JavaScript does not supports TCP sockets so we can&#8217;t connect directly to the VNC server. The HTML5 client will have a canvas on which we will draw the frames we receive from the server.  
For VNC server you can use the free version of [RealVNC][2].

First lets start with the server. Make sure you have node.js installed. We will use four node modules: [rfb2][3], [connect][4], [socket.io][5] and [node-png][6].

Enter the following commands in your terminal:

{% highlight bash %}cd ~
mkdir js-vnc
cd js-vnc
npm init{% endhighlight %}

Now you should have folder called &#8220;js-vnc&#8221; with file named &#8220;package.json&#8221; in it.  
Use the following lines of code to install almost all the dependencies:

{% highlight bash %}npm install rfb2 --save
npm install connect --save
npm install socket.io --save{% endhighlight %}

Unfortunately node-png is not in the npm registry and we have to build it from source.  
Use:

{% highlight bash %}sudo npm install -g node-gyp
cd node_modules
git clone <EMAIL>:pkrumins/node-png.git
cd node-png
node-gyp configure build{% endhighlight %}

and that was all&#8230;Now we can start creating our server.  
Let&#8217;s include all the required modules and initialize an array which will contains all the connected clients. Create a file called &#8220;server.js&#8221; in your project base directory and add the following content in it:

{% highlight javascript %}var rfb = require('rfb2'),
    socketio = require('socket.io').listen(8091, { log: false }),
    Png = require('./node_modules/node-png/build/Release/png').Png,
    connect = require('connect'),
{'fraction_non_alphanumeric': 0.0963136971449223, 'fraction_numerical': 0.038670039754246474, 'mean_word_length': 3.8637961335676625, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1678359', 'n_tokens_mistral': 1817, 'n_tokens_neox': 1636, 'n_words': 709}