大家好！今儿咱们就来说说这个实际点儿的事儿——怎么把noVNC远程桌面加到咱的Vue项目里去。要是你有个项目想要能远程操控，那noVNC绝对是你的福音。接下来，我就给你们详细说说咋样用noVNC在Vue项目里玩转，还有些我自己的实践总结和小帖士。
什么是noVNC？
先简单说下啥叫noVNC，它就是个用HTML5开发的VNC客户端，用WebSocket、Canvas和JavaScript这些牛逼技术打造出来的。所以，我们不用安装软件，用浏览器就可以直接远程控制服务器咯~特别适合那些经常远程操控的人
为什么选择noVNC？
用noVNC来搞项目挺不错的。第一，它和现有的Vue项目搭配起来超顺溜，不用特地去设那个啥。第二个，noVNC对好多VNC服务器都兼容，你用的所有类型的VNC服务器都能用得上。再说，它的界面特别亲切，简单明了，小白也能一看就会用。
git clone git://github.com/novnc/noVNC
如何在Vue项目中引入noVNC？
npm install @novnc/novnc
Canvas not supported.
下面咱们来了解一下怎么把noVNC装进Vue项目里去！有两个办法可以搞定，要么就是把noVNC原始代码拉到你的项目文件夹里，要么用npm帮你搞定。但我觉得还是用npm好点，毕竟简单又省事儿，还能轻松管理版本！
引入noVNC的注意事项
import WebUtil from '../../noVNC/app/webutil.js'
import Base64 from '../../noVNC/core/base64.js'
import Websock from '../../noVNC/core/websock.js'
import '../../noVNC/core/des.js'
import '../../noVNC/core/input/keysymdef.js'
import '../../noVNC/core/input/xtscancodes.js'
import '../../noVNC/core/input/util.js'
import {Keyboard, Mouse} from '../../noVNC/core/input/devices.js'
import Display from '../../noVNC/core/display.js'
import '../../noVNC/core/inflator.js'
import RFB from '../../noVNC/core/rfb.js'
import '../../noVNC/core/input/keysym.js'
要装noVNC得留意几点。首先，你得保证你的项目能用WebSocket，这是noVNC实时传输要用到的东西。然后，它还得用个代理转Socket和WebSocket的数据，所以你得提前设置好这个代理。最后，有些功能可能还得服务器那边配合，所以用之前最好跟他们打声招呼。
实战案例分析
咱们来说说怎么在Vue项目里用noVNC！比如你想做个远程监控系统，能看到远方的摄像头画面，那就用noVNC就能搞定。先把noVNC装到Vue项目里，再在要显示远端画面的页面上加个noVNC的组件。接着设置下WebSocket代理，这样浏览器就能实时看远程摄像头画面咯。
使用noVNC遇到的问题及解决方案
用noVNC的时候，有时候会碰到点小麻烦。比如说，它在某些浏览器里就不太好用，或者连得特别慢。这时候，咱们试试换个浏览器看看，或者调调WebSocket代理设置。还有，有些高级功能可能要做点额外的设置，这时候去查查noVNC的官方文档就能找到答案。
connectVNC () {
var
DEFAULT_HOST = '',
DEFAULT_PORT = '',
DEFAULT_PASSWORD = "",
DEFAULT_PATH = "websockify"
;
var cRfb = null;
var oTarget = document.getElementById("noVNC_canvas");
let that = this
if (!this.currentEquipment) {
return
}
let novncPort = this.currentEquipment.novncPort
getNovncIp().then(function (resData) {
WebUtil.init_logging(WebUtil.getConfigVar("logging", "warn"));
var sHost = resData.data.content.ip || DEFAULT_HOST,
nPort = novncPort || DEFAULT_PORT,
sPassword = DEFAULT_PASSWORD,
sPath = DEFAULT_PATH
;
cRfb = new RFB({
"target": oTarget, // 目标
"focusContainer": top.document, // 鼠标焦点定位
"encrypt": WebUtil.getConfigVar("encrypt", window.location.protocol === "https:"),
"repeaterID": WebUtil.getConfigVar("repeaterID", ""),
"true_color": WebUtil.getConfigVar("true_color", true),
"local_cursor": WebUtil.getConfigVar("cursor", true),
"shared": WebUtil.getConfigVar("shared", true),
"view_only": WebUtil.getConfigVar("view_only", false),
"onFBUComplete": that._onCompleteHandler, // 回调函数
"onDisconnected": that._disconnected // 断开连接
});
// console.log('sHost:' + sHost + '--nPort:' + nPort)
cRfb.connect(sHost, nPort, sPassword, sPath);
})
},
noVNC的未来发展
所以，咱们再聊聊未来的noVNC。其实你知道吗？随着HTML5技术越来越牛逼，noVNC也变得更加强大起来了！我觉得以后，越来越多的VNC服务器都会开始支持WebSocket技术，这对于noVNC来说就省事很多。然后，noVNC的用户界面肯定还得再升级一下，这样才能让远程控制的感觉更好。
看了上面的解说，是不是觉得在Vue项目里用noVNC远程桌面并不难？尽管noVNC有点儿复杂，但只要按部就班，肯定能搞定远程控制这个事儿。希望我说的这些能帮到你们，要是用noVNC的时候有啥疑问，评论区见！还有，要是觉得本文挺好使，别忘了点个赞，分享出去，让更多小伙伴受益。感谢大家的支持！
评论0