当前位置: 首页 > article >正文

xtermjs重复发送

使用vue + xtermjs + websocket开发网页ssh,核心代码如下:

   				initTerminal() {
                    console.log("初始化终端");
                    this.term = new Terminal({
                        cursorBlink: true,
                        theme: {
                            background: '#1f2937',
                            foreground: '#f3f4f6',
                            cursor: '#93c5fd'
                        }
                    });

                    this.ws = new WebSocket('/webssh');
        
                    const attachAddon = new AttachAddon.AttachAddon(this.ws);
                    const fitAddon = new FitAddon.FitAddon();
                    
                    this.term.loadAddon(attachAddon);
                    this.term.loadAddon(fitAddon);
                    
                    this.term.open(document.getElementById('terminal'));
                    fitAddon.fit();

                    
                    // 同步终端尺寸变化
                    this.term.onResize(({cols, rows}) => {
                        this.ws.send(JSON.stringify({
                            type: 'resize',
                            cols: cols,
                            rows: rows
                        }));
                    });
                    
                    this.ws.onopen = () => {
                        this.ws.send(JSON.stringify(this.config));
                        this.connected = true;
                        this.connecting = false;
                    };

                    this.ws.onerror = (error) => {
                        console.error('WebSocket error:', error);
                        alert('连接失败,请检查配置信息');
                        this.resetConnection();
                    };

                    window.addEventListener('resize', () => {
                        fitAddon.fit();
                        this.ws.send(JSON.stringify({
                            type: 'resize',
                            cols: this.term.cols,
                            rows: this.term.rows
                        }));
                    });

                    this.term.onData(data => {  // 输入与粘贴的情况
                       console.log("终端输入:", data); // 打印日志
                       this.ws.send(data)
                     })
                },

调试中发现发送的指令会重复发2次,比如pwd命令会发送ppwwdd
尝试删除onData,能正常发送。推测应该是初始化AttachAddon(this.ws)会自动监听键盘按键。
如果不需要这个特性,可以在初始化时添加选项参数:

const attachAddon = new AttachAddon.AttachAddon(this.ws, {
  bidirectional: false,
});

再手动添加onData监测,参考这里。


http://www.kler.cn/a/515574.html

相关文章:

  • MyBatis Plus 的 InnerInterceptor:更轻量级的 SQL 拦截器
  • 迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-添加内核编译
  • WordPress Hunk Companion插件节点逻辑缺陷导致Rce漏洞复现(CVE-2024-9707)(附脚本)
  • YOLOv5训练自己的数据及rknn部署
  • 数据结构:二叉树
  • 小型分布式发电项目优化设计方案
  • 【面试题Java】单例模式
  • 零售业革命:改变行业的顶级物联网用例
  • 算法随笔_17: 回文数
  • Gartner发布2025年网络治理、风险与合规战略路线图
  • 自然语言处理(NLP)-总览图学习
  • Java中回调函数
  • Laravel 实战:用Carbon筛选最近15分钟内的数据
  • 使用EasyExcel(FastExcel) 的模板填充报Create workbook failure
  • c#调用c++的dll,字符串指针参数问题
  • Flutter 使用 flutter_inappwebview 加载 App 本地 HTML 文件
  • QT:控件属性及常用控件(3)-----输入类控件(正则表达式)
  • TangoFlux 本地部署实用教程:开启无限音频创意脑洞
  • Threejs的学习-几何点线面
  • 神经网络|(一)加权平均法,感知机和神经元
  • Linux 切换到 Root 用户的方式及差异详解
  • Vue平台开发三——项目管理页面
  • 用于牙科的多任务视频增强
  • C++priority_queue模拟实现
  • linux 下调试 pac1934 电源监控器
  • AutoPrompt框架和实操:如何用AutoPrompt完成电影评论和聊天审核任务?