Co-authored-by: Anthony Schneider <BoredOY@users.noreply.github.com>

Added robustness to Terminal

1 files changed, 23 insertions, 5 deletions

diff --git a/src/App.js b/src/App.js
index 9ab8706..5d4eadb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -59,6 +59,7 @@ class TerminalComponent extends React.Component {
         selection: "#fff",
       },
     });
+    this.isConnecting = false;
   }
 
   componentDidMount() {
@@ -73,11 +74,13 @@ class TerminalComponent extends React.Component {
 
     // Terminal events
     this.term.onData((data) => {
-      this.socket.send(this.encoder.encode("\x00" + data));
+      //this.socket.send(this.encoder.encode("\x00" + data));
+      this.handleSend(this.encoder.encode("\x00" + data));
     });
 
     this.term.onResize((evt) => {
-      this.socket.send(this.encoder.encode("\x01" + JSON.stringify({ cols: evt.cols, rows: evt.rows })))
+      //this.socket.send(this.encoder.encode("\x01" + JSON.stringify({ cols: evt.cols, rows: evt.rows })));
+      this.handleSend(this.encoder.encode("\x01" + JSON.stringify({ cols: evt.cols, rows: evt.rows })));
     });
 
     this.term.onTitleChange((title) => {
@@ -106,6 +109,21 @@ class TerminalComponent extends React.Component {
     this.fitAddon.fit();
   }
 
+  handleSend(message) {
+    if (this.socket.readyState === WebSocket.OPEN) {
+      this.isConnecting = false;
+      this.socket.send(message);
+    }
+    else if (this.socket.readyState === WebSocket.CONNECTING && !this.isConnecting) {
+      this.isConnecting = true;
+      this.socket.addEventListener('open', this.handleSend(message));
+    }
+    else {
+
+    }
+  };
+
+
   render() {
     return (
       <div className="terminalContainer">
@@ -144,9 +162,9 @@ class Sidebar extends React.Component {
     return (
       <div className="sidenav">
         <ul>
-        <li><div class="sidenavButton" onClick={() => this.createTemplate()}>Create Template</div></li>
-        <li><div class="sidenavButton" onClick={() => this.toStudentView()}>View as Student</div></li>
-        <li><div class="sidenavButton" onClick={() => this.logOut()}>Log Out</div></li>
+        <li><div className="sidenavButton" onClick={() => this.createTemplate()}>Create Template</div></li>
+        <li><div className="sidenavButton" onClick={() => this.toStudentView()}>View as Student</div></li>
+        <li><div className="sidenavButton" onClick={() => this.logOut()}>Log Out</div></li>
         </ul>
       </div>
     );