NoVNC以Web方式交付VNC远程连接的方法 NoVNC以Web方式交付VNC远程连接的

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.60setenforce 0systemctl stop firewalldsystemctl disable firewalld

2. 安装配置
安装桌面环境
如何在CentOS7上安装桌面环境

文章图片

安装tigervnc

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

启动VNC服务并输入密码

[root@novnc ~]# vncserver :1You will require a password to access your desktops.Password:Verify:Would you like to enter a view-only password (y/n)? yPassword:Verify:New 'novnc:1 (root)' desktop is novnc:1Creating default startup script /root/.vnc/xstartupCreating default config /root/.vnc/configStarting applications specified in /root/.vnc/xstartupLog file is /root/.vnc/novnc:1.log#当执行vncserver :1设置为1时，下面要运行VNC是的端口号应该是5900+1，那就是5901，VNC的默认端口是5900。#写入开机自启动chmod +x /etc/rc.d/rc.localecho '/usr/bin/vncserver :1' >>/etc/rc.d/rc.local

查看日志
cat /root/.vnc/novnc:1.log
查看端口

[root@novnc utils]# netstat -lntup|grep 59tcp00 0.0.0.0:59010.0.0.0:*LISTEN8380/Xvnctcp600 :::5901:::*LISTEN8380/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

文章图片

设置开机自启动

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.zipcd numpy-1.11.2/python setup.py install

3. 一键安装脚本

[root@novnc scripts]# cat novnc_install.sh #!/bin/bash############################################################### File Name: novnc_install.sh# Version: V1.0# Author: lcx# Organization: www.in365robot.com############################################################### 环境优化setenforce 0systemctl stop firewalldsystemctl disable firewalld# install vncserver && gityum install -y epel*yum install tigervnc-server git -y#启动VNC服务并输入密码echo '请输入密码:'vncserver :1# download noVNCgit clone git://github.com/kanaka/noVNC# 创建安全连接cd ./noVNC/utils/openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem# run noVNCcd .././utils/launch.sh --vnc localhost:5901 &echo '请访问 http://ip:6080/vnc.html '# 自启动chmod +x /etc/rc.d/rc.localecho '/usr/bin/vncserver :1' >>/etc/rc.d/rc.localecho './root/noVNC/utils/launch.sh --vnc localhost:5901 &' >>/etc/rc.d/rc.local

[root@novnc scripts]# chmod +x /server/scripts/novnc_install.sh [root@novnc scripts]# ll /server/scripts/novnc_install.sh -rwxr-xr-x. 1 root root 903 Dec 24 18:25 /server/scripts/novnc_install.sh

三、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】进行下一步安装。

文章图片

文章图片

【NoVNC以Web方式交付VNC远程连接的方法】

文章图片

文章图片

安装完成后桌面就会有快捷方式,天蓝色的是服务的快捷方式，浅绿色是远程连接的工具。同时系统托盘上会有一个天蓝色的眼睛图标的程序，这个就是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
start "cmd" "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启动文件放入文件夹

文章图片

四、通过open微皮恩访问noVNC 在open微皮恩服务端通过执行一键生成脚本生成客户端证书novnc01

#查看内网IP信息[root@open微皮恩-novnc ~]# ifconfig eth0|awk 'NR==2{print $2}'172.17.43.166#查看公网IP信息[root@open微皮恩-novnc ~]# curl ifconfig.me182.92.226.114[root@open微皮恩-novnc ~]#git clonehttps://github.com/Nyr/open微皮恩-install.git[root@open微皮恩-novnc ~]# ls open微皮恩-install/LICENSE.txtopen微皮恩-install.shREADME.md[root@open微皮恩-novnc open微皮恩-install]# cd open微皮恩-install/ && bash open微皮恩-install.sh #安装步骤请看之前文档，一键生成客户端证书[10:54 root@open-novnc ~/open-install]# bash open-install.sh Looks like OpenVPN is already installed.What do you want to do?1) Add a new user2) Revoke an existing user3) Remove OpenVPN4) ExitSelect an option: 1Tell me a name for the client certificate.Client name: novncUsing SSL: openssl OpenSSL 1.0.2k-fips26 Jan 2017Generating a 2048 bit RSA private key...........................................................................................+++...........+++writing new private key to '/etc/open/server/easy-rsa/pki/private/novnc.key.XHM8ERJnnn'-----Using configuration from ./safessl-easyrsa.cnfCheck that the request matches the signatureSignature okThe Subject's Distinguished Name is as followscommonName:ASN.1 12:'novnc01'Certificate is to be certified until Dec 27 02:56:23 2029 GMT (3650 days)Write out database with 1 new entriesData Base UpdatedClient novnc01 added, configuration is available at: /root/novnc.o

将生成的证书上传到安装有novnc的PC客户端上