vue中使用novnc来构建虚拟化桌面

1.接到这个需求时，一脸懵，然后找了好久的文章，有些版本太低早已不适用，最后发现一篇文章，根据指导完成操作。现下我也记录一番。

2.安装

npm install @novnc/novnc

附上github地址 

https://github.com/novnc/noVNC/blob/master/docs/API.md 

3.使用

template

<div id="screen"  width="800" height="600">
//在此渲染
</div>

script

import RFB from '@novnc/novnc/core/rfb';
export default {
    mounted(){
        this.connectVnc()
    },
    methods:{
        // vnc连接断开的回调函数
        disconnectedFromServer (msg) {
          console.log(msg)
            if(msg.detail.clean){
                // 根据 断开信息的msg.detail.clean 来判断是否可以重新连接
                this.contentVnc()
            } else {
                //这里做不可重新连接的一些操作
            }
        },
        // 连接成功的回调函数
        connectedToServer(msg) {
            console.log('success',msg)
        },
        
        //连接vnc的函数      
        connectVnc () {
            const PASSWORD = '';
            const url='ws://ip/端口'
            let rfb = new RFB(document.getElementById('screen'), url, {
            // 向vnc 传递的一些参数，比如说虚拟机的开机密码等
                credentials: {password: PASSWORD }
            });
            rfb.addEventListener('connect', this.connectedToServer);
            rfb.addEventListener('disconnect', this.disconnectedFromServer);
            rfb.scaleViewport = true;  //scaleViewport指示是否应在本地扩展远程会话以使其适                    合其容器。禁用时，如果远程会话小于其容器，则它将居中，或者根据clipViewport它是否更大来处理。默认情况下禁用。
            rfb.resizeSession = true; //是一个boolean指示是否每当容器改变尺寸应被发送到调整远程会话的请求。默认情况下禁用
            console.log(rfb)
            this.rfb = rfb;
            
        },
    }
}

 注意：url应该是一个websocket地址，应该是对应的安装了novnc server的地址，（后端同学知道的）

至此就可以了