Compare commits
3 Commits
f9d7bc89b0
...
af927a0d0a
| Author | SHA1 | Date | |
|---|---|---|---|
| af927a0d0a | |||
|
7a4b5ecc5e | ||
| 8d90f32921 |
67
index.html
67
index.html
@ -4,51 +4,34 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>webssh_plus</title>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
|
||||
<script src="node_modules/xterm/dist/xterm.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 100vh!important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div#terminal {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<title>bash</title>
|
||||
<link rel="stylesheet" href="/node_modules/xterm/dist/xterm.css" />
|
||||
<link rel="stylesheet" href="/node_modules/xterm/dist/addons/fullscreen/fullscreen.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
|
||||
<script src="/node_modules/xterm/dist/xterm.js"></script>
|
||||
<script src="/node_modules/xterm/dist/addons/fit/fit.js"></script>
|
||||
<script src="/node_modules/xterm/dist/addons/attach/attach.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="terminal">
|
||||
<!-- ! Here will be the terminal stuff -->
|
||||
</div>
|
||||
<div id="terminal"></div>
|
||||
<script>
|
||||
var term = new Terminal();
|
||||
|
||||
// Connect to the socket.io server
|
||||
var socket = io.connect('http://localhost:9774');
|
||||
// Wait for data from the server
|
||||
socket.on('client_identify', function() {
|
||||
var size = {
|
||||
height: document.querySelector('body').offsetHeight,
|
||||
width: document.querySelector('body').offsetWidth,
|
||||
}
|
||||
socket.emit('client_size', size)
|
||||
});
|
||||
|
||||
term.open(document.getElementById('terminal'))
|
||||
|
||||
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);
|
||||
});
|
||||
// No idea what these are about. Just copied them from the demo code
|
||||
Terminal.applyAddon(attach);
|
||||
Terminal.applyAddon(fit);
|
||||
// The terminal
|
||||
const term = new Terminal();
|
||||
// This kinda makes sense
|
||||
const container = document.getElementById('terminal');
|
||||
term.open(container);
|
||||
// Open the websocket connection to the backend
|
||||
const protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
|
||||
const port = location.port ? `:${location.port}` : '';
|
||||
const socketUrl = `${protocol}${location.hostname}${port}/shell`;
|
||||
const socket = new WebSocket(socketUrl);
|
||||
// Attach the socket to the terminal
|
||||
socket.onopen = (ev) => { term.attach(socket); };
|
||||
// Not going to worry about close/error for the websocket
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
72
main.js
72
main.js
@ -1,55 +1,29 @@
|
||||
// Reference: https://hub.packtpub.com/making-simple-web-based-ssh-client-using-nodejs-and-socketio/
|
||||
|
||||
var express = require('express');
|
||||
var https = require('https');
|
||||
var http = require('http');
|
||||
var fs = require('fs');
|
||||
var pty = require('node-pty');
|
||||
|
||||
// Set port
|
||||
var port = 9774;
|
||||
const app = express();
|
||||
const expressWs = require('express-ws')(app);
|
||||
|
||||
// Set up express server
|
||||
let app = express();
|
||||
// Serve static assets from ./static
|
||||
app.use(express.static('./'));
|
||||
|
||||
// Set HTTP server root folder
|
||||
app.use("/", express.static("./"));
|
||||
|
||||
// Creating an HTTP server
|
||||
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");
|
||||
});
|
||||
})
|
||||
// Instantiate shell and set up data handlers
|
||||
expressWs.app.ws('/shell', (ws, req) => {
|
||||
// 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
|
||||
app.listen(9774);
|
||||
18
package-lock.json
generated
18
package-lock.json
generated
@ -269,6 +269,24 @@
|
||||
"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": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"express": "^4.17.1",
|
||||
"express-ws": "^4.0.0",
|
||||
"node-pty": "^0.8.1",
|
||||
"socket.io": "^2.2.0",
|
||||
"xterm": "^3.14.5"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user