xterm.js在web端如何實現Terminal

這篇文章主要介紹“xterm.js在web端如何實現Terminal”，在日常操作中，相信很多人在xterm.js在web端如何實現Terminal問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”xterm.js在web端如何實現Terminal”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

xterm 是一個使用 TypeScript 編寫的前端終端組件，可以直接在瀏覽器中實現一個命令行終端應用。Xterm.js 適用于大多數終端應用程序，如 bash，vim 和 tmux，這包括對基于curses的應用程序和鼠標事件的支持。Xterm.js 非常快，它甚至還包括一個GPU加速的渲染器。

在絕大多數的情況下 Xtermjs 通過 websocket 和后端建立通信。我們的每一次輸入都需要發送到后端，而后端則需要根據我們的每一次輸入給予響應，前端則負責將得到的數據渲染出來。

因為我使用的框架是 React，所以后續的所有功能都是在 React 中實現的。

快速上手

npm install xterm

因為考慮到該功能組件可能會在多個頁面用到，因此需要將其單獨封裝成組件名為 Xterminal。

import {memo, useEffect, useRef} from "react";
import {Terminal} from "xterm"
import type {ITerminalOptions, ITerminalInitOnlyOptions} from "xterm"
import "xterm/css/xterm.css"
interface Props {
    options?: ITerminalOptions & ITerminalInitOnlyOptions,  // 定制化配置參數
    onInput: (value: string) => void
}
const defaultOptions = {
    cols: 20,
    rows: 10
}
function Xterminal(props: Props) {
    const {onInput} = props
    const terminalRef = useRef<null | HTMLDivElement>(null)
    useEffect(() => {
        const options = {...defaultOptions, ...props.options}
        const term = new Terminal(options);
        // 打開一個已經初始化好的的終端
        term.open(terminalRef.current as HTMLDivElement);
        // 向終端中寫入數據
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
        term.onData((value) => {
            onInput(value)
            term.write(value)
        })
    }, [])
    return (
        <div className="terminal-container">
            <div ref={terminalRef}></div>
        </div>
    )
}
export default memo(Xterminal)

現在將該組件引入到 App 中，就能夠看到一個初始化好的 web 終端：

接下來就是一步步來完成一些細節功能。

首次建立鏈接

當 webSocket 首次建立鏈接的時候，后端應該會給我一段默認的數據，這時，我們在組件初始化完成后，需要其呈現出來，而不是隨隨便便的在 write 一些字符串。

interface Props {
    options?: ITerminalOptions & ITerminalInitOnlyOptions,  // 定制化配置參數
    code: string | Uint8Array,
    onInput: (value: string) => void
}
const defaultOptions = {
    cols: 20,
    rows: 10
}
function Xterminal(props: Props) {
    const {code, onInput} = props
    const terminalRef = useRef<null | HTMLDivElement>(null)
    const options = useMemo(() => {
        return {...defaultOptions, ...props.options}
    }, [props.options])
    const termRef = useRef<Terminal>(new Terminal(options))
    useEffect(() => {
        // 打開一個已經初始化好的的終端
        termRef.current.open(terminalRef.current as HTMLDivElement);
        // 向終端中寫入數據
        termRef.current.onData((value) => {
            onInput(value)
            termRef.current.write(value)
        })
    }, [])
    // 監聽code的變化，然后每次接收到響應的時候就寫入
    useEffect(() => {
        termRef.current.write(code)
    }, [code])
    return (
        <div className="terminal-container">
            <div ref={terminalRef}></div>
        </div>
    )
}

注意：由于終端實例要在不同的地方用到，所以我將其放在了Ref中。注意和上面最開始的代碼區分。

處理輸入邏輯

鍵盤輸入事件，需要用到onData監聽函數，它能夠監聽到我們鍵盤輸入的每一個字符。

useEffect(() => {
+   termRef.current.onData((value) => {
+        console.log(value)
+        termRef.current.write(value)
+     })
}, [])

而在onData事件中我們還需要來和后端進行交互，所以還需要將輸入的value傳遞給父組件。供父組件進行網絡請求。

useEffect(()=>{
    term.current.onData((value) => {
        onInput(value)
        termRef.current.write(value)
    })
},[])

而父組件的onInput就負責處理和后端的交互。到現在一個簡單的 webTerminal 就已經實現了

到此，關于“xterm.js在web端如何實現Terminal”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！