src/App.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

import logo from './logo.svg';
import './App.css';
import { Terminal } from 'xterm';
import './xterm.css'
import { AttachAddon } from 'xterm-addon-attach';
import { FitAddon } from 'xterm-addon-fit';
import React from 'react';

let term;
const fitAddon = new FitAddon();
let buff = [];

export default class App extends React.Component {

  componentDidMount() {
    term = new Terminal({
      convertEol: true,
      cursorBlink: true,
      fontSize: 18,
      fontWeight: 900,
      theme: {
        foreground: "#fff",
        background: "#000",
        cursor: "#fff",
        cursorAccent: "#000",
        selection: "#fff",
      },
    });
    const socket = new WebSocket('ws://172.21.110.173:3001/ws');
    const attachAddon = new AttachAddon(socket);
    term.loadAddon(fitAddon);
    term.loadAddon(attachAddon);

    term.open(document.getElementById("xterm"));
    fitAddon.fit();

    term.onKey(Key => {
      const char = Key.domEvent.key;
      if (char === "Enter") {
        this.linefeed();
      } else if (char === "Backspace") {
        term.write("\b \b");
      } else {
        term.write(char);
      }
    });

    this.linefeed();
  }

  linefeed = () => {
    var shellprompt = "$ ";
    term.write("\r\n" + shellprompt);
  };

  render() {
    return (
      <div className='App'>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <div className="terminalContainer">
            <div id="xterm"></div>
          </div>
        </header>
      </div>
    );
  }
}