xterm.js term.onData 不是函数

问题描述 投票：0回答：1

我正在前端使用 xterm.js 并在后端使用 django 编写一个终端应用程序。一切正常，但是当我尝试使用 onData 保存用户的输入时，我发现这不是函数错误。如果您有其他方法请告诉我。我尝试获取当前行，但如果用户按退格键或删除键，则会遇到问题。

索引 html:

<!doctype html>
<html style="height: calc(100% - 50px)">

<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/xterm.css" />

    <script src="https://unpkg.com/[email protected]/dist/xterm.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/addons/fit/fit.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/addons/fullscreen/fullscreen.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>
</head>

<body style="height: 100%">

    <div style="background: white; padding-bottom: 5px;">
        <span style="font-size: small;">Status: <span style="font-size: small;" id="status">connecting...</span></span>
        <button id="button" ; type="button" ; onclick="myFunction()" ;>Connect</button>
    </div>

    <div style=" width: 100%; height:100%;" id="terminal"></div>

    <script>

        Terminal.applyAddon(fit)

        var socket = io.connect({ transports: ["websocket", "polling"] });

        const status = document.getElementById("status")
        const button = document.getElementById("button")

        var term = new Terminal({
            cursorBlink: true,
        });

        term.open(document.getElementById('terminal'));

        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

    </script>
</body>

</html>

观看次数：

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")
javascript xterm
1个回答
0
投票

我只能假设这可能是版本问题。

我尝试将版本更新到5.2.1

        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() {
            socket.emit("resize", { "cols": term.cols, "rows": term.rows })
        }

        window.onresize = resize
        window.onload = resize
<!doctype html>
<html style="height: calc(100% - 50px)">

<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/xterm.css" />

    <script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
    <script src="https://unpkg.com/[email protected]/lib/xterm-addon-fit.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>
</head>

<body style="height: 100%">

    <div style="background: white; padding-bottom: 5px;">
        <span style="font-size: small;">Status: <span style="font-size: small;" id="status">connecting...</span></span>
        <button id="button" ; type="button" ; onclick="myFunction()" ;>Connect</button>
    </div>

    <div style=" width: 100%; height:100%;" id="terminal"></div>
</body>

</html>

你会看到我将 unpkg 链接更改为

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/xterm.css" />

    <script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
    <script src="https://unpkg.com/[email protected]/lib/xterm-addon-fit.js"></script>

我找不到全屏模块。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.