Serial

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Hinweis: Dieses Feature ist verfügbar in Dedicated Web Workers.

Das Serial-Interface der Web Serial API bietet Attribute und Methoden zum Finden und Verbinden mit seriellen Anschlüssen von einer Webseite aus.

EventTarget Serial

Instanzmethoden

Serial.requestPort() Experimentell

Gibt ein Promise zurück, das mit einer Instanz von SerialPort aufgelöst wird, die das vom Benutzer gewählte Gerät darstellt. Diese Methode muss über eine transiente Aktivierung aufgerufen werden.

Serial.getPorts() Experimentell

Gibt ein Promise zurück, das mit einem Array von SerialPort-Objekten aufgelöst wird, die serielle Anschlüsse darstellen, die mit dem Host verbunden sind und auf die der Ursprung zugreifen darf.

Ereignisse

Die folgenden Ereignisse stehen Serial über Ereignis-Bubbling von SerialPort zur Verfügung:

SerialPort connect-Ereignis

Ein Ereignis, das ausgelöst wird, wenn ein Anschluss mit dem Gerät verbunden wurde.

SerialPort disconnect-Ereignis

Ein Ereignis, das ausgelöst wird, wenn ein Anschluss vom Gerät getrennt wurde.

Beispiele

Das folgende Beispiel zeigt, wie eine Webseite verfügbare Anschlüsse überprüfen und dem Benutzer die Erlaubnis erteilen lassen kann, auf zusätzliche Anschlüsse zuzugreifen.

Beim Laden der Seite werden Ereignis-Listener für die connect- und disconnect-Ereignisse hinzugefügt, damit die Webseite reagieren kann, wenn ein Gerät mit dem System verbunden oder davon getrennt wird. Die getPorts()-Methode wird dann aufgerufen, um festzustellen, welche Anschlüsse verbunden sind, auf die die Webseite bereits Zugriff hat.

Wenn die Webseite keinen Zugriff auf verbundene Anschlüsse hat, muss sie warten, bis sie eine Benutzeraktivierung hat, um fortzufahren. In diesem Beispiel verwenden wir einen click-Ereignis-Handler auf einem Button für diese Aufgabe. Ein Filter wird an requestPort() mit einer USB-Vendor-ID übergeben, um die Menge der Geräte, die dem Benutzer angezeigt werden, auf nur USB-Geräte eines bestimmten Herstellers zu beschränken.

js
navigator.serial.addEventListener("connect", (e) => {
  // Connect to `e.target` or add it to a list of available ports.
});

navigator.serial.addEventListener("disconnect", (e) => {
  // Remove `e.target` from the list of available ports.
});

navigator.serial.getPorts().then((ports) => {
  // Initialize the list of available ports with `ports` on page load.
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // Connect to `port` or add it to the list of available ports.
    })
    .catch((e) => {
      // The user didn't select a port.
    });
});

Spezifikationen

Specification
Web Serial API
# serial-interface

Browser-Kompatibilität

BCD tables only load in the browser