1 files changed, 31 insertions, 25 deletions

diff --git a/src/App.js b/src/App.js
index 1d72da7..1db7b96 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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() {