Как заставить xterm.js принять ввод?

Я использую xterm.js для проекта, но я не могу заставить его принимать входные данные. Всякий раз, когда я пытаюсь ввести терминал, ничего не происходит, и нет документации или примеров, рассказывающих, как это сделать.

Ответ 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();

Вот пример, который показывает, как работает событие данных work

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

вы увидите, что с этим событием вы можете обрабатывать данные, отправляемые на терминал. например, при наборе текста.

СЕЙЧАС уверен, что это все хорошо. Но это не то, что Gona поможет с реальным приложением. Чтобы лучше понять, как обстоят дела, я предлагаю прочитать эти статьи и ссылки:

чтобы вы начали прямо сейчас! знать, что 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 data. когда что-то пишется в ptyProcess. мы пишем это в xterm. и когда что-то пишется на xterm, мы записываем это в ptyProcess. обратите внимание, что это для электронного приложения. так что все прямо вперед!

Теперь, если то, что вы делаете, не обходится без электронов, а это браузер на серверный терминал. где xterm будет жить на клиенте, а обработка будет выполняться на сервере. что в этом случае с использованием node-pty означает, что мы будем использовать nodejs. тогда нам нужно что-то в плюс. и что паутина. принцип остается прежним, но нам нужно связать xterm и pty через websocket. Вот это идея. приведенный выше пример во второй ссылке очень хорошо это выражает. проект состоит из двух частей: backend и front-end, main.js ссылаются на front-end, а app.js - на backend, а xterm будет в main.js, а app.js будет содержать node-pty. обратите внимание на все, что сделано в этой демонстрации. Я предлагаю пройти через все это, проверить себя самостоятельно, а также запустить ту же самую демонстрацию, чтобы увидеть и сравнить то, чего вы просто достигли, и то, что отличается от демонстрации.

Теперь третья ссылка, хорошая статья, где бэкэнд не является nodejs. Плюс, может быть, есть больше деталей, потому что это учебник, а не просто демо. Если не знаком с фоновым языком, то здесь все в порядке. это пребывание дает отличную идею о том, как вы выполняете работу. Хотя первых двух ссылок может хватить и больше. В конце концов, написано тем, кто поддерживает оба проекта.

Для веб-сокетов и принципов это следующим образом: Вы устанавливаете сокетную связь между клиентом и сервером. Вы инициализируете pty на сервере. и xterm в клиенте. затем на сервере когда данные получаются, вы отправляете эти данные клиенту, где берете их и записываете в xterm. И так же, как и в клиенте, всякий раз, когда xterm получает данные, вы отправляете их на сервер, где вы получаете данные и записываете их в pty. теперь, когда на все простые вещи. есть больше деталей к этому. как обработка столбцов и строк и изменение размеров. демо из второй ссылки очень хорошо показывают, что. Надеюсь, что вы начали, и это полезно.

Если вы любите приключения, посмотрите на какой-нибудь проект, где такой терминал, где он реализован, не лучше, даже такие проекты могут быть более сложными. Для сайта некоторые, есть визуальный код студии => поиск проекта по 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, применяете все дополнения, манипулируете шрифтом и изменяете размер, ищите. и разные вещи. Удачи! Удачного кодирования!

Как заставить xterm.js принять ввод?

Ответы

Ответ 1