web-dev-qa-db-ja.com

xterm.jsに入力を許可させるには？

プロジェクトに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!')
javascriptterminalxterm
16
corasan

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

そのイベントで、ターミナルにディスパッチされたデータを処理できることがわかります。たとえば、タイプするとき。

これですべて問題ないことを確認してください。しかし、それはgonaが実際のアプリで役立つものではありません。物事の状況をよりよく理解するために、これらの記事とリンクを読むことをお勧めします。

あなたがすぐに始めるために！ pty（pseudotty = pseudo terminal）を知っています。ここで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に書き込みます。これは電子アプリケーション用であることに注意してください。だからすべてが簡単です！

さて、あなたがしていることがelectronを使わないことではなく、それがサーバーターミナルへのブラウザであるなら。ここで、xtermはクライアントに存在し、処理はサーバーで実行されます。その場合、node-ptyを使用すると、nodejsが使用されます。次にプラスのものが必要です。そしてwebsocketsです。原則は同じですが、xtermとptyをWebソケットを介してリンクする必要があります。それがアイデアです。 2番目のリンクで提供される上記の例は、それを非常によく表現しています。プロジェクトは2つの部分にあります。バックエンドとフロントエンドです。main.jsはフロントエンドを示し、app.jsはバックエンドを示します。xtermはmain.jsにあり、app.jsにはnode-ptyが含まれます。そのデモで行われるすべてのことに注意してください。全体を確認し、自分でテストして、同じデモを実行して、単に達成したこととデモとの違いを確認して比較することをお勧めします。

3番目のリンクは、バックエンドがnodejsではない優れた記事です。さらに、それは単なるデモではなくチュートリアルであるため、詳細情報があるかもしれません。ここでバックエンド言語に精通していなくても大丈夫です。それはあなたがどのように仕事を成し遂げるかについての素晴らしい考えを与え続けます。最初の2つのリンクで十分かもしれませんが、それ以上です。結局のところ、両方のプロジェクトを管理している人が書いています。

Webソケットとその原理については、次のとおりです。クライアントとサーバー間のソケット通信を設定します。サーバーでptyを初期化します。クライアントのxterm。次に、サーバーでptyがデータを取得するたびに、そのデータをクライアントにプッシュします。クライアントは、そのデータを取得してxtermに書き込みます。そして、クライアントでも同じように、xtermがデータを取得するたびに、サーバーに送信します。サーバーは、データを取得して、ptyに書き込みます。今では、それは非常に簡単なことです。詳細はここにあります。列と行の処理と再次元化のように。 2番目のリンクのデモはそれをよく示しています。あなたが始められることを願っています、そしてそれは役に立ちます。

あなたが冒険的であるならば、そのような端末が実装されているそのような端末が良くないいくつかのプロジェクトを見て、そのようなプロジェクトでさえもっと複雑になる可能性があります。いくつかを見つけるために、ビジュアルスタジオコードがあります=> node-ptyのプロジェクトを検索します。あなたの道を見つけるでしょう。しかし、ここでそれを切り取る必要があります：_src/vs/workbench/parts/terminal_。ハイパー https://github.com/zeit/hyper があります。その他のプロジェクトのリスト： https://github.com/xtermjs/xterm.js/#real-world-uses

また、ターミナルまたはIDEを実装するサイトの1つをロードして、サーバー側でどのようにxtermを実装したかを確認することもできます。それはあなたに多くの洞察を与えることができます。例： https://aws.Amazon.com/cloud9/

より多くのプロジェクトを調べる必要がある理由、それは親和性について、そしてxtermの構成方法、すべてのアドオンの適用方法、フォントの操作方法、サイズ変更、検索方法です。そして別のもの。幸運を！幸せなコーディング！

29
Mohamed Allal