diff options
Diffstat (limited to 'src/App.js')
-rw-r--r-- | src/App.js | 56 |
1 files changed, 31 insertions, 25 deletions
@@ -1,19 +1,14 @@ import logo from './logo.svg'; import './App.css'; import { Terminal } from 'xterm'; -import './xterm.css' -import { AttachAddon } from 'xterm-addon-attach'; +import './xterm.css'; 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({ + constructor(props) { + super(props); + this.term = new Terminal({ convertEol: true, cursorBlink: true, fontSize: 18, @@ -26,23 +21,34 @@ export default class App extends React.Component { selection: "#fff", }, }); - const socket = new WebSocket('ws://172.21.110.173:3001/ws'); - const attachAddon = new AttachAddon(socket); - term.loadAddon(fitAddon); - term.loadAddon(attachAddon); + } + + componentDidMount() { + + this.encoder = new TextEncoder(); + this.decoder = new TextDecoder(); + this.socket = new WebSocket('ws://localhost:8000/ws'); + this.socket.binaryType = 'arraybuffer'; + + this.fitAddon = new FitAddon(); + // this.attachAddon = new AttachAddon(this.socket, false); + + this.term.loadAddon(this.fitAddon); + // this.term.loadAddon(this.attachAddon); + + this.term.open(document.getElementById("xterm")); + this.fitAddon.fit(); - term.open(document.getElementById("xterm")); - fitAddon.fit(); + this.socket.onmessage = e => { + const data = e.data; + console.log('Received data: ', data); + this.term.write(typeof data === 'string' ? data : this.decoder.decode(data)); + }; - 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.term.onKey(Key => { + const data = Key.key; + console.log('Sent data: ', data); + this.socket.send(this.encoder.encode(data)); }); this.linefeed(); @@ -50,7 +56,7 @@ export default class App extends React.Component { linefeed = () => { var shellprompt = "$ "; - term.write("\r\n" + shellprompt); + this.term.write("\r\n" + shellprompt); }; render() { |