diff --git a/supervisor/shared/web_workflow/static/serial.html b/supervisor/shared/web_workflow/static/serial.html index d8ab86a7c8..aaf416b8b3 100644 --- a/supervisor/shared/web_workflow/static/serial.html +++ b/supervisor/shared/web_workflow/static/serial.html @@ -1,14 +1,24 @@ - + + Simple client - - 

-  
-  
-  
+
+  

+    

+     
+  

+  

+    

+      Ctrl
+      
+      
+    

+    
+    
+  

 
 
diff --git a/supervisor/shared/web_workflow/static/serial.js b/supervisor/shared/web_workflow/static/serial.js
index ab0893ad08..595bbe6653 100644
--- a/supervisor/shared/web_workflow/static/serial.js
+++ b/supervisor/shared/web_workflow/static/serial.js
@@ -1,7 +1,9 @@
 
 var ws;
 var input = document.getElementById("input");
+input.value = "";
 var title = document.querySelector("title");
+var log = document.getElementById("log");
 
 function set_enabled(enabled) {
   input.disabled = !enabled;
@@ -14,35 +16,21 @@ function set_enabled(enabled) {
 set_enabled(false);
 
 function onSubmit() {
-  console.log("submit");
-  // You can send message to the Web Socket using ws.send.
-  ws.send(input.value);
-  // output("send: " + input.value);
-  input.value = "";
-  input.focus();
-}
-
-function onCloseClick() {
-  console.log("close clicked");
-  ws.close();
-}
-
-function output(str) {
-  var log = document.getElementById("log");
-  log.innerHTML += str;
+    ws.send("\r");
+    input.value = "";
+    input.focus();
 }
 
 // Connect to Web Socket
-ws = new WebSocket("ws://cpy-f57ce8.local/cp/serial/");
-// ws = new WebSocket("ws://127.0.0.1:9001")
+ws = new WebSocket("ws://" + window.location.host + "/cp/serial/");
 
-// Set event handlers.
 ws.onopen = function() {
-  console.log("onopen");
   set_enabled(true);
 };
 
 var setting_title = false;
+var encoder = new TextEncoder();
+var left_count = 0;
 ws.onmessage = function(e) {
   // e.data contains received string.
   if (e.data == "\x1b]0;") {
@@ -52,22 +40,44 @@ ws.onmessage = function(e) {
     setting_title = false;
   } else if (setting_title) {
     title.textContent += e.data;
+  } else if (e.data == "\b") {
+    left_count += 1;
+  } else if (e.data == "\x1b[K") { // Clear line
+    log.textContent = log.textContent.slice(0, -left_count);
+    left_count = 0;
   } else {
-    output(e.data);
+    log.textContent += e.data;
   }
+  document.querySelector("span").scrollIntoView();
 };
 
 ws.onclose = function() {
-  console.log("onclose");
   set_enabled(false);
 };
 
 ws.onerror = function(e) {
-  // output("onerror");
-  console.log(e);
   set_enabled(false);
 };
 
 input.onbeforeinput = function(e) {
-  console.log(e);
+  if (e.inputType == "insertLineBreak") {
+    ws.send("\r");
+    input.value = "";
+    input.focus();
+    e.preventDefault();
+  } else if (e.inputType == "insertText") {
+    ws.send(e.data);
+  } else if (e.inputType == "deleteContentBackward") {
+    ws.send("\b");
+  }
+}
+
+let ctrl_c = document.querySelector("#c");
+ctrl_c.onclick = function() {
+  ws.send("\x03");
+}
+
+let ctrl_d = document.querySelector("#d");
+ctrl_d.onclick = function() {
+  ws.send("\x04");
 }
diff --git a/supervisor/shared/web_workflow/websocket.c b/supervisor/shared/web_workflow/websocket.c
index 0f4c4fc84c..7a2f37b168 100644
--- a/supervisor/shared/web_workflow/websocket.c
+++ b/supervisor/shared/web_workflow/websocket.c
@@ -124,7 +124,6 @@ static void _read_next_frame_header(void) {
         size_t mask_offset = cp_serial.frame_index - mask_start;
         cp_serial.mask[mask_offset] = h;
         cp_serial.frame_index++;
-        ESP_LOGI(TAG, "mask %08x", (uint32_t)*cp_serial.mask);
     }
     // Reply to PINGs and CLOSE.
     while ((cp_serial.opcode == 0x8 ||
@@ -136,6 +135,11 @@ static void _read_next_frame_header(void) {
             if (cp_serial.opcode == 0x9) {
                 ESP_LOGI(TAG, "websocket ping");
                 opcode = 0xA; // PONG
+            } else {
+                // Set the TCP socket to send immediately so that we send the payload back before
+                // closing the connection.
+                int nodelay = 1;
+                lwip_setsockopt(cp_serial.socket.num, IPPROTO_TCP, TCP_NODELAY, &nodelay, sizeof(nodelay));
             }
             uint8_t frame_header[2];
             frame_header[0] = 1 << 7 | opcode;
@@ -158,6 +162,8 @@ static void _read_next_frame_header(void) {
             if (cp_serial.opcode == 0x8) {
                 ESP_LOGI(TAG, "websocket closed");
                 cp_serial.closed = true;
+
+                common_hal_socketpool_socket_close(&cp_serial.socket);
             }
         }
     }
@@ -193,6 +199,7 @@ bool websocket_available(void) {
 char websocket_read_char(void) {
     uint8_t c;
     _read_next_payload_byte(&c);
+    ESP_LOGI(TAG, "read %c", c);
     return c;
 }