本人小白，如有问题，还望指出，虚心求教。

vue 使用 noVNC 实现虚机功能

noVNC API

Github

先来一波基础的~~

构造函数

RFB(target, url [, options])

返回一个RFB实例，表示与 VNC 服务器的单个连接。它使用必须提供标准 RFB 协议流的 WebSocket 进行通信。

参数

target: HTMLElement

指定RFB挂载的DOM元素，会在DOM元素里面追加canvas用来承载虚机窗口，DOM元素内容不会被清空。注意，需指定挂载容器的宽度高度。

url: String

有效的 WebSocket URL

options: Object
- shared: Boolean
指定远程服务器是否共享，如果不共享需要切断其他客户端连接，默认true
- credentials: Object
指定的凭据验证时提供给服务器。
```
  - username: String  进行身份验证的用户
  - password: String 用户密码
  - target: String 目标机器或会话
```
- repeaterID: String
指定VNC中继器
- wsProtocols: Array
指定websocket连接中使用的子协议，默认空

贴码

HTML结构

构建RFB实例

事件简介

connect：RFB实例与服务器完成握手时触发
disconnect：RFB实例与服务器端开连接时触发
credentialsrequired：创建连接时，需要提供更多凭据，通过实例方法 RFB.sendCredentials() 发送凭据
securityfailure：与服务器安全协商失败时触发
clipboard：从服务器收到剪贴板数据时触发
bell：从服务器收到可听见的响铃请求时触发
desktopname：远程桌面名称修改时触发
capabilities：RFB.capabilities 被更新时触发

贴码

初始化RFB对象监听事件

实例属性

viewOnly: Boolean

默认false，禁止向远程服务器发送任何鼠标或键盘事件，不能操作。

focusOnClick: Boolean

默认true，收到mousedown或touchstart事件时将键盘焦点自动移至远程会话。

clickViewport: Boolean

默认false，是否将远程会话窗口剪切来适配容器，如果为false，将通过滚动条处理溢出。

dragViewport: Boolean

默认false，禁止向远程服务器发送任何鼠标或键盘事件，不能操作。

scaleViewport: Boolean

默认false，自动缩放远程会话适应容器。如果指定false，远程会话小于容器会居中显示，如果大于容器，根据clipViewport处理。

resizeSession: Boolean

默认false，每当容器尺寸调整是否发送调整远程会话大小的请求。

showDotCursor: Boolean

默认false，如果服务器设置了不可见的光标，则应显示点光标而不是零大小或完全透明的光标。

background: String

默认rgb(40, 40, 40)，指定背景颜色。

qualityLevel: Integer [0-9]

默认6，指定图片质量。

其他属性自行阅读源码或者相关文档...

贴码

实例化RFB后修改属性

实例方法

RFB.disconnect()

手动断开连接

RFB.sendCredentials(credentials)

发送给服务器认证信息。在触发凭据要求事件后（credentialsrequired）应调用此方法。

RFB.sendKey(keysym，code [, down])

发送键盘事件，快点记小笔记。

RFB.sendCtrlAltDel()

发送ctrl-alt-del 快捷键事件，是一个 sendKey 简便包装器。

RFB.focus()

聚焦事件，键盘事件将被发送到远程服务器

RFB.blur()

失焦，键盘事件将不再发送到远程服务器

RFB.machineShutdown()

关机

RFB.machineReboot()

重启

RFB.machineReset()

重置计算机

RFB.clipboardPasteFrom(text)

将剪贴板内容发送到服务器。

小笔记：sendKey() 这个方法应该较为常用，这个单独细讲

RFB.sendKey( keysym, code [, down] )
keysym：long类型，指定RFB键符。（说实话我也不知道是什么，不过我从源码导出来了 'core/input/keysym.js'）
code：String类型，有效值是KeyboardEvent.code 值。（键盘事件对象的code值，具体查 Try it out）
down：Boolean类型，指定实在按下还是在释放的时候触发事件。如果省略（undefined），press和release都会被发送。

备注：

1、如果指定keysym有效值，code可以指定为null；反之，如果code指定有效值，keysym可指定为0。

2、一次只能发送一个按键

3、组合键如果发送，继续阅读下面的特殊处理。

贴码

sendKey调用

5.特殊处理

本文的精髓来了，主要也是基于 sendKey 方法，后续有其他使用或者特殊情况，会继续补充。

快捷键（组合键）使用

问题：浏览器的快捷键或者系统的快捷键，会无法发送到远程。
解决：外部提供快捷键下拉框，选择后手动发送，这里就要用sendKey方法。
码上：通过sengKey 的第三个参数 down，指定发送顺序达到模拟组合键按键以及释放的操作。

思路：就是查源码查看 sendCtrlAltDel 实例方法的实现（‘core/rfb.js’）