<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SerialPort connected</title>
  </head>
  <body>
    <h1>SerialPort connected</h1>
    <a href="https://developer.chrome.com/blog/bluetooth-rfcomm-updates-web-serial">https://developer.chrome.com/blog/bluetooth-rfcomm-updates-web-serial</a>
    <button id="requestPortButton">
      request port
    </button>
    <hr />
    <div id="logs"></div>
  </body>
</html>

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  margin-block-end: 0;
}
a {
  display: block;
  margin-block-end: 1.4em;
}

#logs {
  margin-top: 1em;
  white-space: pre-wrap;
}

@media screen and (min-width: 640px) {
  body {
    margin: 2em auto;
    max-width: calc(640px - 2em);
  }
}

navigator.serial.getPorts().then((ports) => {
  for (const port of ports)
    log(`Got serial port. Connected: ${port.connected}`);
});

navigator.serial.onconnect = ({ target: port }) => {
  log(`onconnect event fired. Connected: ${port.connected}`);
};
navigator.serial.ondisconnect = ({ target: port }) => {
  log(`ondisconnect event fired. Connected: ${port.connected}`);
};

requestPortButton.onclick = async () => {
  const port = await navigator.serial.requestPort();
  log(`Requested serial port. Connected: ${port.connected}`);
};

function log(text) {
  logs.innerHTML += `${text}\r\n`;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.