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

 更新时间:2021年09月29日 16:07:13   作者:Linux丶晨星  
noVNC是一个 HTML5 VNC 客户端,采用 HTML 5 WebSockets, Canvas 和 JavaScript 实现,这篇文章主要介绍了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.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. 一键安装脚本

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

安装完成后桌面就会有快捷方式,天蓝色的是服务的快捷方式,浅绿色是远程连接的工具。同时系统托盘上会有一个天蓝色的眼睛图标的程序,这个就是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.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客户端上

下载windows7版的客户端软件openvpn-gui

https://www.techspot.com/downloads/5182-openvpn.html

进行连接

在另一台PC客户端上也生成证书进行连接访问

openvpn断开连接,则novnc的连接也随即断开

到此这篇关于NoVNC—以Web方式交付VNC远程连接的文章就介绍到这了,更多相关NoVNC Web方式交付VNC远程连接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • git push & git pull 推送/拉取分支的具体使用

    git push & git pull 推送/拉取分支的具体使用

    这篇文章主要介绍了git push & git pull 推送/拉取分支的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 解决maven第一次创建项目太慢的问题

    解决maven第一次创建项目太慢的问题

    Maven是 Apache 下的一个纯 Java 开发的开源项目,是一个项目构建和管理的工具;它提供了帮助管理 构建、文档、报告、依赖、scms、发布、分发的方法。这篇文章主要介绍了maven第一次创建项目太慢的解决方法,需要的朋友可以参考下
    2020-02-02
  • Django 使用 cookie 实现简单的用户管理功能

    Django 使用 cookie 实现简单的用户管理功能

    这篇文章主要介绍了Django 使用 cookie 实现简单的用户管理功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 分享下GET和POST的真正区别

    分享下GET和POST的真正区别

    如果有人问你,GET和POST,有什么区别?你会如何回答
    2013-02-02
  • Git 标签使用详解

    Git 标签使用详解

    这篇文章主要介绍了Git 标签使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 从Chrome App看微信小程序的发展前景

    从Chrome App看微信小程序的发展前景

    App的了解也许对我们对小程序的发张和前景的分析带来一定的帮助。接下来本教程给大家分享从Chrome App看微信小程序,感兴趣的朋友可以参考下
    2016-09-09
  • 一文带你了解ChatGPT API的使用

    一文带你了解ChatGPT API的使用

    ChatGPT是OpenAI公司开发的一款基于自然语言处理技术的对话生成模型,,能够自动学习自然语言数据的特征,并生成高质量的语言文本。本文将为大家来介绍一下ChatGPT的API使用,希望对大家有所帮助
    2023-02-02
  • 软件测试之使用Fiddler实现弱网测试

    软件测试之使用Fiddler实现弱网测试

    我们在做运维测试中会使用到到很多软件测试工具,本篇文章给大家分析一下软件测试,教大家在软件测试时来使用Fiddler实现弱网测试
    2021-08-08
  • SSO单点登录和OAuth2.0区别小结

    SSO单点登录和OAuth2.0区别小结

    很多时候我们会使用单点登录SSO或者OAuth2.0等身份验证和授权来实现登录,本文主要介绍了SSO单点登录和OAuth2.0区别小结,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • PHP实现HTML标签自动补全代码

    PHP实现HTML标签自动补全代码

    开发各种项目中经常遇到截取html字符串问题。 比如博客文章列表页面截取一部分正文、文章正文翻页截取等
    2012-10-10

最新评论