Improved MSTSC.js support.

This commit is contained in:
Ylian Saint-Hilaire 2020-06-10 15:25:46 -07:00
parent 14c08ce461
commit 61582dbd17
13 changed files with 169 additions and 7400 deletions

View File

@ -121,8 +121,7 @@
<Compile Include="mqttbroker.js" />
<Compile Include="mstsc.js" />
<Compile Include="pluginHandler.js" />
<Compile Include="public\mstsc\js\canvas.js" />
<Compile Include="public\mstsc\js\client.js" />
<Compile Include="public\mstsc\client.js" />
<Compile Include="public\mstsc\js\keyboard.js" />
<Compile Include="public\mstsc\js\mstsc.js" />
<Compile Include="public\mstsc\js\rle.js" />
@ -462,7 +461,6 @@
<Content Include="public\images\mapmarker.png" />
<Content Include="public\images\meshicon50.png" />
<Content Include="public\images\trash.png" />
<Content Include="public\mstsc\css\bootstrap.min.css" />
<Content Include="public\mstsc\css\signin.css" />
<Content Include="public\mstsc\index.html" />
<Content Include="public\mstsc\keymap.html" />

View File

@ -58,8 +58,14 @@ module.exports.CreateMstscRelay = function (parent, db, ws, req, args, domain, u
obj.relaySocket.on('end', function () { obj.close(0); });
obj.relaySocket.on('error', function (err) { obj.close(0); });
// TODO: Use correct URL with domain and use TLS only if needed.
obj.wsClient = new WebSocket('wss://127.0.0.1/meshrelay.ashx?auth=' + obj.infos.ip, { rejectUnauthorized: false });
// Setup the correct URL with domain and use TLS only if needed.
var options = { rejectUnauthorized: false };
if (domain.dns != null) { options.servername = domain.dns; }
var protocol = 'wss';
if (args.notls || args.tlsoffload) { protocol = 'ws'; }
var domainadd = '';
if ((domain.dns == null) && (domain.id != '')) { domainadd = domain.id + '/' }
obj.wsClient = new WebSocket(protocol + '://127.0.0.1/' + domainadd + 'meshrelay.ashx?auth=' + obj.infos.ip, options);
obj.wsClient.on('open', function () { });
obj.wsClient.on('message', function (data) { if ((obj.relayActive == false) && (data == 'c')) { obj.relayActive = true; obj.relaySocket.resume(); } else { obj.relaySocket.write(data); } });
@ -72,6 +78,7 @@ module.exports.CreateMstscRelay = function (parent, db, ws, req, args, domain, u
// Start the RDP client
function startRdp(port) {
try {
rdpClient = require('node-rdpjs-2').createClient({
logLevel: 'ERROR',
domain: obj.infos.domain,
@ -92,19 +99,28 @@ module.exports.CreateMstscRelay = function (parent, db, ws, req, args, domain, u
}).on('error', function (err) {
send(['rdp-error', err]);
}).connect('127.0.0.1', obj.tcpServerPort);
} catch (ex) {
console.log('startRdpException', ex);
obj.close(0);
}
}
// When data is received from the web socket
// RDP default port is 3389
ws.on('message', function (msg) {
msg = JSON.parse(msg);
switch (msg[0]) {
case 'infos': { obj.infos = msg[1]; startTcpServer(); break; }
case 'mouse': { if (rdpClient) { rdpClient.sendPointerEvent(msg[1], msg[2], msg[3], msg[4]); } break; }
case 'wheel': { if (rdpClient) { rdpClient.sendWheelEvent(msg[1], msg[2], msg[3], msg[4]); } break; }
case 'scancode': { if (rdpClient) { rdpClient.sendKeyEventScancode(msg[1], msg[2]); } break; }
case 'unicode': { if (rdpClient) { rdpClient.sendKeyEventUnicode(msg[1], msg[2]); } break; }
case 'disconnect': { obj.close(0); break; }
try {
msg = JSON.parse(msg);
switch (msg[0]) {
case 'infos': { obj.infos = msg[1]; startTcpServer(); break; }
case 'mouse': { if (rdpClient) { rdpClient.sendPointerEvent(msg[1], msg[2], msg[3], msg[4]); } break; }
case 'wheel': { if (rdpClient) { rdpClient.sendWheelEvent(msg[1], msg[2], msg[3], msg[4]); } break; }
case 'scancode': { if (rdpClient) { rdpClient.sendKeyEventScancode(msg[1], msg[2]); } break; }
case 'unicode': { if (rdpClient) { rdpClient.sendKeyEventUnicode(msg[1], msg[2]); } break; }
case 'disconnect': { obj.close(0); break; }
}
} catch (ex) {
console.log('RdpMessageException', msg, ex);
obj.close(0);
}
});

View File

@ -47,36 +47,34 @@
Client.prototype = {
install : function () {
var self = this;
var self = this;
// Bind mouse move event
this.canvas.addEventListener('mousemove', function (e) {
if (!self.socket || !self.activeSession) return;
var offset = Mstsc.elementOffset(self.canvas);
self.socket.send(JSON.stringify(['mouse', e.clientX - offset.left, e.clientY - offset.top, 0, false]));
var rect = e.target.getBoundingClientRect();
self.socket.send(JSON.stringify(['mouse', e.clientX - rect.left, e.clientY - rect.top, 0, false]));
e.preventDefault();
return false;
});
this.canvas.addEventListener('mousedown', function (e) {
if (!self.socket || !self.activeSession) return;
var offset = Mstsc.elementOffset(self.canvas);
self.socket.send(JSON.stringify(['mouse', e.clientX - offset.left, e.clientY - offset.top, mouseButtonMap(e.button), true]));
var rect = e.target.getBoundingClientRect();
self.socket.send(JSON.stringify(['mouse', e.clientX - rect.left, e.clientY - rect.top, mouseButtonMap(e.button), true]));
e.preventDefault();
return false;
});
this.canvas.addEventListener('mouseup', function (e) {
if (!self.socket || !self.activeSession) return;
var offset = Mstsc.elementOffset(self.canvas);
self.socket.send(JSON.stringify(['mouse', e.clientX - offset.left, e.clientY - offset.top, mouseButtonMap(e.button), false]));
var rect = e.target.getBoundingClientRect();
self.socket.send(JSON.stringify(['mouse', e.clientX - rect.left, e.clientY - rect.top, mouseButtonMap(e.button), false]));
e.preventDefault();
return false;
});
this.canvas.addEventListener('contextmenu', function (e) {
if (!self.socket || !self.activeSession) return;
var offset = Mstsc.elementOffset(self.canvas);
self.socket.send(JSON.stringify(['mouse', e.clientX - offset.left, e.clientY - offset.top, mouseButtonMap(e.button), false]));
var rect = e.target.getBoundingClientRect();
self.socket.send(JSON.stringify(['mouse', e.clientX - rect.left, e.clientY - rect.top, mouseButtonMap(e.button), false]));
e.preventDefault();
return false;
});
@ -85,8 +83,8 @@
var isHorizontal = false;
var delta = e.detail;
var step = Math.round(Math.abs(delta) * 15 / 8);
var offset = Mstsc.elementOffset(self.canvas);
self.socket.send(JSON.stringify(['wheel', e.clientX - offset.left, e.clientY - offset.top, step, delta > 0, isHorizontal]));
var rect = e.target.getBoundingClientRect();
self.socket.send(JSON.stringify(['wheel', e.clientX - rect.left, e.clientY - rect.top, step, delta > 0, isHorizontal]));
e.preventDefault();
return false;
});
@ -95,8 +93,8 @@
var isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);
var delta = isHorizontal?e.deltaX:e.deltaY;
var step = Math.round(Math.abs(delta) * 15 / 8);
var offset = Mstsc.elementOffset(self.canvas);
self.socket.send(JSON.stringify(['wheel', e.clientX - offset.left, e.clientY - offset.top, step, delta > 0, isHorizontal]));
var rect = e.target.getBoundingClientRect();
self.socket.send(JSON.stringify(['wheel', e.clientX - rect.left, e.clientY - rect.top, step, delta > 0, isHorizontal]));
e.preventDefault();
return false;
});
@ -126,12 +124,12 @@
* @param next {function} asynchrone end callback
*/
connect : function (ip, domain, username, password, next) {
// start connection
// Start connection
var self = this;
this.socket = new WebSocket("wss://" + window.location.host + "/mstsc/relay.ashx");
this.socket.binaryType = 'arraybuffer';
this.socket.onopen = function () {
console.log("WS-OPEN");
//console.log("WS-OPEN");
self.socket.send(JSON.stringify(['infos', {
ip: ip,
port: 3389,
@ -184,12 +182,12 @@
}
};
this.socket.onclose = function () {
console.log("WS-CLOSE");
//console.log("WS-CLOSE");
self.activeSession = false;
next(null);
};
}
}
Mstsc.client = { create : function (canvas) { return new Client(canvas); } }
MstscClient = { create : function (canvas) { return new Client(canvas); } }
})();

File diff suppressed because it is too large Load Diff

View File

@ -1,46 +0,0 @@
body {
overflow:hidden;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.logo {
width : 200px;
margin-left : auto;
margin-right : auto;
display : block;
margin-bottom: 10px;
}

View File

@ -4,62 +4,131 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/favicon.ico">
<title>RDP</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/signin.css" rel="stylesheet">
<script type="text/javascript" src="./js/mstsc.js"></script>
<script type="text/javascript" src="./js/mstsc.js"></script>
<script type="text/javascript" src="./js/keyboard.js"></script>
<script type="text/javascript" src="./js/rle.js"></script>
<script type="text/javascript" src="./js/client.js"></script>
<script type="text/javascript" src="./js/canvas.js"></script>
<script type="text/javascript" src="mstsc.js"></script>
<script type="text/javascript" src="keyboard.js"></script>
<script type="text/javascript" src="rle.js"></script>
<script type="text/javascript" src="client.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<style>
body {
font-family:sans-serif;
margin: 0;
xoverflow: hidden;
background-color: black;
}
.container {
background-color:cadetblue;
background: linear-gradient(to bottom right, #003366, #0055AA);
}
.middleContainer {
color: lightgray;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.signinform {
width: 330px;
margin: 0 auto;
}
.formLabel { }
.formControl {
width: 210px;
font-size: 17px;
border-radius: 5px;
}
.connectButton {
margin-top: 6px;
width: 100%;
padding: 6px;
font-size: 16px;
border-radius: 5px;
cursor:pointer;
}
.mainCanvas {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
<script language="javascript">
var client = null;
var canvas = null;
var urlargs = parseUriArgs();
if (urlargs.name) { document.title = urlargs.name + ' - ' + document.title; }
console.log(urlargs.ws);
function load(canvas) {
client = Mstsc.client.create(Mstsc.$(canvas));
function load() {
if (urlargs.name) { QH('computerName', urlargs.name); }
client = MstscClient.create(Q('myCanvas'));
Q('inputDomain').focus();
canvas = Q('myCanvas');
}
function connect(domain, username, password) {
Mstsc.$("main").style.display = 'none';
var canvas = Mstsc.$("myCanvas");
canvas.style.display = 'inline';
var domain = Q('inputDomain').value;
var username = Q('inputUsername').value;
var password = Q('inputPassword').value;
QV('myCanvas', true);
QV('main', false);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
client.connect(urlargs.ws, domain, username, password, function (err) {
Mstsc.$("myCanvas").style.display = 'none';
Mstsc.$("main").style.display = 'inline';
});
console.log('CanvasSize', canvas.width, canvas.height);
client.connect(urlargs.ws, domain, username, password, function (err) { QV('myCanvas', false); QV('main', true); });
return false;
}
function Q(x) { return document.getElementById(x); } // "Q"
function QS(x) { try { return Q(x).style; } catch (x) { } } // "Q" style
function QE(x, y) { try { Q(x).disabled = !y; } catch (x) { } } // "Q" enable
function QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } } // "Q" visible
function QA(x, y) { Q(x).innerHTML += y; } // "Q" append
function QH(x, y) { Q(x).innerHTML = y; } // "Q" html
function QC(x) { try { return Q(x).classList; } catch (x) { } } // "Q" class
function parseUriArgs() { var href = window.document.location.href; if (href.endsWith('#')) { href = href.substring(0, href.length - 1); } var name, r = {}, parsedUri = href.split(/[\?&|\=]/); parsedUri.splice(0, 1); for (x in parsedUri) { switch (x % 2) { case 0: { name = decodeURIComponent(parsedUri[x]); break; } case 1: { r[name] = decodeURIComponent(parsedUri[x]); var x = parseInt(r[name]); if (x == r[name]) { r[name] = x; } break; } default: { break; } } } return r; }
function EscapeHtml(x) { if (typeof x == 'string') return x.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;'); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
function EscapeHtmlBreaks(x) { if (typeof x == 'string') return x.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;').replace(/\r/g, '<br />').replace(/\n/g, '').replace(/\t/g, '&nbsp;&nbsp;'); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
</script>
</head>
<body onload='load("myCanvas")'>
<div id="main" class="container">
<form class="form-signin" onSubmit="connect(this.elements['inputDomain'].value, this.elements['inputUsername'].value, this.elements['inputPassword'].value);return false;">
<!--<img class='logo' src="./img/mstsc.js.svg"></img>-->
<!--<label for="inputIpAddress" class="sr-only">IP Address</label>-->
<!--<input type="text" id="inputIpAddress" class="form-control" placeholder="IP Address" required autofocus>-->
<label for="inputDomain" class="sr-only">Domain</label>
<input type="text" id="inputDomain" class="form-control" placeholder="Domain">
<label for="inputUsername" class="sr-only">Username</label>
<input type="text" id="inputUsername" class="form-control" placeholder="Username">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password">
<button class="btn btn-lg btn-primary btn-block" type="submit" style="background-color: #34A6FF; border-color: #34A6FF">Connect</button>
</form>
</div> <!-- /container -->
<canvas id="myCanvas" style="display:none">
<body onload='load()' style="position:absolute;top:0px;right:0;left:0;bottom:0px">
<div id="main" class="container" style="position:absolute;top:0px;right:0;left:0;bottom:0px">
<div class="middleContainer">
<div id="computerName" style="width:100%;text-align:center;font-size:24px"></div>
<table class="signinform">
<tr>
<td colspan="2"><hr style="color:gray;border:1px solid;" /></td>
</tr>
<tr>
<td><label for="inputDomain" class="formLabel">Domain</label></td>
<td style="text-align:right"><input type="text" id="inputDomain" class="formControl" placeholder="Domain"></td>
</tr>
<tr>
<td><label for="inputUsername" class="formLabel">Username</label></td>
<td style="text-align:right"><input type="text" id="inputUsername" class="formControl" placeholder="Username"></td>
</tr>
<tr>
<td><label for="inputPassword" class="formLabel">Password</label></td>
<td style="text-align:right"><input type="password" id="inputPassword" class="formControl" placeholder="Password"></td>
</tr>
<tr>
<td colspan="2"><button class="connectButton" onclick="return connect()">Connect</button></td>
</tr>
</table>
</div>
</div>
<canvas id="myCanvas" class="mainCanvas" style="display:none" />
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -14923,10 +14923,7 @@
]
},
{
"en": "Launch RDP session to this device",
"xloc": [
"default.handlebars->27->568"
]
"en": "Launch RDP session to this device"
},
{
"en": "Launch noVNC session to this device",
@ -14935,6 +14932,12 @@
"default.handlebars->27->566"
]
},
{
"en": "Launch web-based RDP session to this device",
"xloc": [
"default.handlebars->27->568"
]
},
{
"en": "Leave blank for none.",
"es": "Deje en blanco para ninguno.",
@ -16010,10 +16013,7 @@
]
},
{
"en": "MSTSC",
"xloc": [
"default.handlebars->27->569"
]
"en": "MSTSC"
},
{
"cs": "macOS",
@ -28634,6 +28634,12 @@
"default.handlebars->27->1795"
]
},
{
"en": "Web-RDP",
"xloc": [
"default.handlebars->27->569"
]
},
{
"cs": "Vítejte",
"de": "Willkommen",

View File

@ -2202,7 +2202,6 @@
var newWindow = window.open(vncurl, 'mcnovnc/' + message.nodeid);
newWindow.opener = null;
} else if (message.tag == 'mstsc') {
//var rdpurl = window.location.origin + domainUrl + 'mstsc/index.html?ws=wss%3A%2F%2F' + window.location.host + '%2Fmeshrelay.ashx%3Fauth%3D' + message.cookie;
var rdpurl = window.location.origin + domainUrl + 'mstsc/index.html?ws=' + message.cookie;
var node = getNodeFromId(message.nodeid);
if (node != null) { rdpurl += '&name=' + encodeURIComponentEx(node.name); }
@ -5375,7 +5374,7 @@
// MSTSC.js link
if (((connectivity & 1) != 0) && (node.agent) && ((meshrights & 8) != 0) && ((features & 0x40000000) == 0)) {
x += '<a href=# cmenu=rfbPortContextMenu id=mstscLink onclick=p10mstsc("' + node._id + '") title="' + "Launch RDP session to this device" + '.">' + "MSTSC" + '</a>&nbsp;';
x += '<a href=# cmenu=rfbPortContextMenu id=mstscLink onclick=p10mstsc("' + node._id + '") title="' + "Launch web-based RDP session to this device" + '.">' + "Web-RDP" + '</a>&nbsp;';
}
// MQTT options