NOVNC
1.客户端部署
-
运行下列命令安装vnc:
sudo apt-get install x11vnc -
生成密码
sudo x11vnc -storepasswd yourVNCpasswordHERE /etc/x11vnc.pass //生成密码 -
开机启动
//15.04+ 系统 sudo nano /lib/systemd/system/x11vnc.service //16.10+ 系统 sudo nano /etc/systemd/system/x11vnc.service -
在打开的页面中插入以下代码
[Unit] Description="x11vnc" Requires=display-manager.service After=display-manager.service [Service] ExecStart=/usr/bin/x11vnc -xkb -noxrecord -noxfixes -noxdamage -display :0 -auth guess -rfbauth /etc/x11vnc.pass ExecStop=/usr/bin/killall x11vnc Restart=on-failure Restart-sec=2 [Install] WantedBy=multi-user.target -
执行命令
sudo systemctl daemon-reload sudo systemctl start x11vnc -
确保在服务启动时启动
sudo systemctl enable x11vnc
2.服务端部署
- 在服务端机器上从Github将novnc下载
- 创建token.conf文件，写入客户端IP,格式：
test1: 192.168.11.239:5900 test1: 192.168.11.240:5900 //:后面必须有空格 - 启动novnc
./utils/websockify/websockify.py ./ --target-config=/home/ceeety/data/token/token.conf 8787
3. 连接测试
- 通过vnc_lite.html访问
- 打开拉取下来的项目中的vnc_lite.html文件,需要修改host、post、password、token
var host = WebUtil.getConfigVar('host', '192.168.11.241'); //服务端ip var port = WebUtil.getConfigVar('port', '8787'); //端口 var password = WebUtil.getConfigVar('password', 'ceeety'); //客户端密码 var token = WebUtil.getConfigVar('token', 'test'); //token.conf中客户端ip对应name - 运行vnc_lite.html页面,上一步没有修改密码时，需要输入密码。测试连接。
- 打开拉取下来的项目中的vnc_lite.html文件,需要修改host、post、password、token
- 通过vnc.html访问
- 运行vnc.html,在左侧填写连接信息，测试连接。
4. 集成
- 多客户端同时连接
| name | type | mode | default | description |
|---|---|---|---|---|
| target | DOM | WO | null | 用于渲染的画布元素(id) |
| encrypt | bool | RW | false | 使用TLS / SSL加密 |
| local_cursor | bool | RW | false | Request locally rendered cursor |
| shared | bool | RW | true | 请求共享VNC模式 |
| view_only | bool | RW | false | 仅监控，不能操作 |
| focus_on_click | bool | RW | true | 点击 |
| xvp_password_sep | str | RW | '@' | Separator for XVP password fields |
| disconnectTimeout | int | RW | 3 | 连接超时 |
| wsProtocols | arr | RW | ['binary'] | 使用 WebSocket connection |
| repeaterID | str | RW | '' | UltraVNC RepeaterID to connect to |
| viewportDrag | bool | RW | false | 鼠标拖动移动窗口 |
```
<!DOCTYPE html>
<html>
<head>
<title>屏幕监控</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="module" crossorigin="anonymous">
// 引入核心js
import * as WebUtil from './app/webutil.js';
import RFB from './core/rfb.js';
var rfb1;
var rfb2;
var resizeTimeout;
var desktopName;
//客户端窗口发生变化,页面刷新
function UIresize() {
if (WebUtil.getConfigVar('resize', false)) {
var innerW = window.innerWidth;
var innerH = window.innerHeight;
var controlbarH = document.getElementById('noVNC_status_bar').offsetHeight;
if (innerW !== undefined && innerH !== undefined)
rfb.requestDesktopSize(innerW, innerH - controlbarH);
}
}
//客户端机器名称
function updateDesktopName(rfb, name) {
desktopName = name;
}
//CtrlAltDel命令 rfb.sendCtrlAltDel();
//重启命令 rfb.xvpReboot();
//关机命令 rfb.xvpShutdown();
//注销命令 rfb.xvpReset();
//重绘命令
window.onresize = function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function () {
UIresize();
}, 500);
};
WebUtil.init_logging(WebUtil.getConfigVar('logging', 'warn'));
document.title = WebUtil.getConfigVar('title', 'noVNC');
var host = WebUtil.getConfigVar('host', '192.168.11.241');
var port = WebUtil.getConfigVar('port', '8787');
if (!port) {
if (window.location.protocol.substring(0, 5) == 'https') {
port = 443;
}
else if (window.location.protocol.substring(0, 4) == 'http') {
port = 80;
}
}
//多个设备多个密码
var password1 = WebUtil.getConfigVar('password', 'ceeety');
var password2 = WebUtil.getConfigVar('password', '123456');
var path = WebUtil.getConfigVar('path', 'websockify');
// If a token variable is passed in, set the parameter in a cookie.
// This is used by nova-novncproxy.
var token1 = WebUtil.getConfigVar('token', 'test');
var token2 = WebUtil.getConfigVar('token', 't1');
if (token1) {
// if token is already present in the path we should use it
//多个设备多个token值
var path1 = WebUtil.injectParamIfMissing(path, "token", token1);
var path2 = WebUtil.injectParamIfMissing(path, "token", token2);
}
(function () {
if ((!host) || (!port)) {
status('Must specify host and port in URL', 'error');
}
try {
//多个设备需要定义多个rfb2,指定不同的target
rfb2 = new RFB({
'target': document.getElementById('noVNC_canvas2'),
'encrypt': WebUtil.getConfigVar('encrypt',
(window.location.protocol === "https:")),
'repeaterID': WebUtil.getConfigVar('repeaterID', ''),
'local_cursor': WebUtil.getConfigVar('cursor', true),
'shared': WebUtil.getConfigVar('shared', true),
'view_only': WebUtil.getConfigVar('view_only', true), //true: 仅视图 false: 可以鼠标键盘操作
});
rfb1 = new RFB({
'target': document.getElementById('noVNC_canvas1'),
'encrypt': WebUtil.getConfigVar('encrypt',
(window.location.protocol === "https:")),
'repeaterID': WebUtil.getConfigVar('repeaterID', ''),
'local_cursor': WebUtil.getConfigVar('cursor', true),
'shared': WebUtil.getConfigVar('shared', true),
'view_only': WebUtil.getConfigVar('view_only', true), //true: 仅视图
});
} catch (exc) {
status('Unable to create RFB client -- ' + exc, 'error');
return; // don't continue trying to connect
}
console.log(host + " " + port);
console.log("rfb1：" + password1 + " " + path1);
console.log("rfb2：" + password2 + " " + path2);
//通过rfb2连接 rfb.disconnect(); 断开连接
rfb2.connect(host, port, password1, path1);
rfb1.connect(host, port, password2, path2);
})();
</script>
</head>
<body>
1.
<canvas id="noVNC_canvas1"> //设置渲染的画布id
Canvas not supported1.
</canvas>
2.
<canvas id="noVNC_canvas2">
Canvas not supported2.
</canvas>
</body>
</html>
```
- 等比例缩放
在rfb.js中的 _resize: function(width, height) 方法中添加以下代码this._display.autoscale(540,192,1);
网友评论