逐梦论坛 » 网络文章 » noVNC在Windows下的安装配置

shillan 发表于 2018-4-8 16:18

noVNC在Windows下的安装配置

一、实现功能目标：通过浏览器远程访问Windows桌面。原理：浏览器不支持VNC，所以不能直接连接VNC，但是可以使用代理，使用noVNC通过WebSocket建立连接，而VNC Server不支持WebSocket，所以需要开启Websockify代理来做WebSocket和TCP Socket之间的转换。
二、准备工作
1、测试环境：Windows 7
2、UltraVNC：[url=http://www.uvnc.com/]http://www.uvnc.com/[/url]（Windows环境下的VNC Server，当然还有TightVNC、TigerVNC、RealVNC等，其中RealVNC不能通过noVNC）
3、Node.js：[url=https://nodejs.org/en/download/]https://nodejs.org/en/download/[/url]（用于执行Websockify.js。Websockify还有Python版本的，不过在Windows下没有成功）
4、noVNC：[url=http://github.com/kanaka/noVNC/zipball/master]http://github.com/kanaka/noVNC/zipball/master[/url]
5、Websockify：[url=https://github.com/novnc/websockify/archive/master.zip]https://github.com/novnc/websockify/archive/master.zip[/url]
三、具体操作
1、安装UltraVNC Server 并开启服务(安装后设置密码)
[img]https://img-blog.csdn.net/20170310164622567?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
[img]https://img-blog.csdn.net/20170310164824208?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
2、安装Node.js
安装时选择npm package manager
[img]https://img-blog.csdn.net/20170310165037927?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
安装ws、optimist模块(执行websockify.js文件所需)
C:\Users\Administrator>[color=#ff0000]npm install ws[/color]
[quote]npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN Administrator No description
npm WARN Administrator No repository field.
npm WARN Administrator No README data
npm WARN Administrator No license field.

+ [url=mailto:ws@5.1.0]ws@5.1.0[/url]
added 2 packages in 1.836s
[/quote]
C:\Users\Administrator>[color=#ff0000]npm install optimist[/color]
[quote]npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN Administrator No description
npm WARN Administrator No repository field.
npm WARN Administrator No README data
npm WARN Administrator No license field.

+ [url=mailto:optimist@0.6.1]optimist@0.6.1[/url]
added 3 packages in 1.497s
[/quote]

C:\Users\Administrator>[color=#ff0000]npm install mime-types[/color]

[quote]npm notice created a lockfile as package-lock.json. You should commit this file.

+ [url=mailto:mime-types@2.1.18]mime-types@2.1.18[/url]
added 2 packages in 3.666s
[/quote]
[img]https://img-blog.csdn.net/20170310165046677?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
[img]https://img-blog.csdn.net/20170310165053053?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
安装完ws和optimist后会在C:\Users\Administrator\下生成node_modules目录
3、把noVNC.zip解压到node_modules目录下，再把websockify-master.zip解压到noVNC目录下。
[img]https://img-blog.csdn.net/20170310165101459?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
4、执行websockify.js：转发9000端口的http链接到5900端口（UltraVNC Server的默认端口为5900）
C:\Users\Administrator\node_modules\noVNC\websockify-master\other\js>[color=#ff0000]node websoc[size=12px]kify.js --web C:\Users\Administrator\node_modules\noVNC 9000 10.1.0.112:5900[/size][/color]

[quote]WebSocket settings:
    - proxying from :9000 to 10.1.0.112:5900
    - Web server active. Serving: C:\Users\Administrator\node_modules\noVNC
    - Running in unencrypted HTTP (ws://) mode
[/quote]
[img]https://img-blog.csdn.net/20170310165111366?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
5、在浏览器地址栏输入[url=http://192.168.1.163:9000/]http://192.168.1.163:9000/[/url]（服务器端IP：192.168.1.163）会提示：
[img]https://img-blog.csdn.net/20170310165118585?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
这时候只要在websockify.js中搜索filename += ‘/index.html’改成filename += ‘/vnc.html’，再重复第4、5步 点击Connect输入UltraVNC设置的密码 完成。
[img]https://img-blog.csdn.net/20170310165154554?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMyMjIxMzI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]

shillan 发表于 2018-6-20 11:31

经测试，noVNC与TightVNC及或TigerVNC搭配都可以使用，与RealVNC搭配不可用。
三者的TCP端口都是5900，Java Web端口都是5800。
在保持RealVNC的5800和5900端口不变的情况下（原来已经安装RealVNC，不对其进行更改），安装TightVNC或TigerVNC，并修改其TCP和Java Web端口分别为6900和6800，则：
C:\Users\Administrator\node_modules\noVNC\websockify-master\other\js>[color=Red]node websockify.js --web C:\Users\Administrator\node_modules\noVNC 8000 10.1.0.112:[b]6900[/b][/color]

shillan 发表于 2018-6-20 13:02

相关文章

[color=#000][font=MuseoSans, Trebuchet, &quot][size=28px]noVNC的使用之一[/size][/font][/color]

[indent][p=28, 2, left]noVNC是一个HTML5 VNC客户端，采用HTML5 websockets、Canvas和JavaScript实现，noVNC被普遍应用于各大云计算、虚拟机控制面板中，比如OpenStack Dashboard 和 OpenNebula Sunstone 都用的是 noVNC. 前面说了 noVNC 采用 WebSockets 实现，但是目前大多数 VNC 服务器都不支持 WebSockets，所以 noVNC 是不能直接连接 VNC 服务器的，怎么办呢？这就需要一个代理来实现websockets和tcp sockets之间的转换，这个代理就是websockify。[/p][/indent]vncserver安装和使用[p=28, 2, left]vncserver是用来实现远程桌面连接的，比如说你由两台机器PC1：192.168.1.101和PC2：192.168.1.102，如果你想在PC1上访问PC2的桌面，就需要在PC2上安装vncserver，然后在PC1上通过vncviewer或noVNC访问PC2。下面以tigervnc-server为例来介绍一下vncserver的安装和使用。[/p]安装[font=MuseoSans, Trebuchet, &quot][size=16px]yum -y install tigervnc-server[/size][/font]
[p=28, 2, left]安装完后，查看vncserver的配置文件：[/p][font=MuseoSans, Trebuchet, &quot][size=16px][root@mycentos liushaolin]# rpm -qc tigervnc-server/etc/sysconfig/vncservers[/size][/font]
[p=28, 2, left]在该配置文件中可以修改vncserver的配置，比如远程桌面的sessionnumber，登录时的用户名，屏幕分辨率等等。[/p]启动sncserver[font=MuseoSans, Trebuchet, &quot][size=16px]vncserver或vncserver :n[/size][/font]
[p=28, 2, left]这里的n就是sessionnumber，不指定的话默认为1，第一次启动时会提示输入密码，以后也可以使用vncpasswd命令修改密码。[font=inherit]VNC的默认端口号是5900，而远程桌面连接端口号则是5900+n[/font]。如果使用“vncserver :1”命令启动VNC Server，那么端口应该是5901。[/p]查看连接[font=MuseoSans, Trebuchet, &quot][size=16px]vncserver -list[root@mycentos liushaolin]# vncserver -listTigerVNC server sessions:X DISPLAY #        PROCESS ID:1                5918:3                7726[/size][/font]
删除连接[font=MuseoSans, Trebuchet, &quot][size=16px]vncserver -kill :n[/size][/font]
使用noVNC连接VNC servernoVNC的工作原理[p=28, 2, left]noVNC提供一种在网页上通过html5的Canvas，访问机器上vncserver提供的vnc服务，需要做tcp到websocket的转化，才能在html5中显示出来。网页就是一个客户端，类似win下面的vncviewer，只是此时填的不是裸露的vnc服务的ip+port，而是由noVNC提供的websockets的代理，在noVNC代理服务器上要配置每个vnc服务，noVNC提供一个标识，去反向代理所配置的vnc服务。[/p]noVNC的使用[p=28, 2, left]假设我们在PC2上创建了一个VNC连接，sessionnumber是1，端口号为5901。noVNC可以和vncserver在一台机器上，也可以不在一台机器上。[/p][p=28, 2, left][font=inherit]简单用法[/font][/p][p=28, 2, left]安装noVNC[/p][font=MuseoSans, Trebuchet, &quot][size=16px]$git clone [url]https://github.com/kanaka/noVNC[/url]$cd noVNC$./utils/launch.sh --vnc localhost:5901[/size][/font]
[p=28, 2, left]启动launch脚本，会输出如下信息：[/p][font=MuseoSans, Trebuchet, &quot][size=16px]WebSocket server settings:  - Listen on :6080  - Flash security policy server  - Web server. Web root: /root/noVNC  - No SSL/TLS support (no cert file)  - proxying from :6080 to localhost:5901Navigate to this URL:    http://localhost:6080/vnc.html?host=localhost&port=6080[/size][/font]
[p=28, 2, left]这时，访问http://localhost:6080/vnc.html?host=localhost&port=6080或http://localhost:6080/vnc.html，然后输入Host地址，端口号，密码，token，其中密码和token有的话需要输入，然后连接即可。当然你可以从PC1的浏览器中输入PC2的IP地址访问。[/p][p=28, 2, left]整个流程大概是这样的：[/p][p=28, 2, left]vnc.html -> 192.168.1.102:6080（PC2） -> websockify.py -> localhost:5901[/p][p=28, 2, left][font=inherit]高级用法[/font][/p][p=28, 2, left]使用websockify可以更改默认6080端口，使用token设置。[/p][p=28, 2, left][font=inherit]用法：[/font]./utils/websockify/websockify.py --web ./ 8787 localhost:5901[/p][p=28, 2, left]--web ./指定访问根目录，8787表示访问novnc的端口，localhost可以改成所有安装了vncserver的IP地址，比如：./utils/websockify/websockify.py --web ./ 8787 192.169.1.100:5901。[/p]使用token[p=28, 2, left][font=inherit]为什么使用token？[/font][/p][p=28, 2, left]我们上面的场景是基于noVNC代理和vncserver在同一台机器上的，倘若我们想通过noVNC访问局域网中的所有机器，难道要给每一台机器都安装配置noVNC，然后用每台机器的IP地址去访问它吗？显然这种做法是繁琐笨拙的。实际上，我们只需要一台机器作为noVNC代理，其他被访问的机器安装VNC server就可以了。如下图：[/p][p=28, 2, left][img=640,0]http://vosamo.github.io/2016/07/noVNC%E7%9A%84%E4%BD%BF%E7%94%A8%E4%B9%8B%E4%B8%80/[/img][/p][p=28, 2, left]在上图中，我们用一台机器作为代理，IP：192.168.1.10，另外两台机器PC1：192.168.1.101和PC2：192.168.1.102上面安装vncserver，我们怎么通过代理去访问PC1和PC2呢？这就需要token大显身手了。[/p][p=28, 2, left]我们需要在代理机器上创建一个token配置文件，假设为/home/token/token.conf，文件内容为：[/p][font=MuseoSans, Trebuchet, &quot][size=16px]abc123: 192.168.1.101:5900123abc: 192.168.1.102:5901[/size][/font]
[p=28, 2, left]首先，在欲访问的机器上启动vncserver，执行命令vncserver即可。[/p][p=28, 2, left]然后，在代理机器上输入命令：./utils/websockify/websockify.py --web ./ --target-config=./token/token.conf 8787。[/p][p=28, 2, left]接下来，访问192.168.1.10:8787/vnc.html，输入对应的token即可访问相应的机器了。[/p]使用vnc_auto.html[p=28, 2, left]在vnc_auto.html中写入noVNC代理的配置[/p][font=MuseoSans, Trebuchet, &quot][size=16px]host = "192.168.1.10";port = 8787;path = "websockify/?token=xxxxxx";[/size][/font]
[p=28, 2, left]然后直接访问192.168.1.10:8787/vnc_auto.html即可连接。[/p]问题排查[p=28, 2, left]如果输入host地址，port之后，不能访问，查看密码是否正确，如果显示connection refused，查看被访问主机vncserver是否启动，如果未启动，执行vncserver。[/p][p=28, 2, left]注意：使用noVNC每个系统桌面或者虚拟机每次只能有一个连接，如果连接时出现错误Server disconnected (code: 1000, reason: Target closed)，也有可能是你已经连接了或者在virt-manager里面启动了虚拟机并进入了系统桌面。[/p]

shillan 发表于 2018-6-20 13:16

通过 noVNC 实现数千台自助机的实时可视化：[url]http://www.udpwork.com/item/16089.html[/url]
Windows下网页连接VNC操作手册：[url]https://blog.csdn.net/mrliqifeng/article/details/73825934[/url]
Windows远程桌面实现之四（在现代浏览器中通过普通页面访问远程桌面）：Windows远程桌面实现之四（在现代浏览器中通过普通页面访问远程桌面）
通过noVNC实现远程连接windows桌面：[url]https://www.jianshu.com/p/496470a760ab[/url]
webvnc之novnc实战：[url]https://blog.csdn.net/happyteafriends/article/details/41344751[/url]
noVNC+VNCserver实现远程访问Docker容器桌面：[url]https://blog.csdn.net/u012829611/article/details/72576493[/url]
noVNC连接CentOS，以Web方式交付VNC远程连接：[url]https://www.cnblogs.com/liqing1009/p/8039230.html[/url]

查看完整版本: noVNC在Windows下的安装配置