83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Terminal } from 'xterm';
|
|
import 'xterm/css/xterm.css';
|
|
|
|
const App = () => {
|
|
const terminalRef = useRef(null);
|
|
const terminal = useRef(null);
|
|
const socket = useRef(null);
|
|
const inputBuffer = useRef(''); // Buffer to hold user input
|
|
|
|
useEffect(() => {
|
|
// Initialize xterm.js Terminal
|
|
terminal.current = new Terminal({
|
|
cursorBlink: true,
|
|
theme: {
|
|
background: '#1e1e1e',
|
|
foreground: '#ffffff',
|
|
},
|
|
macOptionIsMeta: true, // Enable Meta key for Mac users
|
|
allowProposedApi: true, // Allow advanced terminal features
|
|
});
|
|
|
|
terminal.current.open(terminalRef.current);
|
|
|
|
// Connect to the WebSocket server
|
|
socket.current = new WebSocket('2.tcp.ngrok.io:10908');
|
|
|
|
// WebSocket Event Handlers
|
|
socket.current.onopen = () => {
|
|
terminal.current.writeln('Connected to WebSocket server.');
|
|
};
|
|
|
|
socket.current.onmessage = (event) => {
|
|
terminal.current.write(event.data);
|
|
};
|
|
|
|
socket.current.onerror = (error) => {
|
|
terminal.current.writeln(`WebSocket error: ${error.message}`);
|
|
};
|
|
|
|
socket.current.onclose = () => {
|
|
terminal.current.writeln('Disconnected from WebSocket server.');
|
|
};
|
|
|
|
// Handle terminal input
|
|
terminal.current.onData((data) => {
|
|
if (data === '\r') {
|
|
// On Enter
|
|
if (inputBuffer.current.trim() !== '') {
|
|
socket.current.send(inputBuffer.current + '\n'); // Send the buffer to the server
|
|
}
|
|
terminal.current.write('\r\nbugattiguy527@oracle1:~$ '); // Always write a new prompt
|
|
inputBuffer.current = ''; // Clear the buffer
|
|
} else if (data === '\u007F') {
|
|
// Handle Backspace
|
|
if (inputBuffer.current.length > 0) {
|
|
inputBuffer.current = inputBuffer.current.slice(0, -1);
|
|
terminal.current.write('\b \b');
|
|
}
|
|
} else {
|
|
// Append input to buffer and display
|
|
inputBuffer.current += data;
|
|
terminal.current.write(data);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
terminal.current.dispose();
|
|
if (socket.current) {
|
|
socket.current.close();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h1>SSH Web Terminal</h1>
|
|
<div ref={terminalRef} style={{ height: '80vh', width: '100%' }}></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App; |