NOVNC
1.客戶端部署
-
運(yùn)行下列命令安裝vnc:
sudo apt-get install x11vnc -
生成密碼
sudo x11vnc -storepasswd yourVNCpasswordHERE /etc/x11vnc.pass //生成密碼 -
開機(jī)啟動(dòng)
//15.04+ 系統(tǒng) sudo nano /lib/systemd/system/x11vnc.service //16.10+ 系統(tǒng) 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 -
執(zhí)行命令
sudo systemctl daemon-reload sudo systemctl start x11vnc -
確保在服務(wù)啟動(dòng)時(shí)啟動(dòng)
sudo systemctl enable x11vnc
2.服務(wù)端部署
- 在服務(wù)端機(jī)器上從Github將novnc下載
- 創(chuàng)建token.conf文件，寫入客戶端IP,格式：
test1: 192.168.11.239:5900 test1: 192.168.11.240:5900 //:后面必須有空格 - 啟動(dòng)novnc
./utils/websockify/websockify.py ./ --target-config=/home/ceeety/data/token/token.conf 8787
3. 連接測(cè)試
- 通過vnc_lite.html訪問
- 打開拉取下來的項(xiàng)目中的vnc_lite.html文件,需要修改host、post、password、token
var host = WebUtil.getConfigVar('host', '192.168.11.241'); //服務(wù)端ip var port = WebUtil.getConfigVar('port', '8787'); //端口 var password = WebUtil.getConfigVar('password', 'ceeety'); //客戶端密碼 var token = WebUtil.getConfigVar('token', 'test'); //token.conf中客戶端ip對(duì)應(yīng)name - 運(yùn)行vnc_lite.html頁面,上一步?jīng)]有修改密碼時(shí)，需要輸入密碼。測(cè)試連接。
- 打開拉取下來的項(xiàng)目中的vnc_lite.html文件,需要修改host、post、password、token
- 通過vnc.html訪問
- 運(yùn)行vnc.html,在左側(cè)填寫連接信息，測(cè)試連接。
4. 集成
- 多客戶端同時(shí)連接
| 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 | 請(qǐng)求共享VNC模式 |
| view_only | bool | RW | false | 僅監(jiān)控，不能操作 |
| focus_on_click | bool | RW | true | 點(diǎn)擊 |
| xvp_password_sep | str | RW | '@' | Separator for XVP password fields |
| disconnectTimeout | int | RW | 3 | 連接超時(shí) |
| wsProtocols | arr | RW | ['binary'] | 使用 WebSocket connection |
| repeaterID | str | RW | '' | UltraVNC RepeaterID to connect to |
| viewportDrag | bool | RW | false | 鼠標(biāo)拖動(dòng)移動(dòng)窗口 |
```
<!DOCTYPE html>
<html>
<head>
<title>屏幕監(jiān)控</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;
//客戶端窗口發(fā)生變化,頁面刷新
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);
}
}
//客戶端機(jī)器名稱
function updateDesktopName(rfb, name) {
desktopName = name;
}
//CtrlAltDel命令 rfb.sendCtrlAltDel();
//重啟命令 rfb.xvpReboot();
//關(guān)機(jī)命令 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;
}
}
//多個(gè)設(shè)備多個(gè)密碼
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
//多個(gè)設(shè)備多個(gè)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 {
//多個(gè)設(shè)備需要定義多個(gè)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: 可以鼠標(biāo)鍵盤操作
});
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"> //設(shè)置渲染的畫布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);
