xterm使用

2023-09-20 15:53:51

xterm使用

前言

vue与xterm整合记录

1. xterm介绍

xterm 是一个基于 Web 技术的终端模拟器，它可以在浏览器中创建交互式终端界面。xterm 提供了一种强大的方式来将终端功能集成到 Web 应用程序中，使用户能够在浏览器中与远程服务器或本地命令行进行交互

2. xterm使用

2.1 xterm简单示例

<!DOCTYPE html>
<html>
<head>
    <title>xterm-01</title>
    <!-- 引入 xterm 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css">
</head>
<body>
    <h1>xterm 简单示例</h1>
    <!-- 创建一个容器用于放置 xterm 组件 -->
    <div id="terminal"></div>

    <!-- 引入 xterm 的 JavaScript 文件 -->
    <script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
    <script>
        // 创建一个 xterm 组件并将其连接到容器
        const xterm = new Terminal();
        xterm.open(document.getElementById('terminal'));

        // 向终端写入消息
        xterm.writeln('欢迎使用 xterm!');
    </script>
</body>
</html>

效果：
在这里插入图片描述

2.2 xterm监听输入并在终端中实时显示

方式1:onKey监听

<!DOCTYPE html>
<html>
<head>
    <title>xterm-02</title>
    <!-- 引入 xterm 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css">
</head>
<body>
<h1>xterm 监听输入并在终端中实时显示</h1>
<!-- 创建一个容器用于放置 xterm 组件 -->
<div id="terminal"></div>

<!-- 引入 xterm 的 JavaScript 文件 -->
<script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
<script>
    // 创建一个 xterm 组件并将其连接到容器
    const xterm = new Terminal();
    xterm.open(document.getElementById('terminal'));

    // 向终端写入消息
    xterm.writeln('欢迎使用 xterm!');

    // 监听输入并在终端中实时显示
    xterm.onKey((e) => {
        const printable = !e.domEvent.altKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
        if (e.domEvent.keyCode === 13) {
            // 处理回车键，添加换行
            xterm.writeln('');
        } else if (e.domEvent.keyCode === 8) {
            // 处理退格键，删除最后一个字符
            xterm.write('\b \b');
        } else if (printable) {
            // 处理可打印字符
            xterm.write(e.key);
        }
    });
</script>
</body>
</html>

方式2:onData监听

<!DOCTYPE html>
<html>
<head>
    <title>xterm-02</title>
    <!-- 引入 xterm 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css">
</head>
<body>
<h1>xterm 监听输入并在终端中实时显示</h1>
<!-- 创建一个容器用于放置 xterm 组件 -->
<div id="terminal"></div>

<!-- 引入 xterm 的 JavaScript 文件 -->
<script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
<script>
    // 创建一个 xterm 组件并将其连接到容器
    const xterm = new Terminal();
    xterm.open(document.getElementById('terminal'));

    // 向终端写入消息
    xterm.writeln('欢迎使用 xterm!');

    // 监听输入并在终端中实时显示
    xterm.onData((data) => {
        const printable = data.match(/[\x20-\x7E]/); // 匹配可打印字符的正则表达式
        if (data === '\r' || data === '\x0D') {
            // 处理回车键，添加换行
            xterm.writeln('');
        } else if (data === '\x08' || data === '\x7F') {
            // 处理退格键，删除最后一个字符
            xterm.write('\b \b');
        } else if (printable) {
            // 处理可打印字符
            xterm.write(data);
        }
    });
</script>
</body>
</html>

效果:
在这里插入图片描述

onData和onKey什么区别

xterm.onData： 用于捕获用户在终端中输入的所有数据，包括不可见字符（例如回车、换行等）。它不区分特殊键和可打印字符，而是将用户输入的所有字符都视为数据

xterm.onData((data) => {
    // 处理用户输入的数据，包括特殊字符
    console.log(data);
});

xterm.onKey： 用于捕获用户在终端中按下的键盘事件，但它通常用于处理可打印字符（即可见字符，例如字母、数字、符号等）。它区分特殊键和可打印字符，以便你可以根据需要对它们进行处理。

xterm.onKey((e) => {
    if (e.domEvent.key === 'Enter') {
        // 处理回车键事件
    } else if (e.domEvent.key === 'Backspace') {
        // 处理退格键事件
    } else {
        // 处理可打印字符事件
        console.log(e.key);
    }
});

场景推荐

  • xterm.onData 获取所有数据(onKey就没法复制后粘贴数据)适合和后端websocket持续交互传输
  • xterm.onKey 可以做成快捷键,和xterm.onData 结合使用

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>xterm-02</title>
    <!-- 引入 xterm 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css">
</head>
<body>
<h1>xterm 监听输入并在终端中实时显示</h1>
<!-- 创建一个容器用于放置 xterm 组件 -->
<div id="terminal"></div>
<div>
    <h2>快捷键命令列表</h2>
    <ul id="shortcut-list"></ul>
    <form id="shortcut-form">
        <label for="shortcut">快捷键：</label>
        <input type="text" id="shortcut" name="shortcut">
        <label for="command">命令：</label>
        <input type="text" id="command" name="command">
        <button type="button" onclick="addShortcut()">添加</button>
    </form>
</div>

<!-- 引入 xterm 的 JavaScript 文件 -->
<script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
<script>
    // 创建一个 xterm 组件并将其连接到容器
    const xterm = new Terminal();
    xterm.open(document.getElementById('terminal'));

    // 向终端写入消息
    xterm.writeln('欢迎使用 xterm!');

    // 监听输入并在终端中实时显示
    xterm.onData((data) => {
        const printable = data.match(/[\x20-\x7E]/); // 匹配可打印字符的正则表达式
        if (data === '\r' || data === '\x0D') {
            // 处理回车键，添加换行
            xterm.writeln('');
        } else if (data === '\x08' || data === '\x7F') {
            // 处理退格键，删除最后一个字符
            xterm.write('\b \b');
        } else if (printable) {
            // 处理可打印字符
            xterm.write(data);
        }
    });

    // 快捷键与命令的映射
    const shortcutMap = {};

    // 在快捷键命令列表中展示
    const shortcutList = document.getElementById('shortcut-list');
    function updateShortcutList() {
        shortcutList.innerHTML = '';
        for (const shortcut in shortcutMap) {
            const command = shortcutMap[shortcut];
            const listItem = document.createElement('li');
            listItem.textContent = `${shortcut}: ${command}`;
            shortcutList.appendChild(listItem);
        }
    }

    // 添加快捷键与命令的关系
    function addShortcut() {
        const shortcutInput = document.getElementById('shortcut');
        const commandInput = document.getElementById('command');
        const shortcut = shortcutInput.value;
        const command = commandInput.value;
        if (shortcut && command) {
            shortcutMap[shortcut] = command;
            shortcutInput.value = '';
            commandInput.value = '';
            updateShortcutList();
        }
    }

    // 在 xterm 组件上监听键盘事件，在终端中输入相应的命令
    xterm.onKey((e) => {
        const shortcut = getShortcutKey(e.domEvent);
        if (shortcut && shortcutMap[shortcut]) {
            const command = shortcutMap[shortcut];
            xterm.write(command);
        }
    });

    // 获取组合键的字符串表示（Ctrl+A）
    function getShortcutKey(event) {
        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
        const ctrlKey = isMac ? event.metaKey : event.ctrlKey;
        if (ctrlKey) {
            return `Ctrl+${String.fromCharCode(event.keyCode)}`;
        }
        return null;
    }
</script>
</body>
</html>

2.3 xterm与vue整合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iView Tabs with xterm.js</title>

    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- 引入 iView 样式和脚本 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@2.9.1/dist/styles/iview.css">
    <script src="https://cdn.jsdelivr.net/npm/iview@2.9.1/dist/iview.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css">
    <script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
</head>
<body>
<div id="app">
    <tabs v-model="activeTabName" @on-click="handleTabClick">
        <tab-pane v-for="tab in tabs" :name="tab.name" :label="tab.label">
            <!-- 在这里渲染 xterm 组件 -->
            <div :ref="'xterm_' + tab.name"></div>
        </tab-pane>
    </tabs>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeTabName: '', // 当前激活的标签页名称
                tabs: [ // 标签页数据，可以根据需要进行动态添加
                    { name: 'tab1', label: 'Tab 1' },
                    { name: 'tab2', label: 'Tab 2' },
                    // 添加更多标签页...
                ],
                xtermInstances: {},
            };
        },
        methods: {
            handleTabClick(tabName) {
                // 处理标签页点击事件
                this.activeTabName = tabName;
                if (!this.xtermInstances[tabName]) {
                    this.initializeXterm(this.activeTabName);
                }

            },
            initializeXterm(tabName) {
                // 初始化 xterm 终端
                const xterm = new Terminal({
                    convertEol: true,//控制终端是否自动将 \n 转换为 \r\n。
                    cursorBlink: true,//指定光标是否闪烁
                    screenKeys: true
                });
                xterm.open(this.$refs['xterm_' + tabName][0]);

                // 写入数据
                xterm.write(tabName + " xterm created \r\n")

                // 监听键盘数据
                xterm.onData((data) => {
                    // console.log(tabName + ':'+ data)
                    // if (data =='\r') {
                    //     data = '\r\n'
                    // }

                    xterm.write(data)
                })

                this.xtermInstances[tabName] = xterm;
            }
        },
        mounted() {
            // 初始化第一个标签页的 xterm 终端
            this.activeTabName = this.tabs[0].name;
            this.initializeXterm(this.activeTabName);
        }
    });
</script>
</body>
</html>

效果
在这里插入图片描述

2.3 xterm + vue + websocket

附录

配置说明

配置选项作用默认值
cols 和 rows指定终端的列数和行数，控制终端的大小。cols: 80，rows: 24
cursorBlink指定光标是否闪烁。cursorBlink: false
cursorStyle指定光标的样式，可以是 "block"、"underline" 或 "bar"。cursorStyle: "block"
bellStyle指定响铃（Bell）的样式，可以是 "none"、"sound" 或 "visual"。bellStyle: "none"
theme定义终端的主题，可以通过设置不同的颜色和样式来自定义终端的外观。theme: { foreground: "#ffffff", background: "#000000" }
fontFamily指定终端的字体族（font family）。fontFamily: "Menlo, Monaco, Consolas, "Courier New", monospace"
fontSize指定终端的字体大小。fontSize: 12
fontWeight指定终端字体的粗细。fontWeight: "normal"
lineHeight指定行高。lineHeight: 1.0
fontSmoothing字体平滑设置，可以是 "antialiased"、"subpixel-antialiased" 或 "none"。fontSmoothing: "antialiased"
convertEol控制终端是否自动将 \n 转换为 \r\n。convertEol: true
scrollback指定滚动缓冲区的行数，用于在终端中查看历史输出。scrollback: 1000
screenReaderMode启用屏幕阅读器模式，以支持可访问性。screenReaderMode: false
tabStopWidth指定制表符的宽度，以控制文本缩进。tabStopWidth: 8
rendererType指定绘图渲染器的类型，可以是 "canvas" 或 "dom"。rendererType: "canvas"
rightClickSelectsWord控制右键单击是否选择整个单词。rightClickSelectsWord: false
更多推荐

Docker容器化技术（从零学会Docker）

文章目录前言一、初识Docker1.初识Docker-Docker概述2.初识Docker-安装Docker3.初识Docker-Docker架构4.初识Docker-配置镜像加速器二、Docker命令1.Docker命令-服务相关命令2.Docker命令-镜像相关命令3.Docker命令-容器相关命令三、Docker

Docker容器内使用Docker——DinD与DooD

文章目录DinD与DooD简介DinD与DooD的应用场景DooD构建Docker镜像构建DooD镜像运行DooD镜像直接运行DockerDooD模式运行DockerDinD构建Docker镜像通过官方dind镜像使用dind模式的docker本地构建DinD镜像下载解压二进制Docker文件构建DinD镜像运行Din

面试题：HTTPS 是如何保证传输安全的？又被问了！

文章目录1.HTTP协议1.1HTTP协议介绍1.2HTTP中间人攻击1.3防止中间人攻击2.HTTPS协议2.1HTTPS简介2.2CA认证体系总结1.HTTP协议在谈论HTTPS协议之前，先来回顾一下HTTP协议的概念。1.1HTTP协议介绍HTTP协议是一种基于文本的传输协议，它位于OSI网络模型中的应用层。HT

【Nginx26】Nginx学习：日志与镜像流量复制

Nginx学习：日志与镜像流量复制总算到了日志模块，其实这个模块的指令之前我们就用过了，而且也是是非常常见的指令。相信这一块的学习大家应该不会有什么难度。另一个则是镜像功能，这个估计用过的同学就比较少了，不过也并不是特别的复杂，一会讲到的时候咱们再详细说哦。今天的两个模块都是包含在Nginx源码中的，不需要额外单独编译

MySQL-DML语句

DML语句Create单行插入数据多行插入数据插入否则更新replaceinto查看受影响行数的函数Retrieve全列查询指定列查询select+函数/表达式对查询出的列重命名-asdistinctorderbylimitwhere子句比较运算符逻辑运算符UpdateDeletedeletetruncatedelet

Linux: Cache 简介

文章目录1.前言2.背景3.Cache硬件基础3.1什么是Cache？3.2Cache工作原理3.3Cache层级架构3.4内存架构中各级访问速度概览3.5Cache分类3.6Cache的查找和组织方式3.6.1Cache组织相关术语3.6.2Cache查找3.6.2.1Cache查找过程概述3.6.2.2Cache查

cgroup限制内存

首先简单介绍下cgroup限制cpu的使用率，写一段代码如下：#include<stdio.h>#include<pthread.h>intmain(){inti=0;for(;;)i++;return0;}很明显，这里面是单核拉满，然后top看下进程的cpu使用率，如下所示：很明显，截图中的cpu使用率是正常的，现在

一,安卓aosp源码编译环境搭建

系列文章目录第一章安卓aosp源码编译环境搭建第二章手机硬件参数介绍和校验算法第三章修改安卓aosp代码更改硬件参数第四章编译定制rom并刷机实现硬改(一)第五章编译定制rom并刷机实现硬改(二)第六章不root不magisk不xposedlsposedfrida原生修改定位第七章安卓手机环境检测软件分享第八章硬改之设

mybatis学习记录（二）-----CRUD--增删改查

目录使用MyBatis完成CRUDz--增删改查3.1insert（Create）3.2delete（Delete）3.3update（Update）3.4select（Retrieve）查询一条数据查询多条数据使用MyBatis完成CRUDz--增删改查准备工作创建module（Maven的普通Java模块）：myb

算法通关村-----动态规划高频问题

最少硬币数问题问题描述给你一个整数数组coins，表示不同面额的硬币；以及一个整数amount，表示总金额。计算并返回可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回-1。你可以认为每种硬币的数量是无限的。详见leetcode322问题分析设f(n)为amount=n时使用的最少金币数。遍

【JavaSE笔记】数组

一、前言数组被广泛应用于各种应用场景中。在这篇文章中，我们将深入探讨Java数组的概念、定义、基本操作、多维数组以及常见的应用场景。二、数组的基本概念1、什么是数组数组：可以看成是相同类型元素的一个集合。在内存中是一段连续的空间。比如现实中的车库：在java中，包含6个整形类型元素的数组，就相当于上图中连在一起的6个车

热文推荐
  1. 让开源数据开发平台助力提质增效！

    用低代码技术平台，可以提高办公协作效率，可以让数据资源变得更有意义和价值，也可以为企业做出更理想的发展决策。作为开源数据开发平台服务商，流辰信息谨守研发初心，一直在低代码技术平台领域努力耕耘，为行业的进步和数字化发展贡献力量。由于社会的发展和进步，传统的表单制作工具已经无法为企业创造高效益，如果想要获得发展和壮大，需要

  2. 初探微前端

    微前端一、微前端的背景和概述1.1概念1.2特点1.3背景二、微前端的实现方式2.1服务端集成2.2运行时集成三、现有的解决方案3.1single-spa3.2qiankun3.3micro-app四、总结🚀🚀🚀随着互联网技术的不断发展，前端应用规模和复杂性也在不断增加。传统的单体前端应用面临着很多挑战，比如应用

  3. webpack：系统的了解webpack一些核心概念

    文章目录webpack如何处理应用程序？何为webpack模块chunk？入口(entry)输出(output)loader开发loader插件(plugin)简介流程插件开发：Tapable类监听(watching)compiler钩子compilation钩子compiler和compilation创建自定义插件l

  4. 有关在 Windows 上使用 Python 的常见问题解答

    🎬岸边的风：个人主页🔥个人专栏:《VUE》《javaScript》⛺️生活的理想，就是为了理想的生活!目录使用pipinstall解决包安装问题使用WSL解决pip安装问题什么是py.exe？为什么运行python.exe会打开MicrosoftStore？当我复制粘贴文件路径时，为什么在Python中不起作用？什

  5. 前端js面试题 (一)

    文章目录1、请你阐述一下原型与原型链。2、开发中的闭包问题。3、call、apply、bind的用途与区别4、手写一个promise5、箭头函数与普通函数6、递归与尾递归。7、await返回值是什么。8、promise.then，setInterval，Promise.resolve，执行顺序9、letconstvar

  6. Python打包教程 PyInstaller和cx_Freeze

    当我们开发Python应用程序时，通常会将代码保存在.py文件中，然后通过Python解释器运行它。这对于开发和测试是非常方便的，但在将应用程序分享给其他人或在不同环境中部署时，可能会带来一些问题。为了解决这些问题，我们可以使用打包工具将Python应用程序转换为可执行文件，这样它就可以在不需要安装Python解释器的

  7. ​​​​MyBatis友人帐之基础入门

    一、简介1.1什么是MyBatisMyBatis是一个开源的、轻量级的数据持久层框架，它可以简化JDBC的操作，让开发者只需要关注SQL语句本身，而不用处理加载驱动、创建连接、创建语句等繁琐的过程。MyBatis支持自定义SQL、存储过程和高级映射，可以通过XML或注解来配置和映射原始类型、接口和JavaPOJO（普通

  8. Android 虚拟机

    文章目录Android虚拟机Java虚拟机基于栈的虚拟机栈的执行流程Dalvik虚拟机基于寄存器的虚拟机寄存器的执行流程Java虚拟机与Dalvik虚拟机区别ART虚拟机Android7.0的运行方式Android虚拟机Java虚拟机基于栈的虚拟机每一个运行时的线程，都有一个独立的栈。栈中记录了方法调用的历史，每一次方

  9. 交流共享，共筑智算底座丨九州未来受邀出席英特尔线下沙龙

    随着AI技术的升级迭代、生成式AI模型智能化水平的持续提升，AIGC加速向多种场景渗透，AIGC迎来应用爆发期，有望实现且跨越更多领域的融合，形成新的应用场景和解决方案，持续推动数字技术的创新与应用，助力各行各业实现数字化转型，开辟人类生产交互新纪元。9月13日，英特尔于上海举办2023英特尔AIGC创新与行业应用研讨