最近公司有个项目要求远程虚拟机，最后选择使用了Guacamole进行实现，网上搜了一下感觉资料不是很多，对guacamole-common.js里的API介绍也没查到（捂脸），可能是我的问题。网上的教程都是教后端怎么搭建远程桌面系统。对web端使用的资料很少，可能大佬们觉着不需要(╥╯^╰╥)。下面我把在项目中用到的一下方法，总结一下，万一有人也需要呐。哈哈

1. 下载guacamole-common或者直接引入guacamole-common.js文件；

2. 在项目中的引用

   初始化Guacamole
   const initGuacamole = () => {
   // XXXXX 后端提供的连接地址
   guacamole.tunnel = new Guacamole.WebSocketTunnel(‘XXXXX’)

     if (guacamole.client) {guacamole.display.scale(0)uninstallKeyboard()}guacamole.client = new Guacamole.Client(guacamole.tunnel)guacamole.tunnel.onerror = error => {// console.error(`Tunnel failed ${JSON.stringify(error)}`)// 这里是断开重连的机智 当code值是下面这些时会进行重连5次，if (error.code === 512 || error.code === 514 || error.code === 515 || error.code === 769 || error.code === 776) {if (guacamole.curRetryCount === 0) {guacamole.retryTask = setInterval(() => {if (guacamole.curRetryCount < guacamole.maxRetryCount) {uninstallKeyboard()nextTick(() => {initGuacamole('error')})guacamole.curRetryCount++} else if (guacamole.curRetryCount >= guacamole.maxRetryCount) {guacamole.loading = falseguacamole.loadingText = ''uninstallKeyboard()clearInterval(guacamole.retryTask)guacamole.retryTask = null}}, 3000)}}else {if (!guacamole.retryTask) {guacamole.loading = falseguacamole.loadingText = ''}}}guacamole.tunnel.onstatechange = state => {// console.log('tunnel.onstatechange',Guacamole.Tunnel.State,state);switch (state) {case Guacamole.Tunnel.State.CONNECTING:guacamole.connectionState = TUNNEL_STATES.CONNECTINGbreak;// Connection is established / no longer unstablecase Guacamole.Tunnel.State.OPEN:guacamole.connectionState = TUNNEL_STATES.CONNECTEDbreak;// Connection is established but misbehavingcase Guacamole.Tunnel.State.UNSTABLE:// TODOguacamole.connectionState = '不稳定'// this.$message.error("不稳定")break;// Connection has closedcase Guacamole.Tunnel.State.CLOSED:guacamole.connectionState = TUNNEL_STATES.DISCONNECTEDbreak;}}guacamole.client.onstatechange = clientState => {// console.log('clientState', clientState,  TUNNEL_STATES);switch (clientState) {case 0:guacamole.connectionState = TUNNEL_STATES.IDLEbreakcase 1:// connecting ignored for some reason?breakcase 2:guacamole.connectionState = TUNNEL_STATES.WAITINGbreakcase 3:guacamole.connectionState = TUNNEL_STATES.CONNECTED// 取消加载guacamole.loading = falseguacamole.loadingText = ''// 重连清空定时器和次数guacamole.curRetryCount = 0clearInterval(guacamole.retryTask)guacamole.retryTask = null//监听视图变化，并发送最新的宽高给Guacamole进行重新绘制window.addEventListener('resize', resize)case 4:case 5:// disconnected, disconnectingbreak}}guacamole.client.onerror = error => {guacamole.client.disconnect()console.error(`Client error ${JSON.stringify(error)}`)}guacamole.display = guacamole.client.getDisplay()display.value.appendChild(guacamole.display.getElement())display.value.addEventListener('contextmenu', e => {e.stopPropagation();if (e.preventDefault) {e.preventDefault();}e.returnValue = false;})// 后端需要的参数let param = {userName: '',password: '',type: 'VNC/RDP'}guacamole.client.connect(param);// 视图大小发生变化时触发(rdp和VNC同时连接时rdp可以动态设置分辨率，但是VNC不可以，所以前端可以通过onresize拿到rdp连接后，VNC通道拿到流的宽高进行等比缩放)guacamole.display.onresize = function(width, height) {const resizeScale = Math.min(viewport.value.clientWidth / Math.max(guacamole.display.getWidth(), 1), viewport.value.clientHeight / Math.max(guacamole.display.getHeight(), 1))guacamole.display.scale(resizeScale)}window.onunload = () => guacamole.client.disconnect();// 解决连接多个虚拟机时有的虚拟机不能查看z-index: -1guacamole.client.getDisplay().scale(1)display.value.onclick = () => {display.value.focus()}display.value.onfocus = () => {display.value.className = 'focus'}display.value.onblur = () => {display.value.className = ''}guacamole.keyboard = new Guacamole.Keyboard(display.value);installKeyboard()// Mouse 参数最好使用guacamole.client.getDisplay().getElement()，之前写的是父级元素，会导致出现两个鼠标的问题guacamole.mouse = new Guacamole.Mouse(guacamole.client.getDisplay().getElement());// 鼠标离开显示器时隐藏软件光标guacamole.mouse.onmouseout = () => {if (!guacamole.display) return;guacamole.display.showCursor(false);}guacamole.mouse.onmousedown = guacamole.mouse.onmouseup = guacamole.mouse.onmousemove = handleMouseStatesetTimeout(() => {resize()display.value.focus()}, 1000);//居中显示(当返回的流宽高小于屏幕宽高时)guacamole.client.getDisplay().getElement().style.setProperty('margin', 'auto')
   }
   

3. 缩放方法

   const resize = () => {
   const elm = viewport.value;
   if (!elm || !elm.offsetWidth) {
   return
   }
   // let pixelDensity = window.devicePixelRatio || 1 （pixelDensity 获取当前电脑的分辨率百分比）
   let pixelDensity = 1
   const width = elm.clientWidth * pixelDensity
   const height = elm.clientHeight * pixelDensity
   if (guacamole.display.getWidth() !== width || guacamole.display.getHeight() !== height) {
   guacamole.client.sendSize(width, height)
   }
   // setting timeout so display has time to get the correct size
   setTimeout(() => {
   // 计算缩放比例
   const scale = Math.min(
   elm.clientWidth / Math.max(guacamole.display.getWidth(), 1),
   elm.clientHeight / Math.max(guacamole.display.getHeight(), 1)
   )
   // guacamole.display.scale(1)
   if (props.websocketUrl === ‘/webSocket’) {
   guacamole.display.scale(1)
   }else {
   guacamole.display.scale(scale)
   }
   }, 1000)
   }

4. html

以上就是我在项目中的使用情况
1、连接Tunnel
guacamole.tunnel = new Guacamole.WebSocketTunnel(props.websocketUrl)
2、把流放到视图中
guacamole.client = new Guacamole.Client(guacamole.tunnel)
3、监听tunnel和client 的值进行状态判断
4、把流添加到视图中
guacamole.client.getDisplay().appendChild(guacamole.display.getElement())
5、给后端传参
let param = {userName: ’ ',password: ’ '}
guacamole.client.connect(param);
6、断开虚拟机连接
guacamole.client.disconnect();
7、键盘事件
// display.value div元素
new Guacamole.Keyboard(display.value)
8、鼠标事件
new Guacamole.Mouse(guacamole.client.getDisplay().getElement());