https://github.com/novnc/noVNC

一、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 。

目标：通过浏览器远程访问Windows桌面。

原理：浏览器不支持VNC，所以不能直接连接VNC，但是可以使用代理，使用noVNC通过WebSocket建立连接，而VNC Server不支持WebSocket，所以需要开启Websockify代理来做WebSocket和TCP Socket之间的转换。

二、CentOS 7 安装novnc

1. 环境

[root@novnc ~]# cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core) 
[root@novnc ~]# ifconfig eth0|awk 'NR==2{print $2}'
10.0.0.60
setenforce 0
systemctl stop firewalld
systemctl disable firewalld

2. 安装配置

• 安装桌面环境

如何在CentOS7上安装桌面环境

• 安装tigervnc

#安装依赖软件包
wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo
curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
yum install -y git tigervnc-server -y

• 启动VNC服务并输入密码

[root@novnc ~]# vncserver :1

You will require a password to access your desktops.

Password:
Verify:
Would you like to enter a view-only password (y/n)? y
Password:
Verify:

New 'novnc:1 (root)' desktop is novnc:1

Creating default startup script /root/.vnc/xstartup
Creating default config /root/.vnc/config
Starting applications specified in /root/.vnc/xstartup
Log file is /root/.vnc/novnc:1.log

#当执行vncserver :1设置为1时，下面要运行VNC是的端口号应该是5900+1，那就是5901，VNC的默认端口是5900。

#写入开机自启动
chmod +x /etc/rc.d/rc.local
echo '/usr/bin/vncserver :1' >>/etc/rc.d/rc.local

• 查看日志

 cat /root/.vnc/novnc:1.log

• 查看端口

[root@novnc utils]# netstat -lntup|grep 59
tcp        0      0 0.0.0.0:5901            0.0.0.0:*               LISTEN      8380/Xvnc           
tcp6       0      0 :::5901                 :::*                    LISTEN      8380/Xvnc 

• 安装noVNC

git clone https://github.com/novnc/noVNC.git

• 创建安全连接(一路回车)

VNC的默认会话不是安全的，我们需要创建一个安全的VNC连接，会发现提示需要输入内容，这些字段我们并不需要都进行填写，当启动noVNC时，websockify将自动装载证书。

#要将生成的self.pem文件放到noVNC/utils底下
cd ./noVNC/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

• 运行noVNC

[root@novnc noVNC]# pwd
/root/noVNC
[root@novnc noVNC]# ./utils/launch.sh --vnc localhost:5901

• 测试进行访问连接

http://ip:6080/vnc.html

image.png

• 设置开机自启动

echo './root/noVNC/utils/launch.sh --vnc localhost:5901 &' >>/etc/rc.d/rc.local

• 安装numpy，解决连接速度慢：

https://sourceforge.net/projects/numpy/files/

#安装python依赖
yum install python-dev python-devel -y
#上传压缩包解压
unzip numpy-1.11.2.zip
cd numpy-1.11.2/
python setup.py install

3. 一键安装脚本

创建普通用户rcnovnc和用户组rc19zxzn

useradd rcnovnc -g rc19zxzn
mkdir -p /extend/novnc
chown -R rcnovnc:rc19zxzn /extend/novnc/
chmod +x /extend/novnc/novnc-install.sh 

在普通用户下执行一键部署noVNC脚本

#执行格式: sudo sh novnc-install.sh
su - rcnovnc

[rcnovnc@rc19c0020000034 ~]$ cat novnc-install.sh
#!/bin/bash
# 环境优化
setenforce 0
systemctl stop firewalld
systemctl disable firewalld

#将vpn的IP取值
#vpn_ip=`ip addr |grep tun|awk -F'[ /]+' 'NR==2{print $3}'`

# install vncserver && git
yum install -y epel*
yum install tigervnc-server git -y

#启动VNC服务并输入密码,第一次安装需要创建新密码
echo '请输入密码:'
vncserver :1

# download noVNC
mkdir -p /extend/novnc
chown -R rcnovnc:rc19zxzn /extend/novnc/
cd /extend/novnc
git clone git://github.com/kanaka/noVNC

# 创建安全连接
cd /extend/novnc/noVNC/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

# run noVNC
nohup ./launch.sh --vnc localhost:5901 >~/.vnc/novnc.log 2>&1 &
echo "请访问vpn虚拟IP地址 http://$vpn_ip:6080/vnc.html "

# 自启动
chmod +x /etc/rc.d/rc.local
/bin/su - rcnovnc -c "/usr/bin/vncserver :1"
/bin/su - rcnovnc -c "/extend/novnc/noVNC/utils/launch.sh --vnc localhost:5901 &"

自动化启动脚本

#执行格式: sudo sh novnc-start.sh start\stop\restart

[rcnovnc@rc19c0020000034 ~]$ cat novnc-start.sh
#!/bin/bash
vpn_ip=`ip addr |grep tun|awk -F'[ /]+' 'NR==2{print $3}'`
path=`echo /extend/novnc/noVNC/utils/`
noVNC_status=`ps -ef|grep 6080|grep python|awk '{print $2}'|wc -l`
noVNC_port=`ps -ef|grep 6080|grep python|awk 'NR==1{print $2}'`

function start(){
    vncserver=`sudo netstat -lntup|grep Xvnc|wc -l`
    if [ "$vncserver" != "0" ];then
        echo 'vncserver已经开启,请重新启动!'
        exit 1
    elif [ "$vncserver" == "0" ];then
        if [ "$noVNC_status" -ge "1" ];then
            echo 'noVNC的6080端口已开启,请重新启动'
            exit 2
        elif [ "$noVNC_status" == "0" ];then
            vncserver :1
            nohup $path/launch.sh --vnc localhost:5901 >~/.vnc/novnc.log 2>&1 &
            echo "VNC日志文件已生成到当前用户的此路径下: ~/.vnc/novnc.log"
            echo "请复制VPN虚拟IP地址生成的url进行访问VNC: http://$vpn_ip:6080/vnc.html "
            exit 0
        fi
    fi
    return 0
}   

function stop(){
    echo "noVNC stoping..."
    sudo pkill Xvnc 
    sudo kill $noVNC_port >/dev/null   2>&1
    echo "noVNC stop successful"
    return 0
}

case $1 in
"start")
    start
    ;;
"stop")
    stop
    ;;
"restart")
    stop 
    noVNC_status=`ps -ef|grep 6080|grep python|awk '{print $2}'|wc -l`
    noVNC_port=`ps -ef|grep 6080|awk 'NR==1{print $2}'`
    start
    ;;
*)
    echo "请输入参数: start, stop, restart!"
    ;;
esac

远程访问vnc
我这里是通过过滤出vpn的虚拟IP地址进行访问的

三、Windows 安装novnc

实现目标：通过浏览器远程访问Windows桌面

• 准备一台Windows7 32位的虚拟机

1. 环境

• UtralVNC：

  Windows环境下的VNC Server，在你需要访问的目标机器上安装。

  此处提示：生产需求为Windows7 32位，在下载UtralVNC软件时请下载之前的较旧版本，最新版会不兼容。

• Node.js：

  用于执行Websockify.js。Websockify还有Python版本的，不过在Windows下不可以成功。

• noVNC：

  noVNC是一个HTML5 VNC客户端

• websockify-js：

  noVNC是通过websockt建立链接，而VNC server不支持websocket，所以需要开启websockify代理来做 WebSockets 和 TCP sockets 之间的转换。

2. 安装utralNVC server

将UltraVNC软件复制到需要远程协助的电脑上双击打开安装。

在【Select Components】界面按需要选择上需要的组件，这里将【UltraVNC Server】和【UltraVNC Viewer】选择上。当需要远程协助时安装的电脑必须选择上【UltraVNC Server】，【UltraVNC Viewer】是用来远程协助的工具。点击【next】进行下一步安装。

安装完成后桌面就会有快捷方式,天蓝色的是服务的快捷方式，浅绿色是远程连接的工具。同时系统托盘上会有一个天蓝色的眼睛图标的程序，这个就是vnc server。

右键小眼睛图标打开菜单，点击【Start Service】并重启电脑。

点击【Admin Properties】打开配置连接的密码，连接的密码分为可操作的密码跟只看的密码。

3. 安装Node.js

选择npm package manager

node.js安装完成后，需要安装ws、optimist模块（执行websockify.js文件所需）

npm install ws

npm install optimist

npm install mime-types

安装完ws和optimist后会在C:\Users\Administrator\下生成node_modules目录

4. 安装noVNC和websockify

把noVNC.zip解压到node_modules目录下，再把websockify-master.zip解压到noVNC目录下。

5. 执行websockify.js

转发9000端口的http链接到5900端口（UltraVNC Server的默认端口为5900）

C:\Users\root\node_modules\noVNC\websockify-js-master\websockify>node websockify.js --web C:\Users\root\node_modules\noVNC 9000 localhost:5900

在浏览器访问http://192.168.1.163:9000/会出现这样的提示

需要把websockify.js中的filename += ‘/index.html’改成filename += ‘/vnc.html’;

点击链接输入UltraVNC设置的密码 完成。

6. 防火墙新建入站规则

如果被禁止访问，需要允许访问的9000端口进入

7. Windows开机自启动设置

windows自启动bat脚本链接

#1. 桌面新建自启动批处理文件start.bat
@echo off
cd C:\Users\root\node_modules\noVNC\websockify-js-master\websockify
node websockify.js --web C:\Users\root\node_modules\noVNC 9000 localhost:5900"

打开运行，输入shell:startup 回车。将start.bat启动文件放入文件夹