xterm.js在web端實(shí)現(xiàn)Terminal示例詳解
通常在一些公司內(nèi)部的系統(tǒng)中,會(huì)在 web 端實(shí)現(xiàn)一個(gè) Terminal 功能,用戶只需要登陸網(wǎng)站就可以使用,而不需要再使用 SSH 的連接方式,使用起來更加便捷。為了實(shí)現(xiàn)這一效果,我們可以通過引入 xtermjs 來實(shí)現(xiàn)此功能。
xterm 是一個(gè)使用 TypeScript 編寫的前端終端組件,可以直接在瀏覽器中實(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://www.dbjr.com.cn/article/266450.htm
在絕大多數(shù)的情況下 Xtermjs 通過 websocket 和后端建立通信。我們的每一次輸入都需要發(fā)送到后端,而后端則需要根據(jù)我們的每一次輸入給予響應(yīng),前端則負(fù)責(zé)將得到的數(shù)據(jù)渲染出來。
因?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); // 打開一個(gè)已經(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 中,就能夠看到一個(gè)初始化好的 web 終端:
接下來就是一步步來完成一些細(xì)節(jié)功能。
首次建立鏈接
當(dāng) webSocket 首次建立鏈接的時(shí)候,后端應(yīng)該會(huì)給我一段默認(rèn)的數(shù)據(jù),這時(shí),我們?cè)诮M件初始化完成后,需要其呈現(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(() => { // 打開一個(gè)已經(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)的時(shí)候就寫入 useEffect(() => { termRef.current.write(code) }, [code]) return ( <div className="terminal-container"> <div ref={terminalRef}></div> </div> ) }
注意:由于終端實(shí)例要在不同的地方用到,所以我將其放在了Ref中。注意和上面最開始的代碼區(qū)分。
處理輸入邏輯
鍵盤輸入事件,需要用到onData
監(jiān)聽函數(shù),它能夠監(jiān)聽到我們鍵盤輸入的每一個(gè)字符。
useEffect(() => { + termRef.current.onData((value) => { + console.log(value) + termRef.current.write(value) + }) }, [])
而在onData
事件中我們還需要來和后端進(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)了
接下來的web終端自適應(yīng)容器、樣式修改配置、銷毀等操作請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
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-08CKEditor4配置與開發(fā)詳細(xì)中文說明文檔
網(wǎng)上分享的CKEditor4中文說明很多都只是的部分使用方法,今天為大家分享一下比較完整的CKEditor4中文說明文檔2018-10-10微信小程序?qū)崙?zhàn)之運(yùn)維小項(xiàng)目
這篇文章主要介紹了微信小程序?qū)崙?zhàn)之運(yùn)維小項(xiàng)目,就是利用微信小程序?qū)崿F(xiàn)了一個(gè)類似138的功能,輸入IP就可以查看IP的詳細(xì)信心,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01Spartacus中navigation?item?reducer實(shí)現(xiàn)解析
這篇文章主要為大家介紹了Spartacus中navigation?item?reducer實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07type challenge刷題之(middle 部分)示例解析
這篇文章主要為大家介紹了type challenge刷題之(middle 部分)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08TypeScript使用noImplicitAny實(shí)戰(zhàn)解析
這篇文章主要為大家介紹了TypeScript使用noImplicitAny實(shí)戰(zhàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08微信小程序?qū)崿F(xiàn)圖片自適應(yīng)(支持多圖)
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)圖片自適應(yīng)的相關(guān)資料,文中介紹的方法同樣適應(yīng)于多圖,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01TypeScript使用strictnullcheck實(shí)戰(zhàn)解析
這篇文章主要為大家介紹了TypeScript使用strictnullcheck實(shí)戰(zhàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08