Xterm js Terminal
In this article, I will explain about creating a terminal using Xterm js.
What is Xterm js
Xterm.js is a front-end component written in TypeScript that lets applications bring fully-featured terminals to their users in the browser. It’s used by popular projects such as VS Code, Hyper and Theia. — Xterm
Using Xterm.js and plain javascript we can create terminal and perform all operations. In this example, I will explain about the operation of typing in the terminal and hit ‘Enter’ and ‘Backspace’ key.
Using the above code it shows only terminal view but we could not type anything. I struggled how to type and make API call but finally, I found solutions.
Create a Terminal
Installations
$ mkdir xterm-demo
$ cd xterm-demo
$ npm install xtermAfter installation is completed the move to the code. Imported all the things we need to run applications.
The below code is the need for typing in terminal.
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>Type in terminal
Using the above code we can type whatever we want. But we could not type ‘Enter’ key makes the call and display output.
In the above code ev.keyCode we get the key-value we typed each key has a unique value. For example key code 13 is for ‘Enter’ key. If the user press ‘Enter’ key it called the term.prompt(); Inside the term.prompt() we send our command to server through socket.io.
Handle the Backspace button.
Using the above code we delete the letter of the command. “\b \b” is for backspace it reflects in the terminal.
Paste the values
Using the above code we can paste the value in the terminal. After paste, your value then hit the ‘Enter’ button it will reflect. Below I attached my source code.
Thanks for reading! Have a nice day.
Reference link:
Git code: https://github.com/EdisonDevadoss/xterm-terminal-demo
