Compare commits
No commits in common. "af927a0d0a304657adca3c7c18c2d5c45fe35e56" and "f9d7bc89b09bf87c6829dd5cf60816f0e40637d5" have entirely different histories.
af927a0d0a
...
f9d7bc89b0
67
index.html
67
index.html
@ -4,34 +4,51 @@
|
|||||||
<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>bash</title>
|
<title>webssh_plus</title>
|
||||||
<link rel="stylesheet" href="/node_modules/xterm/dist/xterm.css" />
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
<link rel="stylesheet" href="/node_modules/xterm/dist/addons/fullscreen/fullscreen.css" />
|
<link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
|
<script src="node_modules/xterm/dist/xterm.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
<script src="/node_modules/xterm/dist/xterm.js"></script>
|
<style>
|
||||||
<script src="/node_modules/xterm/dist/addons/fit/fit.js"></script>
|
body {
|
||||||
<script src="/node_modules/xterm/dist/addons/attach/attach.js"></script>
|
height: 100vh!important;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
div#terminal {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="terminal"></div>
|
<div id="terminal">
|
||||||
|
<!-- ! Here will be the terminal stuff -->
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
// No idea what these are about. Just copied them from the demo code
|
var term = new Terminal();
|
||||||
Terminal.applyAddon(attach);
|
|
||||||
Terminal.applyAddon(fit);
|
// Connect to the socket.io server
|
||||||
// The terminal
|
var socket = io.connect('http://localhost:9774');
|
||||||
const term = new Terminal();
|
// Wait for data from the server
|
||||||
// This kinda makes sense
|
socket.on('client_identify', function() {
|
||||||
const container = document.getElementById('terminal');
|
var size = {
|
||||||
term.open(container);
|
height: document.querySelector('body').offsetHeight,
|
||||||
// Open the websocket connection to the backend
|
width: document.querySelector('body').offsetWidth,
|
||||||
const protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
|
}
|
||||||
const port = location.port ? `:${location.port}` : '';
|
socket.emit('client_size', size)
|
||||||
const socketUrl = `${protocol}${location.hostname}${port}/shell`;
|
});
|
||||||
const socket = new WebSocket(socketUrl);
|
|
||||||
// Attach the socket to the terminal
|
term.open(document.getElementById('terminal'))
|
||||||
socket.onopen = (ev) => { term.attach(socket); };
|
|
||||||
// Not going to worry about close/error for the websocket
|
socket.on('output', function (data) {
|
||||||
|
term.write(data);
|
||||||
|
});
|
||||||
|
// Listen for user input and pass it to the server
|
||||||
|
term.on('data', function(data) {
|
||||||
|
console.log(data);
|
||||||
|
socket.emit('input', data);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
72
main.js
72
main.js
@ -1,29 +1,55 @@
|
|||||||
|
// Reference: https://hub.packtpub.com/making-simple-web-based-ssh-client-using-nodejs-and-socketio/
|
||||||
|
|
||||||
var express = require('express');
|
var express = require('express');
|
||||||
|
var https = require('https');
|
||||||
|
var http = require('http');
|
||||||
|
var fs = require('fs');
|
||||||
var pty = require('node-pty');
|
var pty = require('node-pty');
|
||||||
|
|
||||||
const app = express();
|
// Set port
|
||||||
const expressWs = require('express-ws')(app);
|
var port = 9774;
|
||||||
|
|
||||||
// Serve static assets from ./static
|
// Set up express server
|
||||||
app.use(express.static('./'));
|
let app = express();
|
||||||
|
|
||||||
// Instantiate shell and set up data handlers
|
// Set HTTP server root folder
|
||||||
expressWs.app.ws('/shell', (ws, req) => {
|
app.use("/", express.static("./"));
|
||||||
// Spawn the shell
|
|
||||||
const shell = pty.spawn('/bin/bash', [], {
|
|
||||||
name: 'xterm-color',
|
|
||||||
cwd: process.env.PWD,
|
|
||||||
env: process.env
|
|
||||||
});
|
|
||||||
// For all shell data send it to the websocket
|
|
||||||
shell.on('data', (data) => {
|
|
||||||
ws.send(data);
|
|
||||||
});
|
|
||||||
// For all websocket data send it to the shell
|
|
||||||
ws.on('message', (msg) => {
|
|
||||||
shell.write(msg);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Start the application
|
// Creating an HTTP server
|
||||||
app.listen(9774);
|
var server = http.createServer(app).listen(port);
|
||||||
|
console.log(`Listening on port ${port}`);
|
||||||
|
|
||||||
|
var io = require('socket.io')(server);
|
||||||
|
|
||||||
|
// When a new socket connects
|
||||||
|
io.on('connection', function (socket) {
|
||||||
|
console.log('Client connect');
|
||||||
|
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");
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
18
package-lock.json
generated
18
package-lock.json
generated
@ -269,24 +269,6 @@
|
|||||||
"vary": "~1.1.2"
|
"vary": "~1.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"express-ws": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/express-ws/-/express-ws-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-KEyUw8AwRET2iFjFsI1EJQrJ/fHeGiJtgpYgEWG3yDv4l/To/m3a2GaYfeGyB3lsWdvbesjF5XCMx+SVBgAAYw==",
|
|
||||||
"requires": {
|
|
||||||
"ws": "^5.2.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"ws": {
|
|
||||||
"version": "5.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
|
|
||||||
"integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
|
|
||||||
"requires": {
|
|
||||||
"async-limiter": "~1.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"finalhandler": {
|
"finalhandler": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||||
|
|||||||
@ -18,7 +18,6 @@
|
|||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"express-ws": "^4.0.0",
|
|
||||||
"node-pty": "^0.8.1",
|
"node-pty": "^0.8.1",
|
||||||
"socket.io": "^2.2.0",
|
"socket.io": "^2.2.0",
|
||||||
"xterm": "^3.14.5"
|
"xterm": "^3.14.5"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user