Hecc-inc./webssh_plus
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Try #2

Browse Source
This commit is contained in:
corner 2019-09-03 16:15:30 +02:00
parent f9d7bc89b0
commit 8d90f32921
2 changed files with 54 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@ -4,51 +4,38 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webssh_plus</title> <title>bash</title>
<script src="/socket.io/socket.io.js"></script> <link rel="stylesheet" href="/node_modules/xterm/dist/xterm.css" />
<link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" /> <link rel="stylesheet" href="/node_modules/xterm/dist/addons/fullscreen/fullscreen.css" />
<script src="node_modules/xterm/dist/xterm.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
<style> <script src="/node_modules/xterm/dist/xterm.js"></script>
body { <script src="/node_modules/xterm/dist/addons/fit/fit.js"></script>
height: 100vh!important; <script src="/node_modules/xterm/dist/addons/attach/attach.js"></script>
margin: 0; <script src="/node_modules/xterm/dist/addons/winptyCompat/winptyCompat.js"></script>
padding: 0;
}
div#terminal {
height: 100%;
width: 100%;
}
</style>
</head> </head>
<body> <body>
<div id="terminal"> <div id="terminal"></div>
<!-- ! Here will be the terminal stuff -->
</div>
<script> <script>
var term = new Terminal(); // No idea what these are about. Just copied them from the demo code
Terminal.applyAddon(attach);
// Connect to the socket.io server Terminal.applyAddon(fit);
var socket = io.connect('http://localhost:9774'); Terminal.applyAddon(winptyCompat);
// Wait for data from the server // The terminal
socket.on('client_identify', function() { const term = new Terminal();
var size = { // No idea what this does
height: document.querySelector('body').offsetHeight, term.winptyCompatInit();
width: document.querySelector('body').offsetWidth, // This kinda makes sense
} const container = document.getElementById('terminal');
socket.emit('client_size', size) term.open(container);
}); // Open the websocket connection to the backend
const protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
term.open(document.getElementById('terminal')) const port = location.port ? `:${location.port}` : '';
const socketUrl = `${protocol}${location.hostname}${port}/shell`;
socket.on('output', function (data) { const socket = new WebSocket(socketUrl);
term.write(data); // Attach the socket to the terminal
}); socket.onopen = (ev) => { term.attach(socket); };
// Listen for user input and pass it to the server // Not going to worry about close/error for the websocket
term.on('data', function(data) {
console.log(data);
socket.emit('input', data);
});
</script> </script>
</body> </body>
</html> </html>

76
main.js
View File

@ -1,55 +1,29 @@
// Reference: https://hub.packtpub.com/making-simple-web-based-ssh-client-using-nodejs-and-socketio/ import * as express from 'express';
import * as pty from 'node-pty';
var express = require('express'); const app = express();
var https = require('https'); const expressWs = require('express-ws')(app);
var http = require('http');
var fs = require('fs');
var pty = require('node-pty');
// Set port // Serve static assets from ./static
var port = 9774; app.use(express.static(`${__dirname}/static`));
// Set up express server // Instantiate shell and set up data handlers
let app = express(); expressWs.app.ws('/shell', (ws, req) => {
// Spawn the shell
// Set HTTP server root folder const shell = pty.spawn('/bin/bash', [], {
app.use("/", express.static("./")); name: 'xterm-color',
cwd: process.env.PWD,
// Creating an HTTP server env: process.env
var server = http.createServer(app).listen(port); });
console.log(`Listening on port ${port}`); // For all shell data send it to the websocket
shell.on('data', (data) => {
var io = require('socket.io')(server); ws.send(data);
});
// When a new socket connects // For all websocket data send it to the shell
io.on('connection', function (socket) { ws.on('message', (msg) => {
console.log('Client connect'); shell.write(msg);
socket.emit('client_identify'); });
socket.on('client_size', function (size) {
// Create terminal
console.log(size);
console.log({ cols: Math.floor(size.width / 9), rows: Math.floor(size.height / 10) })
var term = pty.spawn('sh', [], {
name: 'xterm-color',
cols: Math.floor(size.width / 9),
rows: Math.floor(size.height / 10),
cwd: process.env.HOME,
env: process.env
});
// Listen on the terminal for output and send it to the client
term.on('data', function (data) {
socket.emit('output', data);
});
// Listen on the client and send any input to the terminal
socket.on('input', function (data) {
term.write(data);
});
// When socket disconnects, destroy the terminal
socket.on("disconnect", function () {
term.destroy();
console.log("Client disconnect");
});
})
}); });
// Start the application
app.listen(9774);