Working disconnect

README.md

@@ -1,6 +1,6 @@
 # Web Serial Console
 
-Serial console access in the browser! This project uses an [experimental Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API) available, as of 08/06/2024, on Chrome 89+, Edge 89+, or Opera 75+.
+Serial console access in the browser! This project uses an [experimental Web Serial API](https://wicg.github.io/serial/) available, as of 08/06/2024, on Chrome 89+, Edge 89+, or Opera 75+.
 
 This is a work in progress and a learning experiment. Feel free to file an issue if you encounter one.
 

script.js

@@ -35,18 +35,6 @@ clearButton.addEventListener('click', () => {
     }
 });
 
-function onPortConnect(){
-    connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
-    connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
-    connectButton.textContent = 'Disconnect';
-}
-
-function onPortDisconnect(){
-    connectButton.classList.remove('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
-    connectButton.classList.add('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
-    connectButton.textContent = 'Connect';
-}
-
 connectButton.addEventListener('click', async () => {
     const selectedPort = serialPorts[select.selectedIndex]
     const baudRate = Math.round(baud.value)
@@ -64,6 +52,19 @@ refreshPorts.addEventListener('click', async () => {
 });
 
 // Functions
+function onPortConnect() {
+    connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
+    connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
+    connectButton.textContent = 'Disconnect';
+}
+
+function onPortDisconnect() {
+    connectButton.classList.remove('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
+    connectButton.classList.add('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
+    connectButton.textContent = 'Connect';
+}
+
+
 function buildPortOption(port) {
     const option = document.createElement('option');
     option.value = port;
@@ -99,36 +100,14 @@ function scrollToBottom() {
     scrollableElement.scrollTop = scrollableElement.scrollHeight;
 }
 
-// function onSerialConnect() {
-//     console.log("connected to port")
-//     connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
-//     connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
-//     connectButton.textContent = 'Disconnect';
-//     isPortConnected = port;
-// }
-
 // Async Functions
 async function connectToSerialPort(port, baud) {
-    port.addEventListener("onconnect", () => {
-        console.log("connected to port")
-        connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
-        connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
-        connectButton.textContent = 'Disconnect';
-        isPortConnected = true;
-    });
-
-    port.addEventListener('ondisconnect', () => {
-        console.log("disconnect from port")
-        connectButton.classList.remove('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
-        connectButton.classList.add('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
-        connectButton.textContent = 'Connect';
-        isPortConnected = false;
-    });
-
-    console.log("Opening port")
     await port.open({ baudRate: baud });
     onPortConnect()
+
     let buffer = ''
+    // The TextDecoderStream interface of the Encoding API converts a stream of text in a binary encoding,
+    // such as UTF-8 etc., to a stream of strings
     const textDecoder = new TextDecoderStream();
     const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
     reader = textDecoder.readable.getReader();
@@ -137,7 +116,7 @@ async function connectToSerialPort(port, baud) {
     try {
         isPortConnected = true;
         while (isPortConnected) {
-            const { value, done } = await reader.read({signal});
+            const { value, done } = await reader.read({ signal });
             if (done) {
                 break;
             }
@@ -155,23 +134,25 @@ async function connectToSerialPort(port, baud) {
     } catch (error) {
         console.error('Error reading data from serial port:', error);
     } finally {
-        console.log("Calling abort on read")
         controller.abort();
-        console.log("Calling releaseLock on reader")
+
         reader.releaseLock();
         try {
-            // Gracefully close the stream
             await textDecoder.readable.cancel();
         } catch (error) {
             console.error("Error encountered in readableStreamClosed:", error);
         }
+
+        try {
+            await readableStreamClosed;
+        } catch (error) {
+        }
+
         try {
-            console.log("Trying to close port")
             await port.close();
         } catch (error) {
             console.error("Error encountered closing port:", error);
         }
-        console.log("Disconnected from port")
         onPortDisconnect()
     }
 }
@@ -189,5 +170,4 @@ async function updateSerialSelect(ports) {
         const option = buildPortOption(port)
         select.appendChild(option);
     });
-    console.log('ports updated')
 }