| <html> |
| <head> |
| <title>SSH Terminal</title> |
| <link rel="stylesheet" href="/xterm.css" /> |
| <script src="/xterm.js"></script> |
| <script src="/xterm-addon-fit.js"></script> |
| <script src="/socket.io/socket.io.js"></script> |
| <script> |
| window.addEventListener('load', function() { |
| var terminalContainer = document.getElementById('terminal-container'); |
| const term = new Terminal({ cursorBlink: true }); |
| const fitAddon = new FitAddon.FitAddon(); |
| term.loadAddon(fitAddon); |
| term.open(terminalContainer); |
| fitAddon.fit(); |
| |
| var socket = io() |
| socket.on('connect', function() { |
| term.write('\r\n*** Connected to backend ***\r\n'); |
| }); |
| |
| |
| term.onKey(function (ev) { |
| socket.emit('data', ev.key); |
| }); |
| |
| |
| socket.on('data', function(data) { |
| term.write(data); |
| }); |
| |
| socket.on('disconnect', function() { |
| term.write('\r\n*** Disconnected from backend ***\r\n'); |
| }); |
| }, false); |
| </script> |
| <style> |
| body { |
| font-family: helvetica, sans-serif, arial; |
| font-size: 1em; |
| color: #111; |
| } |
| h1 { |
| text-align: center; |
| } |
| #terminal-container { |
| width: 960px; |
| height: 600px; |
| margin: 0 auto; |
| padding: 2px; |
| } |
| #terminal-container .terminal { |
| background-color: #111; |
| color: #fafafa; |
| padding: 2px; |
| } |
| #terminal-container .terminal:focus .terminal-cursor { |
| background-color: #fafafa; |
| } |
| </style> |
| </head> |
| <body> |
| <h3>WebSSH</h3> |
| <div id="terminal-container"></div> |
| </body> |
| </html> |
