一、背景

概念介绍

> VNC（Virtual Network Computing）网络遥控技术是指由一部计算机（主控端）去控制另一部计算机（被控端），而且当主控端在控制端时，就如同用户亲自坐在被控端前操作一样，可以执行被控端的应用程序，及使用被控端的系统资源。

>  noVNC - the open source VNC client - it's is both a VNC client JavaScript library as well as an application built on top of that library. noVNC runs well in any modern browser including mobile browsers (iOS and Android).

noVNC是一个HTML5 VNC 客户端，被普遍用在各大云计算、虚拟机控制面板中，比如 OpenStack Dashboard 和 OpenNebula Sunstone。

noVNC采用WebSockets实现，但是目前大多数 VNC 服务器都不支持 WebSockets，所以 noVNC 是不能直接连接 VNC 服务器的，需要代理websockify来做 WebSockets（Http socket） 和 TCP sockets 之间的转换。

noVNC通过WebSockets访问服务器上vncserver提供的vnc服务，vnc服务把系统的命令行终端界面渲染成图形画布canvas返回，经过websockify 做tcp到websocket的转化，才能在html5中显示出来。

网页就是一个客户端，类似win下面的vncviewer，只是此时填的不是裸露的vnc服务的ip+port，而是由noVNC提供的websockets的代理，在noVNC代理服务器上要配置每个vnc服务，noVNC提供一个标识，去反向代理所配置的vnc服务。

主机webvnc登录方式

当前主机的webvnc采用的是开源的noNVC，部署在前端 的dws服务上。具体部署信息参考如下这张图。

dws部署在上海、北京和广州三个机房，通过判断，国内机房登录的话，就把登录请求转到华北机房的代理服务上websockify。海外机房再通过pathX加速包解析到海外对应的机房的代理服务上。

二、现状

现状：

目前只支持 按键协议一个字符一个字符的发送，和一个快捷键重启（Ctrl+Alt+Del），不支持字符串整个发送。

noVNC 兼容性：在需要支持H5的浏览器上运行，也就是说可以再所有主流的浏览器上运行，但不能在IE10 上运行。

主要支持如下：Chrome 49, Firefox 44, Safari 11, Opera 36, IE 11, Edge 12。

三、具体技术方案

获取浏览器剪切板内容方案

方案一（官方方案）：开源的第三方noVNC提供的Demo是支持复制粘贴功能的，也支持整个字符串发送，字符串发送利用的是rfb协议里面的clipboardPasteFrom方法。

开源的noVNC的粘贴功能原理： 通过侧边栏调出一个textarea标签，用户点击打开textarea，按键Ctr+v 从剪贴板拿到数据，粘到textarea上，然后enter通过rfb.clipboardPasteFrom发送。

此方案是因为canvas的stopPropagation和preventDefault事件，都被禁用了，利用textarea可以轻松获取剪切板里的内容，还可以选中里面的内容，达到复制的目的？

因为不可能对canvas做到选中内容并且复制的，canvas只是个图形画布。

方案二： 我们去除掉textarea标签，直接监听浏览器的'paste'事件，利用ClipboardEvent的clipboardData来获取到剪贴板的内容。

客户操作按键Ctrl+v时，监听到'paste'事件，拿到剪贴板的内容就发送出去。根据输入内容，模拟按键动作，发送命令，需注意后端处理速度