onData in vue3 inoperative

[Pancake-Q]

Details

• Browser and browser version: latest,
• OS version: latest,
• xterm.js version: latest,
  "xterm": "^5.2.1",
  "xterm-addon-attach": "^0.8.0",
  "xterm-addon-fit": "^0.7.0"

Steps to reproduce

<template>
    <div id="terminal" ref="terminalRef"></div>
</template>
<script setup>
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'
import 'xterm/css/xterm.css'
import { onMounted, ref } from 'vue'
const term = ref()
const ROWS = 40
const COLS = 10
const terminalRef = ref(null)
let socket
const initXterm = () => {
    term.value = new Terminal({
        allowProposedApi: true,
        rendererType: 'canvas', //渲染类型
        rows: ROWS, //行数
        cols: COLS, // 不指定行数，自动回车后光标从下一行开始
        convertEol: true, //启用时，光标将设置为下一行的开头
        scrollback: 50, //终端中的回滚量
        disableStdin: false, //是否应禁用输入
        tabStopWidth: 4,
        // cursorStyle: "underline", //光标样式
        cursorBlink: true, //光标闪烁
        lineHeight: 1.2,
        fontSize: 12,
        screenReaderMode: true,
        fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
        theme: {
            foreground: '#ECECEC', //字体
            background: '#000000', //背景色
            cursor: 'help', //设置光标
            lineHeight: 10,
        },
    })
    // 创建terminal实例
    term.value.open(terminalRef.value)
    // 换行并输入起始符 $
    term.value.prompt = () => {
        term.value.write('\r\n\x1b[33m$\x1b[0m ')
    }
    term.value.prompt()
    // canvas背景全屏
    const fitAddon = new FitAddon()
    term.value.loadAddon(fitAddon)
    fitAddon.fit()

    window.addEventListener('resize', resizeScreen)
    function resizeScreen() {
        try {
            // 窗口大小改变时，触发xterm的resize方法使自适应
            fitAddon.fit()
        } catch (e) {
            console.log('e', e.message)
        }
    }
    setTimeout(async () => {
        runFakeTerminal()
        socket = new WebSocket('ws://127.0.0.1:3000/terminals/51727')
        socket.onopen = runRealTerminal
        socket.onclose = runFakeTerminal
        socket.onerror = runFakeTerminal
    }, 1000)
}
function runRealTerminal() {
  const attachAddon = new AttachAddon(socket)
    term.value.loadAddon(attachAddon)
    // term.value.focus()
}
const runFakeTerminal = () => {
    if (term.value._initialized) return
    // 初始化
    term.value._initialized = true
    term.value.writeln('')
    term.value.writeln('=================================================')
    term.value.writeln('Welcome to \x1b[1;32mGBD\x1b[0m.')
    term.value.writeln('=================================================')

    // 添加事件监听器，支持输入方法
    term.value.onKey((e) => {
        const ev = e.domEvent
        socket.send(ev.code)
        const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey
        if (ev.code === 'Enter') {
            term.value.prompt()
        } else if (ev.code === 'Backspace') {
            // back 删除的情况
            if (term.value._core.buffer.x > 2) {
                // term.value.write('\b \b')
            }
        } else if (printable) {
            // term.value.write(e.key)
        }
    })
    term.value.onData((key) => {
        console.log(key, 'onData')
        // 粘贴的情况
        // if (key.length > 1) term.value.write(key)
    })
}
onMounted(() => {
    if (terminalRef.value) {
        console.log(terminalRef.value)
        initXterm()
    }
})
</script>
<style lang="less" scoped>
#terminal {
    width: 100%;
    height: 100%;
}
</style>

[Pancake-Q]

The cause of xx disableStdin

[Pancake-Q]

https://github.com/Pancake-Q/vue-jsx.git this is a repro
When nginx is not configured for about 1 minute, it will disconnect. The normal solution is heartbeat, but we do not know whether the heartbeat can be sent.

[Tyriar]

@Pancake-Q the team doesn't know about vue; we don't want to waste time wrestling with a framework when that could be the cause

[Pancake-Q]

I just provided a vue demo repository, xterm is running normally but the configuration of nginx causes it to automatically disconnect after 1 minute, now I just want to know what I should do to keep ws active

[Pancake-Q]

What messages can I send to keep the activity alive without affecting the accuracy of the information returned by xterm ws

[jerch]

Isnt this an nginx configuration question?

As for xtermjs - you cannot with the default implementation of the attach addon. For that you need a custom protocol, which allows heartbeats as different kind of message.
You should not use the attach addon for production solutions anyway, as it misses important security features. Also see https://xtermjs.org/docs/guides/security/#3-websockets

Edit:
Websockets also allow so called ping/pong frames, you can use them as heartbeat. Plz read up the technical details yourself.