脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → js其它 → xterm.js web端实现Terminal

xterm.js在web端实现Terminal示例详解

 更新时间：2022年11月01日 17:05:59   作者：Bug生产队的驴  
这篇文章主要为大家介绍了xterm.js在web端实现Terminal示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

通常在一些公司内部的系统中，会在 web 端实现一个 Terminal 功能，用户只需要登陆网站就可以使用，而不需要再使用 SSH 的连接方式，使用起来更加便捷。为了实现这一效果，我们可以通过引入 xtermjs 来实现此功能。

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 就已经实现了

接下来的web终端自适应容器、样式修改配置、销毁等操作请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • TypeScript实现类型安全的EventEmitter

    TypeScript实现类型安全的EventEmitter

    这篇文章主要为大家介绍了TypeScript实现类型安全的EventEmitter示例详解有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • ThreeJS使用纹理贴图创建一个我的世界草地方块

    ThreeJS使用纹理贴图创建一个我的世界草地方块

    这篇文章主要为大家介绍了ThreeJS使用纹理贴图创建一个我的世界草地方块的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • 开发typescript项目tsconfig.json配置及选项使用解析

    开发typescript项目tsconfig.json配置及选项使用解析

    这篇文章主要为大家介绍了tsconfig.json配置及选项使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • typescript在vue中的入门案例代码demo

    typescript在vue中的入门案例代码demo

    这篇文章主要介绍了typescript在vue中的入门案例代码demo,使用技术栈vue2+typescript+scss入门练手项目，天气预报demo，需要的朋友可以参考下。
    2022-12-12
  • postman数据加解密实现APP登入接口模拟请求

    postman数据加解密实现APP登入接口模拟请求

    对于Postman的使用，一般情况下只要发发确定的请求与参数就可以的了,然而，在使用的时候，尤其是接口测试时，请求接口的设计里面都有数据加密，参数验签，返回数据也有进行加密的，这个时候就需要使用一些脚本做处理，模拟app登入请求的操作
    2021-08-08
  • TypeScript数据结构之队列结构Queue教程示例

    TypeScript数据结构之队列结构Queue教程示例

    这篇文章主要为大家介绍了TypeScript数据结构之队列结构Queue教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • TypeScript Nim交替使用细节分析

    TypeScript Nim交替使用细节分析

    这篇文章主要为大家介绍了TypeScript Nim交替使用细节分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 详解什么是TypeScript里的Constructor signature

    详解什么是TypeScript里的Constructor signature

    这篇文章主要介绍了什么是TypeScript里的Constructor signature详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • TypeScript之Generics泛型类型学习

    TypeScript之Generics泛型类型学习

    这篇文章主要为大家介绍了TypeScript之Generics泛型类型学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • TypeScript快速学习入门基础语法

    TypeScript快速学习入门基础语法

    TypeScript的基础语法,包括变量声明、复合类型（数组和对象）、条件控制（if-else和switch）、循环（for和while）、函数（基础和箭头函数,以及可选参数）、面向对象特性（枚举、接口、继承）以及模块开发中的导出和导入
    2024-07-07

最新评论