API tools faq
paste
Advertisement
skip420

xterm

skip420
Sep 13th, 2021
5,525
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.17 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.   <html>
  3.     <head>
  4.       <link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
  5.       <script src="node_modules/xterm/dist/xterm.js"></script>
  6.       <script src="node_modules/xterm/dist/addons/attach/attach.js"></script>
  7.       <script src="node_modules/xterm/dist/addons/fit/fit.js"></script>
  8.       <style>
  9.       body {font-family: Arial, Helvetica, sans-serif;}
  10.  
  11.       input[type=text], input[type=password], input[type=number] {
  12.           width: 100%;
  13.           padding: 12px 20px;
  14.           margin: 8px 0;
  15.           display: inline-block;
  16.           border: 1px solid #ccc;
  17.           box-sizing: border-box;
  18.       }
  19.  
  20.       button {
  21.           background-color: #4CAF50;
  22.           color: white;
  23.           padding: 14px 20px;
  24.           margin: 8px 0;
  25.           border: none;
  26.           cursor: pointer;
  27.           width: 100%;
  28.       }
  29.  
  30.       button:hover {
  31.           opacity: 0.8;
  32.       }
  33.  
  34.       .serverbox {
  35.           padding: 16px;
  36.           border: 3px solid #f1f1f1;
  37.           width: 50%;
  38.           position: absolute;
  39.           top: 15%;
  40.           left: 37%;
  41.       }
  42.       </style>
  43.     </head>
  44.     <body>
  45.       <div id="serverbox" class="serverbox">
  46.         <label for="psw"><b>Server</b></label><br>
  47.         <input type="text" id="server" name="server" title="server" placeholder="server" /><br>
  48.         <label for="psw"><b>Port</b></label><br>
  49.         <input type="number" min="1" id="port" name="port" title="port" placeholder="port" /><br>
  50.         <label for="psw"><b>User</b></label><br>
  51.         <input type="text" id="user" name="user" title="user" placeholder="user" /><br>
  52.         <label for="psw"><b>Password</b></label><br>
  53.         <input type="password" id="password" name="password" title="password" placeholder="password" /><br>
  54.         <button type="button" onclick="ConnectServer()">Connect</button><br>
  55.       </div>
  56.       <div id="terminal" style="width:100%; height:90vh;visibility:hidden"></div>
  57.       <script>
  58.         var resizeInterval;
  59.         var wSocket = new WebSocket("ws:domain.name.com:8080");
  60.         Terminal.applyAddon(attach);  // Apply the `attach` addon
  61.         Terminal.applyAddon(fit);  //Apply the `fit` addon
  62.         var term = new Terminal({
  63.                   cols: 80,
  64.                   rows: 24
  65.         });
  66.         term.open(document.getElementById('terminal'));
  67.  
  68.  
  69.         function ConnectServer(){
  70.           document.getElementById("serverbox").style.visibility="hidden";
  71.           document.getElementById("terminal").style.visibility="visible";
  72.           var dataSend = {"auth":
  73.                             {
  74.                             "server":document.getElementById("server").value,
  75.                             "port":document.getElementById("port").value,
  76.                             "user":document.getElementById("user").value,
  77.                             "password":document.getElementById("password").value
  78.                             }
  79.                           };
  80.           wSocket.send(JSON.stringify(dataSend));
  81.  
  82.           term.fit();
  83.           term.focus();
  84.         }      
  85.  
  86.         wSocket.onopen = function (event) {
  87.           console.log("Socket Open");
  88.           term.attach(wSocket,false,false);
  89.           window.setInterval(function(){
  90.             wSocket.send(JSON.stringify({"refresh":""}));
  91.           }, 700);
  92.         };
  93.  
  94.         wSocket.onerror = function (event){
  95.           term.detach(wSocket);
  96.           alert("Connection Closed");
  97.         }        
  98.        
  99.         term.on('data', function (data) {
  100.           var dataSend = {"data":{"data":data}};
  101.           wSocket.send(JSON.stringify(dataSend));
  102.           //Xtermjs with attach dont print zero, so i force. Need to fix it :(
  103.           if (data=="0"){
  104.             term.write(data);
  105.           }
  106.         })
  107.        
  108.         //Execute resize with a timeout
  109.         window.onresize = function() {
  110.           clearTimeout(resizeInterval);
  111.           resizeInterval = setTimeout(resize, 400);
  112.         }
  113.         // Recalculates the terminal Columns / Rows and sends new size to SSH server + xtermjs
  114.         function resize() {
  115.           if (term) {
  116.             term.fit()
  117.           }
  118.         }
  119.       </script>
  120.     </body>
  121.   </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!