From 861d367a39f380ac4e6a01ae215fc1beb3e27c31 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 2 Dec 2024 10:21:55 +0000 Subject: [PATCH] Add docs on SerialPort.connected and Bluetooth port event support (#37002) * Add docs on SerialPort.connected and Bluetooth port event support * Fixes for beaufortfrancois review comments * Fixes for beaufortfrancois and wbamberg review comments --- .../web/api/serialport/connect_event/index.md | 21 ++++-- .../web/api/serialport/connected/index.md | 75 +++++++++++++++++++ .../api/serialport/disconnect_event/index.md | 18 +++-- files/en-us/web/api/serialport/index.md | 6 +- 4 files changed, 102 insertions(+), 18 deletions(-) create mode 100644 files/en-us/web/api/serialport/connected/index.md diff --git a/files/en-us/web/api/serialport/connect_event/index.md b/files/en-us/web/api/serialport/connect_event/index.md index 02613911ec05b36..2a23756bea18935 100644 --- a/files/en-us/web/api/serialport/connect_event/index.md +++ b/files/en-us/web/api/serialport/connect_event/index.md @@ -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 the port becomes **logically connected** to the device after a user grants permission for a site to access the port following a {{domxref("Serial.requestPort()")}} call: + +- 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 @@ -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 diff --git a/files/en-us/web/api/serialport/connected/index.md b/files/en-us/web/api/serialport/connected/index.md new file mode 100644 index 000000000000000..333d9799ab25b22 --- /dev/null +++ b/files/en-us/web/api/serialport/connected/index.md @@ -0,0 +1,75 @@ +--- +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. + +## Description + +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 reopen the port + 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 + } +} +``` + +## 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.addEventListener("click", async () => { + const port = await navigator.serial.requestPort(); + console.log(`Requested serial port. Connected: ${port.connected}`); +}); +``` + +### Logging connection status on connect and disconnect + +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: + +```js +navigator.serial.addEventListener("connect", ({ target: port }) => { + console.log(`Connect event fired. Connected: ${port.connected}`); +}); + +navigator.serial.addEventListener("disconnect", ({ target: port }) => { + console.log(`Disconnect event fired. Connected: ${port.connected}`); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/serialport/disconnect_event/index.md b/files/en-us/web/api/serialport/disconnect_event/index.md index 389199062a5d999..e5bf8d546a5bcc5 100644 --- a/files/en-us/web/api/serialport/disconnect_event/index.md +++ b/files/en-us/web/api/serialport/disconnect_event/index.md @@ -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 @@ -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 diff --git a/files/en-us/web/api/serialport/index.md b/files/en-us/web/api/serialport/index.md index da9b1520fae2d74..b6406f5683c1a62 100644 --- a/files/en-us/web/api/serialport/index.md +++ b/files/en-us/web/api/serialport/index.md @@ -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}} @@ -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