|
| 1 | +--- |
| 2 | +title: "SerialPort: connected property" |
| 3 | +short-title: connected |
| 4 | +slug: Web/API/SerialPort/connected |
| 5 | +page-type: web-api-instance-property |
| 6 | +status: |
| 7 | + - experimental |
| 8 | +browser-compat: api.SerialPort.connected |
| 9 | +--- |
| 10 | + |
| 11 | +{{SecureContext_Header}}{{APIRef("Web Serial API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}} |
| 12 | + |
| 13 | +The **`connected`** read-only property of the {{domxref("SerialPort")}} interface returns a boolean value that indicates whether the port is [logically connected](/en-US/docs/Web/API/SerialPort/connect_event#description) to the device. |
| 14 | + |
| 15 | +## Description |
| 16 | + |
| 17 | +When a wireless device goes out of range of the host, any wireless serial port opened by a web app automatically closes, even though it stays logically connected. In such cases, the web app could attempt to reopen the port using {{domxref("SerialPort.open()")}}. |
| 18 | + |
| 19 | +However, if the wireless device was intentionally disconnected (for example, if the user chose to disconnect it using the operating system control panel), the web app should refrain from reopening the port to prevent reconnecting to the wireless device. |
| 20 | + |
| 21 | +The following snippet shows how the `connected` property can be used to distinguish between these two cases: |
| 22 | + |
| 23 | +```js |
| 24 | +const ports = await navigator.serial.getPorts(); |
| 25 | +for (const port of ports) { |
| 26 | + if (port.connected) { |
| 27 | + // The port is logically connected |
| 28 | + // automatically try to reopen the port |
| 29 | + await port.open({ baudRate: 9600 }); |
| 30 | + } else { |
| 31 | + // The port is not logically connected; at this point you could |
| 32 | + // prompt the user to make sure the Bluetooth device is available, and |
| 33 | + // Show a "connect" button to allow them to try opening the port if desired |
| 34 | + } |
| 35 | +} |
| 36 | +``` |
| 37 | + |
| 38 | +## Value |
| 39 | + |
| 40 | +A boolean — `true` if the port is logically connected, and `false` if not. |
| 41 | + |
| 42 | +## Examples |
| 43 | + |
| 44 | +### Logging when a port is connected |
| 45 | + |
| 46 | +The following snippet invokes {{domxref("Serial.requestPort()")}} when the user presses a {{htmlelement("button")}}, prompting them to choose a serial port to connect to, then logs a message to the console reporting the connection status: |
| 47 | + |
| 48 | +```js |
| 49 | +requestPortButton.addEventListener("click", async () => { |
| 50 | + const port = await navigator.serial.requestPort(); |
| 51 | + console.log(`Requested serial port. Connected: ${port.connected}`); |
| 52 | +}); |
| 53 | +``` |
| 54 | + |
| 55 | +### Logging connection status on connect and disconnect |
| 56 | + |
| 57 | +You can use the following snippet to log the connection status when the {{domxref("SerialPort.connect_event", "connect")}} and {{domxref("SerialPort.disconnect_event", "disconnect")}} events fire: |
| 58 | + |
| 59 | +```js |
| 60 | +navigator.serial.addEventListener("connect", ({ target: port }) => { |
| 61 | + console.log(`Connect event fired. Connected: ${port.connected}`); |
| 62 | +}); |
| 63 | + |
| 64 | +navigator.serial.addEventListener("disconnect", ({ target: port }) => { |
| 65 | + console.log(`Disconnect event fired. Connected: ${port.connected}`); |
| 66 | +}); |
| 67 | +``` |
| 68 | + |
| 69 | +## Specifications |
| 70 | + |
| 71 | +{{Specifications}} |
| 72 | + |
| 73 | +## Browser compatibility |
| 74 | + |
| 75 | +{{Compat}} |
0 commit comments