fix: use canvas to replace the iframe

.angular-cli.json

@@ -27,7 +27,13 @@
         "../node_modules/jquery/dist/jquery.min.js",
         "../node_modules/tether/dist/js/tether.min.js",
         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
-        "../node_modules/xterm/dist/xterm.js"
+        "../node_modules/xterm/dist/xterm.js",
+        "../node_modules/socket.io-client/dist/socket.io.js",
+        "./assets/js/mstsc.js",
+        "./assets/js/keyboard.js",
+        "./assets/js/rle.js",
+        "./assets/js/client.js",
+        "./assets/js/canvas.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

proxy.conf.json

@@ -6,5 +6,12 @@
   "/socket.io/": {
     "target": "http://localhost:3000",
     "secure": false
+  },
+  "/rdp/socket.io/": {
+    "target": "http://localhost:9250",
+    "pathRewrite": {
+      "^/rdp": ""
+    },
+    "secure": false
   }
 }

src/app/ControlPage/cleftbar/cleftbar.component.ts

@@ -25,11 +25,13 @@ export class CleftbarComponent implements OnInit {
         {
           name: "ops-linux",
           uuid: "xxxx",
-          type: "ssh"
+          type: "ssh",
+          token: "sshxxx"
         }, {
           name: "ops-win",
           uuid: "win-aasdf",
-          type: "rdp"
+          type: "rdp",
+          token: "rdpxxx"
         }
       ],
     }];

src/app/ControlPage/control/controlnav/controlnav.component.ts

@@ -48,7 +48,6 @@ export class ControlnavComponent implements OnInit {
     } else if (NavList.List[index].type === 'rdp') {
       jQuery("app-ssh").hide();
       jQuery("app-rdp").show();
-      jQuery("#rdp-" + index + " iframe")[0].contentWindow.focus();
     }
   }
 

src/app/ControlPage/control/rdp/rdp.component.html

 <div id="rdp">
   <div *ngFor="let m of NavList.List;let i=index"
        [ngClass]="{'disconnected':!m.connected,'hidden': m.hide,'hidden':m.type!='rdp'}" id="rdp-{{i}}">
-    <iframe src="http://127.0.0.1:9250/?token=000"></iframe>
+    <canvas id="canvas-{{i}}"></canvas>
+
   </div>
 </div>

src/app/ControlPage/control/rdp/rdp.component.ts

 import {Component, OnInit} from '@angular/core';
 import {NavList, View, Rdp} from '../control.component';
 
-declare let jQuery: any;
+declare let Mstsc: any;
 
 @Component({
   selector: 'app-rdp',
@@ -35,12 +35,17 @@ export class RdpComponent implements OnInit {
     NavList.List[id].hide = false;
 
     NavList.Active = id;
-    jQuery("#rdp-" + id + " iframe")[0].contentWindow.focus();
-
+    let client = Mstsc.client.create(Mstsc.$("canvas-" + id));
+    let canvas = Mstsc.$("canvas-" + id);
+    canvas.style.display = 'inline';
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    client.connect("xxxx", "rdp/socket.io");
   }
 
   static Disconnect(host) {
     host.connected = false;
+
     // document.getElementById("templatesrc").remove();
 
   }