html5 vnc client 怎么使用

Virtual Network Computer 是一款优秀的远程控制工具软件，基本上是属于一种显示系统,也就是说它能将完整的窗口界面通过网络,传输到另一台计算机的屏幕上。

noVNC可以使用浏览器直接访问服务器而不需要使用VNC客户端，在某些特定的情况下，如项目有端口号限制等只能开80或443等，那么使用noVNC+Nginx做反向代理，就可以做到浏览器上远程访问了。

环境：

1.vncserver服务已经安装，服务启动正常。

2.#yum install git -y 安装git包

部署：

首先下载noVNC：

https://github.com/novnc/noVNC

https://github.com/novnc/websockify

下载上面两个链接包后上传到服务器上，并解压到/usr/local下。

打开终端

#cd /usr/local/noVNC-master

#./utils/launch.sh --vnc localhost:5901 //这里的5901是vncserver的端口号，按实际情况来

执行后会出现提示访问不了资源，然后novnc资源文件在

/root/.local/share/Trash/files/noVNC-master 目录下，打开这目录文件，把解压的websockify-master文件夹改名为websockify，把文件夹复制到/root/.local/share/Trash/files/noVNC-master/utils下。

由于VNC的默认会话不是安全的，我们需要创建一个安全的VNC连接。执行：

#openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

生成证书，放到/root/.local/share/Trash/files/noVNC-master/utils下。

改为：

http://192.168.200.134/novnc/vnc.html?host=192.168.200.134&port=80

步骤：

1.修改nginx

增加配置：

location /novnc

{

proxy_pass http://127.0.0.1:6080/novnc#修改为需要被反向代理的WebSocket的IP和端口号

}

location /websockify

{

proxy_pass http://127.0.0.1:6080/websockify#修改为需要被反向代理的WebSocket的IP和端口号

proxy_http_version 1.1

proxy_set_header Upgrade $http_upgrade

}123456

重启nginx。

2.在/root/.local/share/Trash/files/noVNC-master/下增加novnc文件夹，这个文件夹名字跟你配置的上下文名字相同。然后把

/root/.local/share/Trash/files/noVNC-master/ 文件夹下的文件复制一份到novnc文件夹下。

3.修改访问地址最后一个参数port,port=80

4.添加开机启动novnc，修改/etc/rc.local文件，添加

sh /root/.local/share/Trash/files/noVNC-master/novnc/utils/launch.sh --vnc localhost:5901

注：开机自启功能会导致无法正常使用vnc连接服务

IIS7服务器管理工具可以批量管理、定时上传下载、同步 *** 作、数据备份、到期提醒、自动更新。IIS7服务器管理工具适用于Windows *** 作系统和liunx *** 作系统；支持Vnc客户端和Ftp客户端批量 *** 作。

在Visual Studio 2012里的New Project下搜索关键字html5:

会出现：Html5Client 和Html5 MVC4 Razor Responsive Web Template 这两个工程模版。这两个工程模版非常棒，可以帮你快速生成Html5 的 Website.

Html5Client 工程模版

Html5Client 工程创建好以后，可以看到工程没有引用 .Net的dll，只有必要的页面，JavaScript，和图片，都是前端浏览器需要的东西：

Scripts 包含了一些常用库，如jQuery, bootstrap, knockout, modernizr, … 类似bootstrap，示例的几个页面也把常用的页面元素给列出来了：

在这个工程基础上，您可以开始裁剪，开始您自己的Html5Client工程了。

Html5 MVC4 Razor Responsive Web Template

Html5 MVC4 Razor Responsive Web Template 工程模版不同于Html5Client模版，这个模版加入了.Net的后端示例代码，可以快速搭起一个Asp.Net MVC4的响应式Website，其实这个模版是在原有的 MVC4 Razor工程模版基础之上，加入了Html5的响应式设计。

这个模版内置了jQuery mobile 库，同时为页面设计了Phone的View 和 Tablet 的View.

当开发Html5 Website时，使用Visual Studio 的这两个工程模版，搭建项目开始开发工作，应该会为您节约些时间，提高效率吧。

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。

1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。

具体代码：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'

}

---