Skip to content

Commit

Permalink
Add docs on SerialPort.connected and Bluetooth port event support
Browse files Browse the repository at this point in the history
  • Loading branch information
chrisdavidmills committed Nov 27, 2024
1 parent c1fd7dc commit e8fd193
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 18 deletions.
21 changes: 13 additions & 8 deletions files/en-us/web/api/serialport/connect_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,20 @@ browser-compat: api.SerialPort.connect_event

{{APIRef("Web Serial API")}}{{SecureContext_Header}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}}

The **`connect`** event of the {{domxref("SerialPort")}} interface is fired when a port has connected to the device. This event is only fired for ports associated with removable devices such as those connected via USB.
The **`connect`** event of the {{domxref("SerialPort")}} interface is fired when the port connects to the device.

This event bubbles to the instance of {{domxref("Serial")}} that returned this interface.
## Description

More specifically, the `connect` event fires when a user grants permission for a site to access the port following a {{domxref("Serial.requestPort()")}} call, and the port becomes **logically connected** to the device:

- In the case of a wired serial port, this occurs when the port is physically connected to the device, for example via USB.
- In the case of a wireless serial port (for example, Bluetooth RFCOMM), this occurs when the port makes one or more active connections to the device (for example via Bluetooth L2CAP channels).

### Bubbling

This event bubbles to the instance of {{domxref("Serial")}} that returned this interface. The `event.target` property refers to the {{domxref('SerialPort')}} object that bubbles up.

For more information, see [Event bubbling](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling).

## Syntax

Expand All @@ -28,12 +39,6 @@ onconnect = (event) => {};

A generic {{domxref("Event")}}.

## Bubbling

This event bubbles to {{domxref("Serial")}}. The `event.target` property refers to the {{domxref('SerialPort')}} object that bubbles up.

For more information, see [Event bubbling](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling).

## Examples

### Notify when a specific port connects
Expand Down
61 changes: 61 additions & 0 deletions files/en-us/web/api/serialport/connected/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
title: "SerialPort: connected property"
short-title: connected
slug: Web/API/SerialPort/connected
page-type: web-api-instance-property
status:
- experimental
browser-compat: api.SerialPort.connected
---

{{SecureContext_Header}}{{APIRef("Web Serial API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}}

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.

## Value

A boolean — `true` if the port is logically connected, and `false` if not.

## Examples

### Logging when a port is connected

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:

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

### Determining whether to automatically reconnect to a Bluetooth device

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()")}}.

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.

The following snippet shows how the `connected` property can be used to distinguish between these two cases:

```js
const ports = await navigator.serial.getPorts();
for (const port of ports) {
if (port.connected) {
// The port is logically connected
// automatically try to connect to the Bluetooth device
await port.open({ baudRate: 9600 });
} else {
// The port is not logically connected; at this point you could
// prompt the user to make sure the Bluetooth device is available, and
// Show a "connect" button to allow them to try opening the port if desired
}
}
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}
18 changes: 10 additions & 8 deletions files/en-us/web/api/serialport/disconnect_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@ browser-compat: api.SerialPort.disconnect_event

{{SecureContext_Header}}{{APIRef("Web Serial API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}}

The **`disconnect`** event of the {{domxref("SerialPort")}} interface is fired when the port has disconnected from the device. This event is only fired for ports associated with removable devices such as those connected via USB.
The **`disconnect`** event of the {{domxref("SerialPort")}} interface is fired when the port disconnects from the device.

This event bubbles to the instance of {{domxref("Serial")}} that returned this interface.
## Description

More specifically, the `disconnect` event fires when a port that was previously [logically connected](/en-US/docs/Web/API/SerialPort/connect_event#description) after a user granted permission for a site to access it (following a {{domxref("Serial.requestPort()")}} call) is no longer connected.

### Bubbling

This event bubbles to the instance of {{domxref("Serial")}} that returned this interface. The `event.target` property refers to the {{domxref('SerialPort')}} object that bubbles up.

For more information, see [Event bubbling](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling).

## Syntax

Expand All @@ -28,12 +36,6 @@ ondisconnect = (event) => {};

A generic {{domxref("Event")}}.

## Bubbling

This event bubbles to {{domxref("Serial")}}. The `event.target` property refers to the {{domxref('SerialPort')}} object that bubbles up.

For more information, see [Event bubbling](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling).

## Examples

### Notify when a specific port disconnects
Expand Down
6 changes: 4 additions & 2 deletions files/en-us/web/api/serialport/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ Instances of this interface may be obtained by calling methods of the {{domxref(

## Instance properties

- {{domxref("SerialPort.connected")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : Returns a boolean value that indicates whether the port is logically connected to the device.
- {{domxref("SerialPort.readable")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : Returns a {{domxref("ReadableStream")}} for receiving data from the device connected to the port.
- {{domxref("SerialPort.writable")}} {{ReadOnlyInline}} {{Experimental_Inline}}
Expand All @@ -42,9 +44,9 @@ Instances of this interface may be obtained by calling methods of the {{domxref(
## Events

- {{domxref("SerialPort.connect_event", "connect")}} {{Experimental_Inline}}
- : An event fired when the port has connected to the device.
- : Fired when the port connects to the device.
- {{domxref("SerialPort.disconnect_event", "disconnect")}} {{Experimental_Inline}}
- : An event fired when the port has disconnected from the device.
- : Fired when the port disconnects from the device.

## Examples

Expand Down

0 comments on commit e8fd193

Please sign in to comment.