javascriptpythondjangoxtermjs

Save the user prompt that is sent from web terminal to django


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

Solution

  • 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 });
        })