xterm.js在web端實(shí)現(xiàn)Terminal示例詳解
通常在一些公司內(nèi)部的系統(tǒng)中，會(huì)在 web 端實(shí)現(xiàn)一個(gè) Terminal 功能，用戶只需要登陸網(wǎng)站就可以使用，而不需要再使用 SSH 的連接方式，使用起來(lái)更加便捷。為了實(shí)現(xiàn)這一效果，我們可以通過(guò)引入 xtermjs 來(lái)實(shí)現(xiàn)此功能。
xterm 是一個(gè)使用 TypeScript 編寫(xiě)的前端終端組件，可以直接在瀏覽器中實(shí)現(xiàn)一個(gè)命令行終端應(yīng)用。Xterm.js 適用于大多數(shù)終端應(yīng)用程序，如 bash，vim 和 tmux，這包括對(duì)基于curses的應(yīng)用程序和鼠標(biāo)事件的支持。Xterm.js 非常快，它甚至還包括一個(gè)GPU加速的渲染器。
- xtermjs Api 介紹：xtermjs.org/docs/api/te…
- 一些 API 中文介紹：http://m.fzitv.net/article/266450.htm
在絕大多數(shù)的情況下 Xtermjs 通過(guò) websocket 和后端建立通信。我們的每一次輸入都需要發(fā)送到后端，而后端則需要根據(jù)我們的每一次輸入給予響應(yīng)，前端則負(fù)責(zé)將得到的數(shù)據(jù)渲染出來(lái)。
因?yàn)槲沂褂玫目蚣苁?React，所以后續(xù)的所有功能都是在 React 中實(shí)現(xiàn)的。
快速上手
npm install xterm
因?yàn)榭紤]到該功能組件可能會(huì)在多個(gè)頁(yè)面用到，因此需要將其單獨(dú)封裝成組件名為 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, // 定制化配置參數(shù)
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);
// 打開(kāi)一個(gè)已經(jīng)初始化好的的終端
term.open(terminalRef.current as HTMLDivElement);
// 向終端中寫(xiě)入數(shù)據(jù)
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)
現(xiàn)在將該組件引入到 App 中，就能夠看到一個(gè)初始化好的 web 終端：
接下來(lái)就是一步步來(lái)完成一些細(xì)節(jié)功能。
首次建立鏈接
當(dāng) webSocket 首次建立鏈接的時(shí)候，后端應(yīng)該會(huì)給我一段默認(rèn)的數(shù)據(jù)，這時(shí)，我們?cè)诮M件初始化完成后，需要其呈現(xiàn)出來(lái)，而不是隨隨便便的在 write 一些字符串。
interface Props {
options?: ITerminalOptions & ITerminalInitOnlyOptions, // 定制化配置參數(shù)
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(() => {
// 打開(kāi)一個(gè)已經(jīng)初始化好的的終端
termRef.current.open(terminalRef.current as HTMLDivElement);
// 向終端中寫(xiě)入數(shù)據(jù)
termRef.current.onData((value) => {
onInput(value)
termRef.current.write(value)
})
}, [])
// 監(jiān)聽(tīng)code的變化，然后每次接收到響應(yīng)的時(shí)候就寫(xiě)入
useEffect(() => {
termRef.current.write(code)
}, [code])
return (
<div className="terminal-container">
<div ref={terminalRef}></div>
</div>
)
}
注意：由于終端實(shí)例要在不同的地方用到，所以我將其放在了Ref中。注意和上面最開(kāi)始的代碼區(qū)分。
處理輸入邏輯
鍵盤(pán)輸入事件，需要用到onData監(jiān)聽(tīng)函數(shù)，它能夠監(jiān)聽(tīng)到我們鍵盤(pán)輸入的每一個(gè)字符。
useEffect(() => {
+ termRef.current.onData((value) => {
+ console.log(value)
+ termRef.current.write(value)
+ })
}, [])
而在onData事件中我們還需要來(lái)和后端進(jìn)行交互，所以還需要將輸入的value傳遞給父組件。供父組件進(jìn)行網(wǎng)絡(luò)請(qǐng)求。
useEffect(()=>{
term.current.onData((value) => {
onInput(value)
termRef.current.write(value)
})
},[])
而父組件的onInput就負(fù)責(zé)處理和后端的交互。到現(xiàn)在一個(gè)簡(jiǎn)單的 webTerminal 就已經(jīng)實(shí)現(xiàn)了
接下來(lái)的web終端自適應(yīng)容器、樣式修改配置、銷(xiāo)毀等操作請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
TypeScript實(shí)現(xiàn)類(lèi)型安全的EventEmitter
這篇文章主要為大家介紹了TypeScript實(shí)現(xiàn)類(lèi)型安全的EventEmitter示例詳解有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
ThreeJS使用紋理貼圖創(chuàng)建一個(gè)我的世界草地方塊
這篇文章主要為大家介紹了ThreeJS使用紋理貼圖創(chuàng)建一個(gè)我的世界草地方塊的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
開(kāi)發(fā)typescript項(xiàng)目tsconfig.json配置及選項(xiàng)使用解析
這篇文章主要為大家介紹了tsconfig.json配置及選項(xiàng)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
typescript在vue中的入門(mén)案例代碼demo
這篇文章主要介紹了typescript在vue中的入門(mén)案例代碼demo,使用技術(shù)棧vue2+typescript+scss入門(mén)練手項(xiàng)目，天氣預(yù)報(bào)demo，需要的朋友可以參考下。2022-12-12
postman數(shù)據(jù)加解密實(shí)現(xiàn)APP登入接口模擬請(qǐng)求
對(duì)于Postman的使用，一般情況下只要發(fā)發(fā)確定的請(qǐng)求與參數(shù)就可以的了,然而，在使用的時(shí)候，尤其是接口測(cè)試時(shí)，請(qǐng)求接口的設(shè)計(jì)里面都有數(shù)據(jù)加密，參數(shù)驗(yàn)簽，返回?cái)?shù)據(jù)也有進(jìn)行加密的，這個(gè)時(shí)候就需要使用一些腳本做處理，模擬app登入請(qǐng)求的操作2021-08-08
TypeScript數(shù)據(jù)結(jié)構(gòu)之隊(duì)列結(jié)構(gòu)Queue教程示例
這篇文章主要為大家介紹了TypeScript數(shù)據(jù)結(jié)構(gòu)之隊(duì)列結(jié)構(gòu)Queue教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
TypeScript Nim交替使用細(xì)節(jié)分析
這篇文章主要為大家介紹了TypeScript Nim交替使用細(xì)節(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
詳解什么是TypeScript里的Constructor?signature
這篇文章主要介紹了什么是TypeScript里的Constructor?signature詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
TypeScript之Generics泛型類(lèi)型學(xué)習(xí)
這篇文章主要為大家介紹了TypeScript之Generics泛型類(lèi)型學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
TypeScript快速學(xué)習(xí)入門(mén)基礎(chǔ)語(yǔ)法
TypeScript的基礎(chǔ)語(yǔ)法,包括變量聲明、復(fù)合類(lèi)型（數(shù)組和對(duì)象）、條件控制（if-else和switch）、循環(huán)（for和while）、函數(shù)（基礎(chǔ)和箭頭函數(shù),以及可選參數(shù)）、面向?qū)ο筇匦裕杜e、接口、繼承）以及模塊開(kāi)發(fā)中的導(dǎo)出和導(dǎo)入2024-07-07