[技术文章] noVNC在Windows下的安装配置

一、实现功能目标：通过浏览器远程访问Windows桌面。原理：浏览器不支持VNC，所以不能直接连接VNC，但是可以使用代理，使用noVNC通过WebSocket建立连接，而VNC Server不支持WebSocket，所以需要开启Websockify代理来做WebSocket和TCP Socket之间的转换。
二、准备工作
1、测试环境：Windows 7
2、UltraVNC：http://www.uvnc.com/（Windows环境下的VNC Server，当然还有TightVNC、TigerVNC、RealVNC等，其中RealVNC不能通过noVNC）
3、Node.js：https://nodejs.org/en/download/（用于执行Websockify.js。Websockify还有Python版本的，不过在Windows下没有成功）
4、noVNC：http://github.com/kanaka/noVNC/zipball/master
5、Websockify：https://github.com/novnc/websockify/archive/master.zip
三、具体操作
1、安装UltraVNC Server 并开启服务(安装后设置密码)


2、安装Node.js
安装时选择npm package manager

安装ws、optimist模块(执行websockify.js文件所需)
C:\Users\Administrator>npm install ws

npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN Administrator No description
npm WARN Administrator No repository field.
npm WARN Administrator No README data
npm WARN Administrator No license field.

+ ws@5.1.0
added 2 packages in 1.836s

C:\Users\Administrator>npm install optimist

npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN Administrator No description
npm WARN Administrator No repository field.
npm WARN Administrator No README data
npm WARN Administrator No license field.

+ [url=mailtoptimist@0.6.1]optimist@0.6.1[/url]
added 3 packages in 1.497s

C:\Users\Administrator>npm install mime-types

npm notice created a lockfile as package-lock.json. You should commit this file.

+ mime-types@2.1.18
added 2 packages in 3.666s

安装完ws和optimist后会在C:\Users\Administrator\下生成node_modules目录
3、把noVNC.zip解压到node_modules目录下，再把websockify-master.zip解压到noVNC目录下。

4、执行websockify.js：转发9000端口的http链接到5900端口（UltraVNC Server的默认端口为5900）
C:\Users\Administrator\node_modules\noVNC\websockify-master\other\js>node websockify.js --web C:\Users\Administrator\node_modules\noVNC 9000 10.1.0.112:5900

WebSocket settings:
    - proxying from :9000 to 10.1.0.112:5900
    - Web server active. Serving: C:\Users\Administrator\node_modules\noVNC
    - Running in unencrypted HTTP (ws://) mode

5、在浏览器地址栏输入http://192.168.1.163:9000/（服务器端IP：192.168.1.163）会提示：

这时候只要在websockify.js中搜索filename += ‘/index.html’改成filename += ‘/vnc.html’，再重复第4、5步 点击Connect输入UltraVNC设置的密码 完成。

通过 noVNC 实现数千台自助机的实时可视化：http://www.udpwork.com/item/16089.html
Windows下网页连接VNC操作手册：https://blog.csdn.net/mrliqifeng/article/details/73825934
Windows远程桌面实现之四（在现代浏览器中通过普通页面访问远程桌面）：Windows远程桌面实现之四（在现代浏览器中通过普通页面访问远程桌面）
通过noVNC实现远程连接windows桌面：https://www.jianshu.com/p/496470a760ab
webvnc之novnc实战：https://blog.csdn.net/happyteafriends/article/details/41344751
noVNC+VNCserver实现远程访问Docker容器桌面：https://blog.csdn.net/u012829611/article/details/72576493
noVNC连接CentOS，以Web方式交付VNC远程连接：https://www.cnblogs.com/liqing1009/p/8039230.html

noVNC的使用之一

noVNC是一个HTML5 VNC客户端，采用HTML5 websockets、Canvas和JavaScript实现，noVNC被普遍应用于各大云计算、虚拟机控制面板中，比如OpenStack Dashboard 和 OpenNebula Sunstone 都用的是 noVNC. 前面说了 noVNC 采用 WebSockets 实现，但是目前大多数 VNC 服务器都不支持 WebSockets，所以 noVNC 是不能直接连接 VNC 服务器的，怎么办呢？这就需要一个代理来实现websockets和tcp sockets之间的转换，这个代理就是websockify。

vncserver安装和使用

vncserver是用来实现远程桌面连接的，比如说你由两台机器PC1：192.168.1.101和PC2：192.168.1.102，如果你想在PC1上访问PC2的桌面，就需要在PC2上安装vncserver，然后在PC1上通过vncviewer或noVNC访问PC2。下面以tigervnc-server为例来介绍一下vncserver的安装和使用。

安装yum -y install tigervnc-server

安装完后，查看vncserver的配置文件：

[root@mycentos liushaolin]# rpm -qc tigervnc-server/etc/sysconfig/vncservers

在该配置文件中可以修改vncserver的配置，比如远程桌面的sessionnumber，登录时的用户名，屏幕分辨率等等。

启动sncservervncserver或vncserver :n

这里的n就是sessionnumber，不指定的话默认为1，第一次启动时会提示输入密码，以后也可以使用vncpasswd命令修改密码。VNC的默认端口号是5900，而远程桌面连接端口号则是5900+n。如果使用“vncserver :1”命令启动VNC Server，那么端口应该是5901。

查看连接vncserver -list[root@mycentos liushaolin]# vncserver -listTigerVNC server sessions:X DISPLAY #        PROCESS ID:1                5918:3                7726
删除连接vncserver -kill :n
使用noVNC连接VNC servernoVNC的工作原理

noVNC提供一种在网页上通过html5的Canvas，访问机器上vncserver提供的vnc服务，需要做tcp到websocket的转化，才能在html5中显示出来。网页就是一个客户端，类似win下面的vncviewer，只是此时填的不是裸露的vnc服务的ip+port，而是由noVNC提供的websockets的代理，在noVNC代理服务器上要配置每个vnc服务，noVNC提供一个标识，去反向代理所配置的vnc服务。

noVNC的使用

假设我们在PC2上创建了一个VNC连接，sessionnumber是1，端口号为5901。noVNC可以和vncserver在一台机器上，也可以不在一台机器上。

简单用法

安装noVNC

$git clone https://github.com/kanaka/noVNC$cd noVNC$./utils/launch.sh --vnc localhost:5901

启动launch脚本，会输出如下信息：

WebSocket server settings:  - Listen on :6080  - Flash security policy server  - Web server. Web root: /root/noVNC  - No SSL/TLS support (no cert file)  - proxying from :6080 to localhost:5901Navigate to this URL:    http://localhost:6080/vnc.html?host=localhost&port=6080

这时，访问http://localhost:6080/vnc.html?host=localhost&port=6080或http://localhost:6080/vnc.html，然后输入Host地址，端口号，密码，token，其中密码和token有的话需要输入，然后连接即可。当然你可以从PC1的浏览器中输入PC2的IP地址访问。

整个流程大概是这样的：

vnc.html -> 192.168.1.102:6080（PC2） -> websockify.py -> localhost:5901

高级用法

使用websockify可以更改默认6080端口，使用token设置。

用法：./utils/websockify/websockify.py --web ./ 8787 localhost:5901

--web ./指定访问根目录，8787表示访问novnc的端口，localhost可以改成所有安装了vncserver的IP地址，比如：./utils/websockify/websockify.py --web ./ 8787 192.169.1.100:5901。

使用token

为什么使用token？

我们上面的场景是基于noVNC代理和vncserver在同一台机器上的，倘若我们想通过noVNC访问局域网中的所有机器，难道要给每一台机器都安装配置noVNC，然后用每台机器的IP地址去访问它吗？显然这种做法是繁琐笨拙的。实际上，我们只需要一台机器作为noVNC代理，其他被访问的机器安装VNC server就可以了。如下图：

在上图中，我们用一台机器作为代理，IP：192.168.1.10，另外两台机器PC1：192.168.1.101和PC2：192.168.1.102上面安装vncserver，我们怎么通过代理去访问PC1和PC2呢？这就需要token大显身手了。

我们需要在代理机器上创建一个token配置文件，假设为/home/token/token.conf，文件内容为：

abc123: 192.168.1.101:5900123abc: 192.168.1.102:5901

首先，在欲访问的机器上启动vncserver，执行命令vncserver即可。

然后，在代理机器上输入命令：./utils/websockify/websockify.py --web ./ --target-config=./token/token.conf 8787。

接下来，访问192.168.1.10:8787/vnc.html，输入对应的token即可访问相应的机器了。

使用vnc_auto.html

在vnc_auto.html中写入noVNC代理的配置

host = "192.168.1.10";port = 8787;path = "websockify/?token=xxxxxx";

然后直接访问192.168.1.10:8787/vnc_auto.html即可连接。

问题排查

如果输入host地址，port之后，不能访问，查看密码是否正确，如果显示connection refused，查看被访问主机vncserver是否启动，如果未启动，执行vncserver。

注意：使用noVNC每个系统桌面或者虚拟机每次只能有一个连接，如果连接时出现错误Server disconnected (code: 1000, reason: Target closed)，也有可能是你已经连接了或者在virt-manager里面启动了虚拟机并进入了系统桌面。

经测试，noVNC与TightVNC及或TigerVNC搭配都可以使用，与RealVNC搭配不可用。
三者的TCP端口都是5900，Java Web端口都是5800。
在保持RealVNC的5800和5900端口不变的情况下（原来已经安装RealVNC，不对其进行更改），安装TightVNC或TigerVNC，并修改其TCP和Java Web端口分别为6900和6800，则：
C:\Users\Administrator\node_modules\noVNC\websockify-master\other\js>node websockify.js --web C:\Users\Administrator\node_modules\noVNC 8000 10.1.0.112:6900