xterm遇到的问题及解决方案

xterm遇到的问题及解决方案

/r插入终端导致的之后插入的数据覆盖了改行头部的数据

问题说明

如图所示,当在一行输入的候,输入的l插入到了改行的头部。
在这里插入图片描述

查看ws返回数据
在这里插入图片描述

可见ws返回的信息存在\r字符,在xterm.js中\r是回车字符的意思,但是\r并不会让xterm.js中的光标到下一行,而是让光标到当前行的起始位置,所以就会导致当前行的头部数据被覆盖。

问题分析

在xterm.js的issus中找到一个相似的问题,Xterm overwrites comands on same line if its longer #1359。
分析结果为,当前端xterm.js渲染的终端列数大于后端终端的列数就会出现这样的问题。

假设xterm.js渲染的终端列数和后端的终端列数一致,当输入到这一行的最后一个列数后再输入就会返回\r,但是如果列数相同,xterm.js会自动换行显示,会新起一行,这时候再插入\r会将光标移动到新起一行的开头插入数据,则不会有影响。
假设xterm.js渲染的终端列数和后端的终端列数不一致,当前端输入还没有自动换行,还没有新起一行则接收到了\r,所以光标移动到开头插入则会覆盖头部的数据。

解决方案

一般这种情况是前端使用了xterm-addon-fit插件来将整个终端盛满父容器,但是盛满后没有将终端的rowcol返回给后端设置终端大小导致的。

解决方法分为两种:
1、在xterm.js初始化时和在窗口大小改变时将row和col返回给后端进行设置。
2、取消使用xterm-addon-fit插件初始化设置终端大小和后端一致。

xterm主屏幕缓冲区和备用屏幕缓冲区切换

问题说明

需求是通过xterm.js实现一个终端,上方存在下拉框可以切换容器,但是切换的时候不清空上次终端操作的内容。
其实在切换终端的时候我们什么都不做处理就可以实现保留上次终端的内容。
但是会有一个问题,就是如果通过vim命令进入编辑状态,这时候切换终端,新的终端返回的内容会在vim编辑状态的最上面显示。
在这里插入图片描述

如图所示,新进入的终端的内容没有插入到了vim编辑状态的上面。

问题分析

因为终端分为主屏幕缓冲区和备用屏幕缓冲区,当切换终端的时候没有退出上一次终端的备用屏幕缓冲区,导致新进入的终端内容插入到了备用屏幕缓冲区。

解决方案

通过ws接收信息,如果内容存在\u001b[?1049h则为进入备用屏幕缓冲区,如果内容存在\u001b[?1049l则为进入主屏幕缓冲区。
可以创建一个变量来判断当前是否处于备用屏幕缓冲区,如果处于备用屏幕缓冲区切换终端是先退出备用屏幕缓冲区再创建ws进入终端。

spare = false
handleSocketMessage(data) {
// 进入备用屏幕缓冲区if (content.includes('\u001b[?1049h')) {this.spare = true;}// 退出备用屏幕缓冲区if (content.includes('\u001b[?1049l')) {this.spare = false;}
}
// 进入终端
intoTerminal() {// 是否处于备用屏幕缓冲区if (this.term?.element && this.spare) {// 退出备用屏幕缓冲区this.term.write('\u001b[?1049l');// 设置备用屏缓冲区状态this.spare = false;}
}

通过write插入内容,后插入的内容太多会导致之前插入的数据丢失

问题说明

通过write插入内容,后插入的内容太多会导致之前插入的数据丢失。

问题分析

缓冲区大小限制太小。

解决方案

初始化终端的时候配置缓冲区大小。

let term = new Terminal({scrollback: 100000, // 终端缓冲区大小
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/65346.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chrome被360导航篡改了怎么改回来?

一、Chrome被360导航篡改了怎么改回来? 查看是否被360主页锁定,地址栏输入chrome://version,看命令行end后面(蓝色部分),是否有https://hao.360.com/?srclm&lsn31c42a959f 修改步骤 第一步&#xff1a…

blender中合并的模型,在threejs中显示多个mesh;blender多材质烘培成一个材质

描述:在blender中合并的模型导出为glb,在threejs中导入仍显示多个mesh,并不是统一的整体,导致需要整体高亮或者使用DragControls等不能统一控制。 原因:模型有多个材质,在blender中合并的时候,…

C语言----输入输出

目录 输入输出 1.按格式输入输出 2. 按格式输入 3. 按字符输入输出 输入: 输出: 垃圾字符回收 1. 通过空格回收 2. %*c 3.getchar() 强制类型转换 输入输出 分为按格式输入输出和按字符输入输出 1.按格式输入输出 通…

leetcode hot 100搜索回溯

39. 组合总和 已解答 中等 相关标签 相关企业 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 candi…

计算机网络 (10)网络层

前言 计算机网络中的网络层(Network Layer)是OSI(开放系统互连)模型中的第三层,也是TCP/IP模型中的第二层,它位于数据链路层和传输层之间。网络层的主要任务是负责数据包从源主机到目的主机的路径选择和数据…

WebRTC服务质量(11)- Pacer机制(03) IntervalBudget

WebRTC服务质量(01)- Qos概述 WebRTC服务质量(02)- RTP协议 WebRTC服务质量(03)- RTCP协议 WebRTC服务质量(04)- 重传机制(01) RTX NACK概述 WebRTC服务质量(…

一维、线性卡尔曼滤波的例程(MATLAB)

这段 MATLAB 代码实现了一维线性卡尔曼滤波器的基本功能,用于估计在存在噪声的情况下目标状态的真实值 文章目录 一维线性卡尔曼滤波代码运行代码介绍1. **初始化部分**2. **数据生成**3. **卡尔曼滤波器实现**4. **结果可视化**5. **统计输出** 源代码 总结 一维线…

探索 .idea 文件夹:Java Maven 工程的隐形守护者

一、.idea文件夹深度解析:IntelliJ IDEA项目配置的核心 在Java Maven工程的开发环境中,.idea文件夹扮演着举足轻重的角色。这是IntelliJ IDEA项目特有的一个配置文件夹,它包含了项目所需的各种配置信息,以确保项目能够在不同的开…

【Compose multiplatform教程13】【组件】Column和Row组件

查看全部组件文章浏览阅读495次,点赞17次,收藏12次。alignment。https://blog.csdn.net/b275518834/article/details/144751353 Column 功能说明:将子组件按照垂直方向依次排列,能够设置组件之间的间距、对齐方式等属性&#xff…

观察者模式和发布-订阅模式有什么异同?它们在哪些情况下会被使用?

大家好,我是锋哥。今天分享关于【观察者模式和发布-订阅模式有什么异同?它们在哪些情况下会被使用?】面试题。希望对大家有帮助; 观察者模式和发布-订阅模式有什么异同?它们在哪些情况下会被使用? 1000道 …

每天40分玩转Django:实操多语言博客

实操多语言博客 一、今日学习内容概述 学习模块重要程度主要内容国际化配置⭐⭐⭐⭐⭐基础设置、语言切换翻译模型⭐⭐⭐⭐⭐多语言字段、翻译管理视图处理⭐⭐⭐⭐多语言内容展示、URL处理前端实现⭐⭐⭐⭐语言切换、界面适配 二、模型设计 # models.py from django.db im…

iviewui表单验证新手教程

1、表单验证介绍 下面来讲解iviewui表单验证的实现&#xff0c;下面上示例代码&#xff1a; <template><Form ref"formInline" :model"formInline" :rules"ruleInline" inline><FormItem prop"user"><!--prop属…

测试测试测试测试测试测试测试测试测试测试

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…

【音视频工具系列】streamEye 工具分析 H264 码流详细教程

streamEye工具 Elecard StreamEye 是一款专业的视频质量分析工具,广泛应用于视频编解码器的开发、系统集成、传输流制造等领域。它提供了对视频流的深度分析,包括宏块和帧级别的详细视觉表示。StreamEye 支持多种视频格式,如 MPEG-1/2、AVC/H.264、HEVC/H.265、VP9 等,能够…

Doris的SQL原理解析

今天来介绍下Doris的SQL原理解析&#xff0c;主要从语法、解析、分析、执行等几个方面来介绍&#xff0c;可以帮助大家对Doris底层有个清晰的理解~ 一、Doris简介 Apache Doris是一个基于MPP架构的高性能、实时的分析型数据库&#xff0c;能够较好的满足报表分析、即席查询、…

OpenHarmony开发板环境搭建

程序员Feri一名12年的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴&#xff01;君志所向,一往无前&#xff01; 0.OpenHarmony 0.1 OpenHarmony OpenHarmony是一款面向全场景、全连接、全智能的…

Debian12 安装配置 ODBC for GaussDB

第一步 apt install -y unixodbc 第二步下载 dws_8.2.x_odbc_driver_for_x86_redhat.zip 到 /tmp&#xff0c;之后 cd /tmp unzip dws_8.2.x_odbc_driver_for_x86_redhat.zip cp lib/* /usr/local/lib cp odbc/lib/* /usr/local/lib echo /usr/local/lib >> /etc/ld…

Web前端基础知识(四)

CSS简介 CSS(层叠样式表)&#xff0c;用于定义网页样式和布局的样式表语言。 一般与HTML一起用于构建web页面的。 HTML负责定义页面的结构和内容&#xff0c;CSS负责控制页面的外观和样式。 通过CSS&#xff0c;可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景…

ESP32_h2-创建一个工程后,添加驱动文件并在调用

点击F1或者ctrlshiftP 输入组件名字&#xff1a; 创建好后&#xff0c;可以看到文件目录多了components文件夹和组件文件 &#xff08;文件夹名字uart就是组件名字&#xff09;这里更改了文件名字 在整个工程目录下找到&#xff1a; 添加路径 finish&#xff01; 调用 程…

SQL进阶技巧:如何计算加油站问题? | LeetCode 134. 加油站

目录 0 问题描述 1 数据准备 2 问题分析 计算每个加油站剩余油量(当前油量减去到下一个加油站消耗的油量)