Question

我在项目中使用xterm.js，但我无法接受输入。每当我尝试输入终端时，没有任何事情发生，并且没有任何文档或示例说明如何实现此目的。

这就是我所拥有的：

const term = new XTerm({
    cols: 100,
    cursorBlink: true,
    rows: 120
});
term.open(document.getElementById('terminal-window'), true)
term.fit()
term.writeln('Hello World!')

Answer 1

xtermjs是一个公开api的库，它允许我们构建完全基于xterm的终端模拟器。但是对于每个终端功能，您需要通过api实现它。使用事件监听器。并处理它们。将其与其他软件包相结合取决于您想要实现的目标。

这里输入的方法是：

term.on('key', (key, ev) => {
        console.log(key.charCodeAt(0));
        if (key.charCodeAt(0) == 13)
            term.write('\n');
        term.write(key);
});

另一个了解你需要如何操纵以及如何实现目标的例子是：

term.textarea.onkeypress = function (e) {
        term.write(String.fromCharCode(e.keyCode));
}

这里是api的链接，与终端功能有关： https://xtermjs.org/docs/api/terminal/#onevent-callback`

您可以使用term.clear();

清除终端

此处展示 on data event 的工作方式

term.on('data', (data) => {
        term.write(data);
   });

您将看到，通过该事件，您可以处理分派给终端的数据。例如在打字时。

现在确定这一切都很好。但这并不是真正的应用程序的帮助。为了更好地掌握事情，我建议阅读这些文章和链接：

让你立刻开始！知道pty（pseudotty =伪终端），这里node-pty允许我们产生一个终端进程。并有一个对象，允许我们写入终端，从而操纵该终端。然后使用xterm，我们将能够将数据写入pty并从pty获取数据。（你可以这样看：pty是真正的终端运行的灵魂。而xterm是允许我们暴露灵魂的身体，因此可以看到。）xterm和pty都提供数据事件。它变得如此简单：

var os = require('os');
var pty = require('node-pty');
var Terminal = require('xterm').Terminal;

// Initialize node-pty with an appropriate shell
const shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL'];
const ptyProcess = pty.spawn(shell, [], {
  name: 'xterm-color',
  cols: 80,
  rows: 30,
  cwd: process.cwd(),
  env: process.env
});

// Initialize xterm.js and attach it to the DOM
const xterm = new Terminal();
xterm.open(document.getElementById('xterm'));

// Setup communication between xterm.js and node-pty
xterm.on('data', (data) => {
  ptyProcess.write(data);
});
ptyProcess.on('data', function (data) {
  xterm.write(data);
});

了解如何使用on数据事件。什么东西被写入ptyProcess。我们在xterm中写它。当在xterm上写入内容时，我们将其写入ptyProcess。请注意，这是用于电子申请。所以一切都很直接！

现在，如果您正在做的事情不是电子，那么这是一个浏览器到服务器终端。其中xterm将存在于客户端中，并且处理将在服务器上运行。在这种情况下使用node-pty意味着我们将使用nodejs。然后我们需要一些加号。并且 websockets 。原则保持不变，但我们需要通过websocket链接xterm和pty。就是这个想法。 第二个链接中提供的上述示例表达得非常好。项目分为两部分，后端和前端，main.js引用前端，app.js引用后端，xterm代表main.js，app.js代表node-pty。注意该演示中所做的一切。我建议全力以赴，自己测试一下，并运行相同的演示，查看和比较你的简单实现和演示的不同之处。

现在是第三个链接，这是一篇很好的文章，后端不是nodejs。另外可能还有更多细节，因为它是一个教程而不仅仅是一个演示。如果不熟悉后端语言，那就没关系。留下来了解你如何完成工作。即使前两个链接可能就足够了。毕竟由维护这两个项目的人写的。

对于websockets及其原则如下： 您在客户端和服务器之间设置套接字通信。你在服务器中初始化pty。和客户端中的xterm。然后在服务器中，当pty获取数据时，将数据推送到客户端，然后将其写入xterm。并且在客户端中，只要xterm获取数据，您就将其发送到服务器，在那里获取数据并将其写入pty。现在这就是所有简单的事情。还有更多细节。喜欢处理列和行并重新维度。来自第二个链接的演示非常清楚。希望能让你开始，这很有帮助。

如果你喜欢冒险，看看那些在那里实施的终端没有更好的项目，即使这样的项目也会更复杂。对于某些网站，有visual studio code =＆gt;在项目中搜索node-pty。你会找到你的道路。但这里是你需要去的地方： src/vs/workbench/parts/terminal。有超https://github.com/zeit/hyper。这里是更多项目的清单： https://github.com/xtermjs/xterm.js/#real-world-uses

您还可以加载其中一个实现终端或ide的站点，并尝试查看它们如何在服务器端实现xterm。它可以给你很多洞察力。例如：https://aws.amazon.com/cloud9/

为什么你可能需要查看更多项目，它是关于亲和力，以及如何配置xterm，应用所有附加组件，操作字体以及调整大小，搜索。和不同的东西。祝好运！快乐的编码！

Answer 2

对于较新的版本 (xterm.js 4.13)，API 已更改为以下内容：

term.onKey(e => {
    console.log(e.key);
    term.write(e.key);
    if (e.key == '\r')
        term.write('\n');
})

如何使xterm.js接受输入？

2 个答案: