noVNC是一个 HTML5 VNC 客户端,采用 HTML 5 WebSockets, Canvas 和 JavaScript 实现,这篇文章主要介绍了NoVNC以Web方式交付VNC远程连接的方法,感兴趣的朋友一起看看吧
GitHub - novnc/noVNC: VNC client web application
![](https://img-blog.csdnimg.cn/img_convert/5fb427fcbc42a2ec5fcfbf947a2654e1.png)
一、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. 环境
1 2 3 4 5 6 7 | [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上安装桌面环境
![](https://img-blog.csdnimg.cn/img_convert/d1a3b80269b5950fe2c6111134f46b17.jpeg)
安装tigervnc
1 2 3 4 | #安装依赖软件包 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服务并输入密码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | [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
查看端口
1 2 3 | [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 GitHub - novnc/noVNC: VNC client web application
创建安全连接(一路回车)
VNC的默认会话不是安全的,我们需要创建一个安全的VNC连接,会发现提示需要输入内容,这些字段我们并不需要都进行填写,当启动noVNC时,websockify将自动装载证书。
1 2 3 | #要将生成的self.pem文件放到noVNC/utils底下 cd ./noVNC/utils/ openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem |
![](https://img-blog.csdnimg.cn/img_convert/79f080a9de7fe2d797f923acea7c7b5a.png)
运行noVNC
1 2 3 | [root@novnc noVNC]# pwd /root/noVNC [root@novnc noVNC]# ./utils/launch.sh --vnc localhost:5901 |
![](https://img-blog.csdnimg.cn/img_convert/362e84635ec78a4630e307589a56a10b.png)
测试进行访问连接
http://ip:6080/vnc.html
![image.png](https://img-blog.csdnimg.cn/img_convert/452d71b5f6468607a336c48b3133aae2.jpeg)
设置开机自启动
1 | echo './root/noVNC/utils/launch.sh --vnc localhost:5901 &' >> /etc/rc .d /rc . local |
安装numpy,解决连接速度慢:
https://sourceforge.net/projects/numpy/files/
1 2 3 4 5 6 | #安装python依赖 yum install python-dev python-devel -y #上传压缩包解压 unzip numpy-1.11.2.zip cd numpy-1.11.2/ python setup.py install |
3. 一键安装脚本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | [root@novnc scripts] # cat novnc_install.sh #!/bin/bash ############################################################## # File Name: novnc_install.sh # Version: V1.0 # Author: lcx # Organization: www.in365robot.com ############################################################## # 环境优化 setenforce 0 systemctl stop firewalld systemctl disable firewalld # install vncserver && git yum install -y epel* yum install tigervnc-server git -y #启动VNC服务并输入密码 echo '请输入密码:' vncserver :1 # download noVNC git clone git: //github .com /kanaka/noVNC # 创建安全连接 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 & echo '请访问 http://ip:6080/vnc.html ' # 自启动 chmod +x /etc/rc .d /rc . local echo '/usr/bin/vncserver :1' >> /etc/rc .d /rc . local echo './root/noVNC/utils/launch.sh --vnc localhost:5901 &' >> /etc/rc .d /rc . local |
1 2 3 | [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位的虚拟机
![](https://img-blog.csdnimg.cn/img_convert/68535dd0614f7e2828ae16c3506d0134.png)
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 之间的转换。
![](https://img-blog.csdnimg.cn/img_convert/b5f8fc8d37571f924c8f5f29ccfe509d.png)
2. 安装utralNVC server
将UltraVNC软件复制到需要远程协助的电脑上双击打开安装。
![](https://img-blog.csdnimg.cn/img_convert/f1ef48b1ded06360ecfde04133091df0.png)
在【Select Components】界面按需要选择上需要的组件,这里将【UltraVNC Server】和【UltraVNC Viewer】选择上。当需要远程协助时安装的电脑必须选择上【UltraVNC Server】,【UltraVNC Viewer】是用来远程协助的工具。点击【next】进行下一步安装。
![](https://img-blog.csdnimg.cn/img_convert/e7a1cd517d81ebc3f64e1769492a05c5.png)
![](https://img-blog.csdnimg.cn/img_convert/a467246b59651ea42477f7f10f494fe7.png)
![](https://img-blog.csdnimg.cn/img_convert/cee18c97110c253f48b63fe4fee7fbce.png)
![](https://img-blog.csdnimg.cn/img_convert/3912e79e462df582b696cb3e79429cb3.png)
安装完成后桌面就会有快捷方式,天蓝色的是服务的快捷方式,浅绿色是远程连接的工具。同时系统托盘上会有一个天蓝色的眼睛图标的程序,这个就是vnc server。
![](https://img-blog.csdnimg.cn/img_convert/3d08bb75d37bf5dd857313b353aba5b7.jpeg)
右键小眼睛图标打开菜单,点击【Start Service】并重启电脑。
![](https://img-blog.csdnimg.cn/img_convert/783985661a3a05c5a1a555c06a477724.png)
点击【Admin Properties】打开配置连接的密码,连接的密码分为可操作的密码跟只看的密码。
![](https://img-blog.csdnimg.cn/img_convert/0f52902d6e8b92e91483beacbdcb9ae2.png)
![](https://img-blog.csdnimg.cn/img_convert/25dac3e8e680904bb936a7b3e98cf55d.png)
3. 安装Node.js
![](https://img-blog.csdnimg.cn/img_convert/2164a4e9d725dc7040200dcc1cb681a2.png)
选择npm package manager
![](https://img-blog.csdnimg.cn/img_convert/caee99e12b93cb0b3e49402372f9b66c.png)
![](https://img-blog.csdnimg.cn/img_convert/bcfe494b3a66e1681f2b4e2bfcf84323.png)
node.js安装完成后,需要安装ws、optimist模块(执行websockify.js文件所需)
npm install ws
![](https://img-blog.csdnimg.cn/img_convert/a565e8dcf27a81ef05bb72312ad6c66b.png)
npm install optimist
![](https://img-blog.csdnimg.cn/img_convert/3090fa4546a36ee02554b09d654c8759.png)
npm install mime-types
![](https://img-blog.csdnimg.cn/img_convert/d92f25bc4c6b61e767ed55a5d7d2be5f.png)
安装完ws和optimist后会在C:\Users\Administrator\下生成node_modules目录
![](https://img-blog.csdnimg.cn/img_convert/e406f9a323bed84a4131d4ce127d6d13.png)
4. 安装noVNC和websockify
把noVNC.zip解压到node_modules目录下,再把websockify-master.zip解压到noVNC目录下。
![](https://img-blog.csdnimg.cn/img_convert/a0785489e942c857987434d252deb012.png)
![](https://img-blog.csdnimg.cn/img_convert/a5dfcc27a8e994b9a049cf5427097436.png)
![](https://img-blog.csdnimg.cn/img_convert/bb4cd9af7f19658658cf10bb7babcdeb.png)
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
![](https://img-blog.csdnimg.cn/img_convert/7e08be9a968a7d3d2259d841a3ab82dd.png)
在浏览器访问http://192.168.1.163:9000/会出现这样的提示
![](https://img-blog.csdnimg.cn/img_convert/45a16acca1050465ddbd5374db09fcb8.png)
需要把websockify.js
中的filename += ‘/index.html'
改成filename += ‘/vnc.html';
![](https://img-blog.csdnimg.cn/img_convert/7ba31bd0fdfd80159bc2df224737f74b.png)
点击链接输入UltraVNC设置的密码 完成。
![](https://img-blog.csdnimg.cn/img_convert/b70f13240923f2b7d32ad0c0456809d5.png)
![](https://img-blog.csdnimg.cn/img_convert/5deabab55249c9f1996daa3b3ee11f66.jpeg)
6. 防火墙新建入站规则
如果被禁止访问,需要允许访问的9000端口进入
![](https://img-blog.csdnimg.cn/img_convert/ff4f10d42a40b1f25a45d85942c0ae6e.png)
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启动文件放入文件夹
![](https://img-blog.csdnimg.cn/img_convert/3ce697bd1cc64af27bf162617f64af3b.png)
四、通过open微皮恩访问noVNC
在open微皮恩服务端通过执行一键生成脚本生成客户端证书novnc01
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | #查看内网IP信息 [root@open微皮恩-novnc ~]# ifconfig eth0|awk 'NR==2{print $2}' 172.17.43.166 #查看公网IP信息 [root@open微皮恩-novnc ~]# curl ifconfig.me 182.92.226.114 [root@open微皮恩-novnc ~]#git clone https://github.com/Nyr/open微皮恩-install.git [root@open微皮恩-novnc ~]# ls open微皮恩-install/ LICENSE.txt open微皮恩-install.sh README.md [root@open微皮恩-novnc open微皮恩-install]# cd open微皮恩-install/ && bash open微皮恩-install.sh #安装步骤请看之前文档,一键生成客户端证书 [10:54 root@openvpn-novnc ~/openvpn-install]# bash openvpn-install.sh Looks like OpenVPN is already installed. What do you want to do? 1) Add a new user 2) Revoke an existing user 3) Remove OpenVPN 4) Exit Select an option: 1 Tell me a name for the client certificate. Client name: novnc Using SSL: openssl OpenSSL 1.0.2k-fips 26 Jan 2017 Generating a 2048 bit RSA private key ...........................................................................................+++ ...........+++ writing new private key to '/etc/openvpn/server/easy-rsa/pki/private/novnc.key.XHM8ERJnnn' ----- Using configuration from ./safessl-easyrsa.cnf Check that the request matches the signature Signature ok The Subject's Distinguished Name is as follows commonName :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 entries Data Base Updated Client novnc01 added, configuration is available at: /root/novnc.ovpn |
将生成的证书上传到安装有novnc的PC客户端上
![](https://img-blog.csdnimg.cn/img_convert/0f072b29974a62b23448ca83b68719de.png)
下载windows7版的客户端软件openvpn-gui
OpenVPN Download Free - 2.6.10 | TechSpot
![](https://img-blog.csdnimg.cn/img_convert/2dbc244f8c3d13099e96cbb99cf9068e.png)
![](https://img-blog.csdnimg.cn/img_convert/8850d946450902c2b000ddf354d85163.png)
进行连接
![](https://img-blog.csdnimg.cn/img_convert/8ac3e820459257d2cb8740bddec8e1fb.png)
在另一台PC客户端上也生成证书进行连接访问
![](https://img-blog.csdnimg.cn/img_convert/64afcdda9ec7224835eb17c8f5757a8f.png)
![](https://img-blog.csdnimg.cn/img_convert/9ffff0637887ad74751eee384a7ae763.jpeg)
openvpn断开连接,则novnc的连接也随即断开
到此这篇关于NoVNC—以Web方式交付VNC远程连接的文章就介绍到这了