【个人笔记】vue+xterm.js+novnc实现终端交互和远程桌面

介绍一个 VNC连接工具：iis7服务器管理工具
IIs7服务器管理工具可以批量连接并管理VNC服务器
作为服务器集成管理器，它最优秀的功能就是批量管理windows与linux系统服务器、vps。能极大的提高站长及服务器运维人员工作效率。同时iis7服务器管理工具还是vnc客户端，服务器真正实现了一站式管理，可谓是非常方便。
下载地址：http://fwqglgj.iis7.net/cp/vnc/?tscc

最近公司有一个项目需要实现页面终端交互，另一个是连接VNC，终端一开始是使用webshell实现的，如果直接用webshell的话，因为是前后端分离就避免不了要用iframe去嵌套，VNC同样，所以就把webshell更换成xterm.js，VNC更换成novnc，两个插件把iframe去掉了，此处做一个记录

由于xterm.js官方还是比较坑的，没什么比较完整的实例，在网上搜索的资料很多没有表明版本号导致浪费了很多的时间，此处先说使用版本xterm.js-------3.12.0 @novnc/novnc------1.1.0

#@novnc/novnc使用还是比较简单的，网上搜索基本问题不大
#html
<div id='shell'>
   <div id="screen"></div>
</div>

#先引入
import RFB from '@novnc/novnc/core/rfb'
#data参数
rfb:null,
url: 'ws://'......', //链接的url
IsClean: false, //是否已断开并不可重新连接
connectNum:0, //重连次数,

#methods
// vnc连接断开的回调函数
disconnectedFromServer (msg) {
    if(msg.detail.clean){
        // 根据 断开信息的msg.detail.clean 来判断是否可以重新连接
        this.contentVnc()
    } else {
        //这里做不可重新连接的一些操作
    }
},
// 连接成功的回调函数
connectedToServer() {
    console.log('success')
},

//连接vnc的函数

connectVnc () {
    const PASSWORD = this.pwd;
    let rfb = new RFB(documen