I am running a terminal on browser using xterm.js. The program sends the input to django working in backend. The code in views.py is a modified version from MahmoudAlyy github page. The input in the pty_input method receives all the keys that user presses. It can be modified to get only the command but it would take a long time and be open to bugs. Is there another way to get only the user prompt by changing frontend or backend code?
views.py:
async_mode = "eventlet"
sio = socketio.Server(async_mode=async_mode)
fd = None
child_pid = None
def index(request):
return render(request, "index.html")
def set_winsize(fd, row, col, xpix=0, ypix=0):
winsize = struct.pack("HHHH", row, col, xpix, ypix)
fcntl.ioctl(fd, termios.TIOCSWINSZ, winsize)
def read_and_forward_pty_output():
global fd
max_read_bytes = 1024 * 20
while True:
sio.sleep(0.01)
if fd:
timeout_sec = 0
(data_ready, _, _) = select.select([fd], [], [], timeout_sec)
if data_ready:
output = os.read(fd, max_read_bytes).decode()
sio.emit("pty_output", {"output": output})
else:
print("process killed")
return
@sio.event
def resize(sid, message):
if fd:
set_winsize(fd, message["rows"], message["cols"])
@sio.event
def pty_input(sid, message):
if fd:
os.write(fd, message["input"].encode())
@sio.event
def disconnect_request(sid):
sio.disconnect(sid)
@sio.event
def connect(sid, environ):
global fd
global child_pid
if child_pid:
os.write(fd, "\n".encode())
return
(child_pid, fd) = pty.fork()
if child_pid == 0:
subprocess.run("bash")
else:
print()
sio.start_background_task(target=read_and_forward_pty_output)
@sio.event
def disconnect(sid):
global fd
global child_pid
os.kill(child_pid, signal.SIGKILL)
os.wait()
fd = None
child_pid = None
print("Client disconnected")
The script in index.html:
var socket = io.connect({ transports: ["websocket", "polling"] });
const status = document.getElementById("status")
const button = document.getElementById("button")
const fit = new FitAddon.FitAddon();
var term = new Terminal({
cursorBlink: true,
});
term.loadAddon(fit);
term.open(document.getElementById('terminal'));
fit.fit();
term.onData(data => {
console.log("Data received:", data);
socket.emit("pty_input", { "input": data });
});
socket.on("pty_output", function (output) {
term.write(output["output"])
})
socket.on("connect", () => {
status.innerHTML = '<span style="background-color: lightgreen;">connected</span>'
button.innerHTML = 'Disconnect'
})
socket.on("disconnect", () => {
status.innerHTML = '<span style="background-color: #ff8383;">disconnected</span>'
button.innerHTML = 'Connect'
})
function myFunction() {
if (button.innerHTML == 'Connect') {
location.reload();
}
else if (button.innerHTML == "Disconnect") {
socket.emit("disconnect_request")
}
}
function resize() {
term.fit()
socket.emit("resize", { "cols": term.cols, "rows": term.rows })
}
window.onresize = resize
window.onload = resize
After lots of research i found a method in xtermjs that gets the current terminal line as a string. User only have to enter the "y" coordinate. The current "y" value can easily be obtained by using "term._core.buffer.y". Also it should be translated to string to use it properly.
term.onKey(e => {
if (e.key == "\r") {
terminal_line = term.buffer.active.getLine(term._core.buffer.y)?.translateToString();
console.log("terminal line: ", terminal_line);
socket.emit("log_input", { "user_input": terminal_line });
}
socket.emit("pty_input", { "input": e.key });
})