demo · v130

Connection state-machine debugger

Drive a real granted serial / RFCOMM port through permission, open, reader-lock, and close states. The state diagram highlights the current node, the event ticker records browser connect / disconnect events with the value of port.connected at the time, and the right-hand panel shows what a Web Serial app observes via the Chrome 130 API surface.

state diagram



        
actions

        

      

      

        
port observable state

        
port.connected → false

        
port.readable → null

        
port.writable → null

        
port.getInfo() → { usbVendorId: 0x2341, usbProductId: 0x0001 }


        
event ticker

        
(no events yet — start by requesting a port)

      

    


    

      Try the buttons. Request a real serial port, open it, acquire a reader, and close it. Physical attach/detach events come from navigator.serial; port.connected tracks connection independently from whether you've called open().
    

  


  

    
the code


const ports = await navigator.serial.getPorts();
for (const port of ports) {
  console.log("connected (Chrome 130):", port.connected);

  // RFCOMM ports now also fire 'connect' and 'disconnect' events
  port.addEventListener("connect", () => {
    console.log("port is back, re-open if you want");
  });
  port.addEventListener("disconnect", () => {
    console.log("user unplugged the cable / went out of bluetooth range");
  });
}

  


  

    
see also