web-dev-qa-db-fra.com

Comment faire pour que xterm.js accepte les entrées?

J'utilise xterm.js pour un projet mais je n'arrive pas à l'accepter. Chaque fois que j'essaie de taper dans le terminal, rien ne se passe et il n'y a pas de documentation ou d'exemples expliquant comment y parvenir.

Voici ce que j'ai:

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

xtermjs est une bibliothèque qui expose une API, qui nous permet de construire un émulateur de terminal entièrement basé sur xterm. Mais pour chacune des fonctionnalités du terminal, vous devez l'implémenter via l'API. Utilisation des écouteurs d'événement. Et les manipuler. Et le combiner avec d'autres packages dépend de ce que vous souhaitez réaliser.

Voici comment procéder:

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

Un autre exemple pour voir comment vous devez manipuler et comment vous pouvez réaliser des choses est:

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

ici le lien vers l'api, lié aux fonctionnalités du terminal: https: // xtermjs.org/docs/api/terminal/# onevent-callback`

vous pouvez par exemple effacer le terminal en utilisant term.clear();

ici un exemple qui montre comment le sur l'événement de données fonctionne

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

vous verrez qu'avec cet événement, vous pouvez gérer les données qui sont envoyées au terminal. par exemple lors de la frappe.

MAINTENANT, c'est tout bon. Mais ce n'est pas ce que gona aide avec une vraie application. Pour mieux comprendre comment les choses se passent, je suggère la lecture de ces articles et liens:

pour vous lancer tout de suite! sachez que pty (pseudotty = pseudo terminal), ici node-pty nous permet de générer un processus terminal. et avoir un objet qui nous permet d'écrire sur le terminal et ainsi de manipuler ce terminal. puis en utilisant xterm, nous pourrons écrire des données sur le pty et obtenir des données du pty. (vous pouvez le voir comme ceci: le pty est l'âme le vrai terminal qui court. et xterm le corps qui nous permet d'exposer cette âme et ainsi de voir.) xterm et pty fournissent tous les deux un événement sur les données. et c'est devenu aussi simple que ça:

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);
});

voir comment l'événement on data est utilisé. quand quelque chose est écrit dans ptyProcess. nous l'écrivons en xterm. et quand quelque chose est écrit sur xterm, nous l'écrivons dans le processus ptyProcess. notez qu'il s'agit d'une application électronique. donc tout est simple!

Maintenant, si ce que vous faites n'est pas sans électron et c'est un navigateur vers un terminal serveur. où xterm vivra dans le client et le traitement s'exécutera sur le serveur. qui dans ce cas en utilisant node-pty signifie que nous utiliserons nodejs. alors nous avons besoin de quelque chose en plus. et que les websockets . le principe reste le même, mais nous devrons lier xterm et le pty via le websocket. C'est ça l'idée. l'exemple ci-dessus fourni dans le deuxième lien l'exprime très bien. le projet est en deux parties, le backend et le front end, main.js fait référence au front end et app.js au backend, et xterm sera dans le main.js et app.js contient node-pty. faites attention à tout ce qui se fait dans cette démo. Je suggère de passer par tout cela, de tester les choses par vous-même, et également d'exécuter la même démo, de voir et de comparer entre ce que vous réalisez simplement et ce qui est différent avec la démo.

Maintenant troisième lien , un bon article, où le backend n'est pas nodejs. De plus, il y a plus de détails car c'est un tutoriel et pas seulement une démo. Si vous n'êtes pas familier avec le langage principal ici, c'est ok. ce séjour donne une excellente idée de la façon dont vous accomplissez le travail. Même si les deux premiers liens peuvent suffire en plus. après tout, ils sont écrits par celui qui maintient les deux projets.

Pour les websockets et les principes c'est comme suit: vous définissez une communication socket entre le client et le serveur. vous initiez le pty sur le serveur. et xterm dans le client. puis sur le serveur chaque fois que le pty obtient des données, vous poussez ces données vers le client, où vous les prenez et les écrivez dans xterm. Et comme pour le client chaque fois que xterm obtient des données, vous les envoyez au serveur, où vous obtenez les données et les écrivez sur le pty. maintenant c'est à toutes les choses simples. il y a plus de détails. comme gérer les colonnes et les lignes et redimensionner. la démo du deuxième lien le montre très bien. J'espère que cela vous aidera à démarrer et cela vous sera utile.

si vous êtes aventureux, en regardant un projet où un tel terminal est implémenté, il n'y a pas mieux, même de tels projets peuvent être plus compliqués. Pour en localiser certains, il existe du code Visual Studio => recherchez le projet pour node-pty. vous trouverez votre route. mais voici où vous devez aller pour le découper: src/vs/workbench/parts/terminal. il y a hyper https://github.com/zeit/hyper . et voici la liste pour plus de projets: https://github.com/xtermjs/xterm.js/#real-world-uses

vous pouvez également charger l'un des sites qui implémentent un terminal ou une idée et essayer de voir comment ils ont implémenté xterm côté serveur. cela peut vous donner beaucoup d'informations. exemple: https://aws.Amazon.com/cloud9/

pourquoi vous devrez peut-être regarder plus de projets, il s'agit de l'affinité et de la façon dont vous configurez xterm, appliquez tous les modules complémentaires, manipulez la police et redimensionnez, recherchez. et différentes choses. Bonne chance! codage heureux!

29
Mohamed Allal