xterm.js在web端實(shí)現(xiàn)Terminal示例詳解
通常在一些公司內(nèi)部的系統(tǒng)中，會在 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，這包括對基于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)榭紤]到該功能組件可能會在多個(gè)頁面用到，因此需要將其單獨(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)該會給我一段默認(rèn)的數(shù)據(jù)，這時(shí)，我們在組件初始化完成后，需要其呈現(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ò)請求。
useEffect(()=>{
term.current.onData((value) => {
onInput(value)
termRef.current.write(value)
})
},[])
而父組件的onInput就負(fù)責(zé)處理和后端的交互。到現(xiàn)在一個(gè)簡單的 webTerminal 就已經(jīng)實(shí)現(xiàn)了
接下來的web終端自適應(yīng)容器、樣式修改配置、銷毀等操作請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
postman數(shù)據(jù)加解密實(shí)現(xiàn)APP登入接口模擬請求
對于Postman的使用，一般情況下只要發(fā)發(fā)確定的請求與參數(shù)就可以的了,然而，在使用的時(shí)候，尤其是接口測試時(shí)，請求接口的設(shè)計(jì)里面都有數(shù)據(jù)加密，參數(shù)驗(yàn)簽，返回?cái)?shù)據(jù)也有進(jìn)行加密的，這個(gè)時(shí)候就需要使用一些腳本做處理，模擬app登入請求的操作2021-08-08
CKEditor4配置與開發(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-01
Spartacus中navigation?item?reducer實(shí)現(xiàn)解析
這篇文章主要為大家介紹了Spartacus中navigation?item?reducer實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
這篇文章主要為大家介紹了ThreeJS?入門之如何渲染出第一個(gè)3D圖形實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
type challenge刷題之(middle 部分)示例解析
這篇文章主要為大家介紹了type challenge刷題之(middle 部分)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
TypeScript使用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-01
這篇文章主要為大家介紹了TypeScript條件類型示例的全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
TypeScript使用strictnullcheck實(shí)戰(zhàn)解析
這篇文章主要為大家介紹了TypeScript使用strictnullcheck實(shí)戰(zhàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08