以Web方式交付VNC远程连接

什么是noVNC
noVNC 是一个 HTML5 VNC 客户端，采用 HTML 5 WebSockets, Canvas 和 JavaScript 实现，noVNC 被普遍用在各大云计算、虚拟机控制面板中，比如 OpenStack Dashboard 和 OpenNebula Sunstone 都用的是 noVNC。
noVNC 采用 WebSockets 实现，但是目前大多数 VNC 服务器都不支持 WebSockets，所以 noVNC 是不能直接连接 VNC 服务器的，需要一个代理来做 WebSockets 和 TCP sockets 之间的转换。这个代理在 noVNC 的目录里，叫做 websockify 。
实验环境
VMware Workstations
带桌面的CentOS7虚拟机
Windows 10 宿主机 + Google Chrome浏览器
关闭防火墙
setenforce 0
systemctl stop firewalld
systemctl disable firewalld

安装noVNC
安装依赖软件包
yum install -y epel*
yum install -y git
yum install -y tigervnc-server
执行以下命令并输入密码启动服务
vncserver :1
安装noVNC
git clone git://github.com/kanaka/noVNC
创建安全连接（一路回车下去…）
cd ./noVNC/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem
注： VNC的默认会话不是安全的，需要创建一个安全的VNC连接。创建完毕的证书 self.pem 需要放置到 noVNC/utils 目录下，当启动 noVNC 时，websockify将自动装载证书。
运行noVNC

在noVNC目录下，执行

./utils/launch.sh --vnc localhost:5901
测试连接
在浏览器访问（注意替换成自己的IP地址） http://192.168.204.10:6080/vnc.html
输入密码，连接成功！

当有请求访问vnc时，控制台会显示日志

适配于 CentOS 6 的安装脚本
#!/bin/bash

stop selinux and iptables

setenforce 0
service iptables stop

install vncserver and git

yum install tigervnc-server git -y
vncserver :1

此时会提示输入密码

download noVNC

git clone git://github.com/kanaka/noVNC

create secure connection

cd ./noVNC/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

run noVNC

cd …/
./utils/launch.sh --vnc localhost:5901

running

适配于 CentOS 7 的安装脚本
#!/bin/bash

stop selinux and iptables

setenforce 0
systemctl stop firewalld
systemctl disable firewalld

install vncserver and git

yum install -y epel*
yum install tigervnc-server git -y
vncserver :1

此时会提示输入密码

download noVNC

git clone git://github.com/kanaka/noVNC

create secure connection

cd ./noVNC/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

run noVNC

cd …/
./utils/launch.sh --vnc localhost:5901

running

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

我们的计算节点有 192.168.1.101 192.168.1.102 。。。
noVNC代理 放在 192.168.1.11 websockify代理通过内网带宽把qemu-kvm的vnc tcp转化成websockets 在6080上提供反向代理服务
在192.168.1.11写好所有虚拟机的配置文件，任意放在一个目录下比如：/srv/nfs4/vnc_tokens，这个目录下一台虚拟机提供一个配置文件，配置文件的内容
02f63e037a3c485c8fd5c0164c6ef67b: 192.168.1.101:5908
然后启动代理服务
nohup python /root/noVNC/utils/websockify --web /root/noVNC --target-config=/srv/nfs4/vnc_tokens 6080 >> /root/noVNC/novnc.log &
这样在内网中，我们通过noVNC提供的vnc_auto.html写上
host=192.168.1.11
port=6080
path=02f63e037a3c485c8fd5c0164c6ef67b
然后通过192.168.1.11:6080/vnc_auto.html就可以访问192.168.1.101:5908的这台机器的界面了。
一、实现功能
目标：通过浏览器远程访问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,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、Wesockify：https://github.com/novnc/websockify/archive/master.zip
三、具体操作
1、安装UltraVNC Server 并开启服务(安装后设置密码)

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

安装ws、optimist模块(执行websockify.js文件所需)

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

4、执行websockify.js：转发9000端口的http链接到5900端口（UltraVNC Server的默认端口为5900）

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

这时候只要把websockify.js的102行改成filename += ‘/vnc.html’;

再重复第4、5步 点击Connect输入UltraVNC设置的密码 完成。