Try #2
This commit is contained in:
parent
f9d7bc89b0
commit
8d90f32921
71
index.html
71
index.html
@ -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>
|
66
main.js
66
main.js
@ -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("./"));
|
|
||||||
|
|
||||||
// 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',
|
name: 'xterm-color',
|
||||||
cols: Math.floor(size.width / 9),
|
cwd: process.env.PWD,
|
||||||
rows: Math.floor(size.height / 10),
|
|
||||||
cwd: process.env.HOME,
|
|
||||||
env: process.env
|
env: process.env
|
||||||
});
|
});
|
||||||
// Listen on the terminal for output and send it to the client
|
// For all shell data send it to the websocket
|
||||||
term.on('data', function (data) {
|
shell.on('data', (data) => {
|
||||||
socket.emit('output', data);
|
ws.send(data);
|
||||||
});
|
});
|
||||||
// Listen on the client and send any input to the terminal
|
// For all websocket data send it to the shell
|
||||||
socket.on('input', function (data) {
|
ws.on('message', (msg) => {
|
||||||
term.write(data);
|
shell.write(msg);
|
||||||
});
|
});
|
||||||
// When socket disconnects, destroy the terminal
|
|
||||||
socket.on("disconnect", function () {
|
|
||||||
term.destroy();
|
|
||||||
console.log("Client disconnect");
|
|
||||||
});
|
|
||||||
})
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Start the application
|
||||||
|
app.listen(9774);
|
Loading…
Reference in New Issue
Block a user