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