Erste Schritte mit der Web Serial API

1. Einführung

Letzte Aktualisierung: 19.09.2022

Umfang

In diesem Codelab erstellen Sie eine Webseite, die über die Web Serial API mit einem BBC micro:bit-Board interagiert, um Bilder auf der 5 × 5 LED-Matrix anzuzeigen. Sie lernen die Web Serial API kennen und erfahren, wie Sie lesbare, beschreibbare und transformierte Streams verwenden können, um über den Browser mit seriellen Geräten zu kommunizieren.

Aufgaben in diesem Lab

• Web-Serienport öffnen und schließen
• Anleitung zum Verwenden einer Leseschleife zum Verarbeiten von Daten aus einem Eingabestream
• Daten über einen Schreibstream senden

Voraussetzungen

• Ein BBC micro:bit v1-Board mit der Espruino-Firmware 2v04
• Eine aktuelle Version von Chrome (80 oder höher)
• Kenntnisse in HTML, CSS, JavaScript und den Chrome-Entwicklertools

Wir haben uns für dieses Codelab für micro:bit v1 entschieden, da es erschwinglich ist, einige Eingaben (Tasten) und Ausgaben (5 × 5 LED-Display) bietet und zusätzliche Eingaben und Ausgaben bereitstellen kann. Auf der BBC micro:bit-Seite auf der Espruino-Website finden Sie weitere Informationen zu den Funktionen von micro:bit.

2. Web Serial API

Die Web Serial API ermöglicht es Websites, mit Skripts auf einem seriellen Gerät zu lesen und auf diesem zu schreiben. Die API verbindet das Web und die physische Welt, indem sie Websites ermöglicht, mit seriellen Geräten wie Mikrocontrollern und 3D-Druckern zu kommunizieren.

Es gibt viele Beispiele für Steuersoftware, die mithilfe von Webtechnologie entwickelt wird. Beispiel:

• Arduino Create
• Betaflight-Konfigurator
• Espruino-IDE
• MakeCode

In einigen Fällen kommunizieren diese Websites über eine native Agentanwendung, die vom Nutzer manuell installiert wird. In anderen Fällen wird die Anwendung in einer paketierten nativen Anwendung über ein Framework wie Electron bereitgestellt. In anderen Fällen muss der Nutzer einen zusätzlichen Schritt ausführen, z. B. eine kompilierte Anwendung mit einem USB-Speicher auf das Gerät kopieren.

Die Nutzerfreundlichkeit kann durch eine direkte Kommunikation zwischen der Website und dem Gerät, das sie steuert, verbessert werden.

3. Einrichtung

Code abrufen

Wir haben alles, was Sie für dieses Codelab benötigen, in ein Glitch-Projekt gepackt.

1. Öffnen Sie einen neuen Browsertab und rufen Sie https://web-serial-codelab-start.glitch.me/ auf.
2. Klicke auf den Link Remix Glitch, um deine eigene Version des Startprojekts zu erstellen.
3. Klicken Sie auf die Schaltfläche Anzeigen und wählen Sie In einem neuen Fenster aus, um den Code in Aktion zu sehen.

4. Serielle Verbindung öffnen

Prüfen, ob die Web Serial API unterstützt wird

Prüfen Sie zuerst, ob die Web Serial API im aktuellen Browser unterstützt wird. Dazu musst du prüfen, ob sich serial in navigator befindet.

Fügen Sie Ihrem Projekt im Ereignis DOMContentLoaded den folgenden Code hinzu:

script.js - DOMContentLoaded

// CODELAB: Add feature detection here.
const notSupported = document.getElementById('notSupported');
notSupported.classList.toggle('hidden', 'serial' in navigator);

Damit wird geprüft, ob Web Serial unterstützt wird. Ist das der Fall, wird durch diesen Code das Banner ausgeblendet, in dem steht, dass Web Serial nicht unterstützt wird.

Ausprobieren

1. Laden Sie die Seite.
2. Prüfe, ob auf der Seite kein rotes Banner angezeigt wird, das darauf hinweist, dass Web Serial nicht unterstützt wird.

Seriellen Port öffnen

Als Nächstes müssen wir den seriellen Port öffnen. Wie die meisten anderen modernen APIs ist die Web Serial API asynchron. Dadurch wird verhindert, dass die Benutzeroberfläche beim Warten auf Eingaben blockiert. Dies ist jedoch auch wichtig, da serielle Daten jederzeit von der Webseite empfangen werden können und wir eine Möglichkeit benötigen, auf diese zu warten.

Ein Computer kann mehrere serielle Geräte haben. Wenn der Browser versucht, einen Port anzufordern, wird der Nutzer aufgefordert, das Gerät auszuwählen, zu dem eine Verbindung hergestellt werden soll.

Fügen Sie Ihrem Projekt den folgenden Code hinzu:

script.js - connect()

// CODELAB: Add code to request & open port here.
// - Request a port and open a connection.
port = await navigator.serial.requestPort();
// - Wait for the port to open.
await port.open({ baudRate: 9600 });

Beim requestPort-Aufruf wird der Nutzer gefragt, mit welchem Gerät er eine Verbindung herstellen möchte. Durch Aufrufen von port.open wird der Port geöffnet. Außerdem müssen wir die Geschwindigkeit angeben, mit der wir mit dem seriellen Gerät kommunizieren möchten. Der BBC micro:bit verwendet eine 9600-Baud-Verbindung zwischen dem USB-zu-Serien-Chip und dem Hauptprozessor.

Als Nächstes verbinden wir die Schaltfläche „Verbinden“, damit connect() aufgerufen wird, wenn der Nutzer darauf klickt.

Fügen Sie Ihrem Projekt den folgenden Code hinzu:

script.js - clickConnect()

// CODELAB: Add connect code here.
await connect();

Ausprobieren

Unser Projekt hat jetzt das absolute Minimum für den Einstieg. Wenn der Nutzer auf die Schaltfläche Verbinden klickt, wird er aufgefordert, das serielle Gerät auszuwählen, mit dem eine Verbindung hergestellt werden soll. Anschließend stellt er eine Verbindung zum micro:bit her.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf dem Tab sollte ein Symbol angezeigt werden, das angibt, dass Sie eine Verbindung zu einem seriellen Gerät hergestellt haben:

Tipp: Wenn micro:bit nicht in der Auswahl angezeigt wird, setzen Sie das Gerät zurück, indem Sie die Taste zum Zurücksetzen neben dem USB-Anschluss auf der Rückseite drücken.

Eingabestream einrichten, um Daten vom seriellen Port zu überwachen

Nachdem die Verbindung hergestellt wurde, müssen wir einen Eingabestream und ein Lesegerät einrichten, damit die Daten vom Gerät gelesen werden können. Zuerst rufen wir den lesbaren Stream aus dem Port ab, indem wir port.readable aufrufen. Da wir wissen, dass wir Text vom Gerät erhalten, leiten wir ihn über einen Textdekodierer weiter. Als Nächstes holen wir einen Leser ab und starten die Leseschleife.

Fügen Sie Ihrem Projekt den folgenden Code hinzu:

script.js - connect()

// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable;

reader = inputStream.getReader();
readLoop();

Die Leseschleife ist eine asynchrone Funktion, die in einer Schleife ausgeführt wird und auf Inhalte wartet, ohne den Hauptthread zu blockieren. Wenn neue Daten eintreffen, gibt der Reader zwei Eigenschaften zurück: value und einen booleschen Wert done. Wenn done „wahr“ ist, wurde der Anschluss geschlossen oder es werden keine Daten mehr empfangen.

Fügen Sie Ihrem Projekt den folgenden Code hinzu:

script.js - readLoop()

// CODELAB: Add read loop here.
while (true) {
  const { value, done } = await reader.read();
  if (value) {
    log.textContent += value + '\n';
  }
  if (done) {
    console.log('[readLoop] DONE', done);
    reader.releaseLock();
    break;
  }
}

Ausprobieren

Unser Projekt kann jetzt eine Verbindung zum Gerät herstellen und alle vom Gerät empfangenen Daten werden an das Logelement angehängt.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Das Espruino-Logo sollte angezeigt werden:

Tipp:Unter Chrome OS und Linux ist möglicherweise ein Fehler aufgetreten, weil ein Systemdienst versucht, mit dem Gerät zu kommunizieren, weil das Betriebssystem davon ausgeht, dass das Gerät ein Modem ist. Sie können diese Beschädigung ignorieren, aber sie könnte seltsam aussehen. Das ist einer der Gründe, warum es wichtig ist, zuerst Strg-C zu senden.

Ausgabestream zum Senden von Daten an den seriellen Port einrichten

Die serielle Kommunikation ist in der Regel bidirektional. Wir möchten nicht nur Daten vom seriellen Port empfangen, sondern auch Daten an den Port senden. Wie beim Eingabestream senden wir über den Ausgabestream nur Text an das micro:bit.

Erstellen Sie zuerst einen Text-Encoder-Stream und leiten Sie den Stream an port.writeable weiter.

script.js - connect()

// CODELAB: Add code setup the output stream here.
const encoder = new TextEncoderStream();
outputDone = encoder.readable.pipeTo(port.writable);
outputStream = encoder.writable;

Bei einer seriellen Verbindung mit der Espruino-Firmware fungiert das BBC-micro:bit-Board als JavaScript-Read-Eval-Print-Schleife (REPL), ähnlich wie in einer Node.js-Shell. Als Nächstes müssen wir eine Methode zum Senden von Daten an den Stream bereitstellen. Im folgenden Code wird ein Writer aus dem Ausgabestream abgerufen und dann jede Zeile mit write gesendet. Jede gesendete Zeile enthält ein Zeilenvorschubzeichen (\n), um das micro:bit-Element anzuweisen, den gesendeten Befehl auszuwerten.

script.js - writeToStream()

// CODELAB: Write to output stream
const writer = outputStream.getWriter();
lines.forEach((line) => {
  console.log('[SEND]', line);
  writer.write(line + '\n');
});
writer.releaseLock();

Um das System in einen bekannten Zustand zu versetzen und zu verhindern, dass es die von uns gesendeten Zeichen zurückgibt, müssen wir Strg+C senden und das Echo ausschalten.

script.js - connect()

// CODELAB: Send CTRL-C and turn off echo on REPL
writeToStream('\x03', 'echo(false);');

Ausprobieren

Unser Projekt kann jetzt Daten von der micro:bit senden und empfangen. Lassen Sie uns überprüfen, ob wir ordnungsgemäß einen Befehl senden können:

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Öffnen Sie in den Chrome-Entwicklertools den Tab Console und geben Sie writeToStream('console.log("yes")'); ein.

Auf der Seite sollte in etwa Folgendes angezeigt werden:

5. LED-Matrix steuern

Matrix-Raster-String erstellen

Um die LED-Matrix auf dem micro:bit zu steuern, müssen wir show() aufrufen. Bei dieser Methode werden Grafiken auf dem integrierten 5x5-LED-Bildschirm angezeigt. Hierfür wird eine Binärzahl oder ein String verwendet.

Wir durchlaufen die Kästchen und generieren ein Array von Einsen und Nullen, die angeben, welche aktiviert ist und welche nicht. Wir müssen das Array dann umkehren, da die Reihenfolge unserer Kästchen der Reihenfolge der LEDs in der Matrix entspricht. Als Nächstes wandeln wir das Array in einen String um und erstellen den Befehl, der an den micro:bit gesendet werden soll.

script.js - sendGrid()

// CODELAB: Generate the grid
const arr = [];
ledCBs.forEach((cb) => {
  arr.push(cb.checked === true ? 1 : 0);
});
writeToStream(`show(0b${arr.reverse().join('')})`);

Kästchen hinzufügen, um die Matrix zu aktualisieren

Als Nächstes müssen wir auf Änderungen an den Kästchen achten und diese Informationen an das micro:bit senden, falls sich etwas ändert. Fügen Sie im Code für die Feature-Erkennung (// CODELAB: Add feature detection here.) die folgende Zeile hinzu:

script.js - DOMContentLoaded

initCheckboxes();

Setzen wir auch das Raster zurück, wenn micro:bit zum ersten Mal verbunden wird, damit ein glückliches Gesicht angezeigt wird. Die Funktion drawGrid() ist bereits vorhanden. Diese Funktion funktioniert ähnlich wie sendGrid(). verwendet sie ein Array von Einsen und Nullen und aktiviert die entsprechenden Kontrollkästchen.

script.js - clickConnect()

// CODELAB: Reset the grid on connect here.
drawGrid(GRID_HAPPY);
sendGrid();

Ausprobieren

Wenn die Seite jetzt eine Verbindung zum micro:bit herstellt, wird ein glückliches Gesicht gesendet. Wenn Sie auf die Kästchen klicken, wird die Anzeige auf der LED-Matrix aktualisiert.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der micro:bit-LED-Matrix sollte ein Lächeln zu sehen sein.
5. Zeichnen Sie ein anderes Muster auf die LED-Matrix, indem Sie die Kästchen ändern.

6. Micro:bit-Tasten verbinden

Ein „watch“-Ereignis auf den „micro:bit“-Schaltflächen hinzufügen

Auf dem micro:bit befinden sich zwei Tasten, eine links und eine rechts neben der LED-Matrix. Espruino bietet eine setWatch-Funktion, die beim Drücken der Schaltfläche ein Ereignis oder einen Callback sendet. Da wir beide Schaltflächen überwachen möchten, machen wir unsere Funktion generisch und lassen sie die Details des Ereignisses ausdrucken.

script.js - watchButton()

// CODELAB: Hook up the micro:bit buttons to print a string.
const cmd = `
  setWatch(function(e) {
    print('{"button": "${btnId}", "pressed": ' + e.state + '}');
  }, ${btnId}, {repeat:true, debounce:20, edge:"both"});
`;
writeToStream(cmd);

Als Nächstes müssen wir beide Tasten (BTN1 und BTN2 auf der micro:Bit-Platine) verbinden, sobald der serielle Port mit dem Gerät verbunden wird.

script.js - clickConnect()

// CODELAB: Initialize micro:bit buttons.
watchButton('BTN1');
watchButton('BTN2');

Ausprobieren

Durch Drücken einer der Tasten auf dem micro:bit wird nicht nur ein fröhliches Gesicht auf der Seite angezeigt, sondern auch ein Text, der angibt, welche Schaltfläche gedrückt wurde. Höchstwahrscheinlich steht jedes Zeichen in einer eigenen Zeile.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der micro:bits-LED-Matrix sollte ein Lächeln zu sehen sein.
5. Drücken Sie die Tasten auf „micro:bit“ und prüfen Sie, ob der neue Text mit Details zur gedrückten Schaltfläche an die Seite angehängt wird.

7. Eingehende Daten mit einem Transformationsstream parsen

Tipp: Wenn Sie mit Streams noch nicht vertraut sind, sehen Sie sich die Streams API-Konzepte der MDN an. In diesem Codelab werden Streams und Streamverarbeitung kaum an der Oberfläche kratzt.

Grundlegende Streamverarbeitung

Wenn eine der micro:bit-Schaltflächen gedrückt wird, sendet micro:bit Daten über einen Stream an den seriellen Anschluss. Streams sind sehr nützlich, können aber auch eine Herausforderung darstellen, da nicht unbedingt alle Daten auf einmal abgerufen und die Daten beliebig aufgeteilt werden können.

Die App gibt den eingehenden Stream derzeit so aus, wie er eintrifft (in readLoop). In den meisten Fällen befindet sich jedes Zeichen auf einer eigenen Zeile, was aber nicht sehr hilfreich ist. Idealerweise sollte der Stream in einzelne Zeilen geparst und jede Nachricht als eigene Zeile angezeigt werden.

Streams mit TransformStream transformieren

Dazu können wir einen Transform-Stream (TransformStream) verwenden, mit dem der eingehende Stream geparst und geparste Daten zurückgegeben werden können. Ein Transformationsstream kann sich zwischen der Streamquelle (in diesem Fall dem micro:Bit) und dem Element befinden, das den Stream nutzt (in diesem Fall readLoop) und eine beliebige Transformation anwenden, bevor er schließlich genutzt wird. Stellen Sie sich das wie ein Fließband vor: In der Zeit verändert sich ein Widget bei jedem Schritt in der Linie, sodass es bis zur endgültigen Station zu einem voll funktionsfähigen Widget wird.

Weitere Informationen findest du unter Konzepte der Streams API von MDN.

Stream mit LineBreakTransformer transformieren

Erstellen wir eine LineBreakTransformer-Klasse, die einen Stream annimmt und anhand von Zeilenenden (\r\n) in Chunks aufteilt. Die Klasse benötigt zwei Methoden, transform und flush. Die Methode transform wird jedes Mal aufgerufen, wenn der Stream neue Daten empfängt. Sie können die Daten entweder in die Warteschlange stellen oder für später speichern. Die Methode flush wird aufgerufen, wenn der Stream geschlossen wird. Dabei werden alle Daten verarbeitet, die noch nicht verarbeitet wurden.

Bei der transform-Methode fügen wir neue Daten zu container hinzu und prüfen dann, ob in container Zeilenumbrüche vorhanden sind. Falls ja, teilen Sie sie in ein Array auf und iterieren Sie dann durch die Zeilen. Rufen Sie controller.enqueue() auf, um die geparsten Zeilen zu senden.

script.js - LineBreakTransformer.transform()

// CODELAB: Handle incoming chunk
this.container += chunk;
const lines = this.container.split('\r\n');
this.container = lines.pop();
lines.forEach(line => controller.enqueue(line));

Wenn der Stream geschlossen wird, werden einfach alle verbleibenden Daten im Container mithilfe von enqueue geleert.

script.js - LineBreakTransformer.flush()

// CODELAB: Flush the stream.
controller.enqueue(this.container);

Zum Schluss muss der eingehende Stream über die neue LineBreakTransformer geleitet werden. Unser ursprünglicher Eingabestream wurde nur über eine TextDecoderStream weitergeleitet. Daher müssen wir eine zusätzliche pipeThrough hinzufügen, um ihn über unsere neue LineBreakTransformer weiterzuleiten.

script.js - connect()

// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
  .pipeThrough(new TransformStream(new LineBreakTransformer()));

Ausprobieren

Wenn Sie jetzt eine der micro:bit-Schaltflächen drücken, sollten die gedruckten Daten in einer einzigen Zeile zurückgegeben werden.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der micro:bit-LED-Matrix sollte ein Lächeln zu sehen sein.
5. Drücken Sie die Tasten auf dem micro:bit und prüfen Sie, ob etwa Folgendes angezeigt wird:

Stream mit JSONTransformer transformieren

Wir könnten versuchen, den String in der readLoop in JSON zu parsen. Erstellen wir stattdessen einen sehr einfachen JSON-Transformer, der die Daten in ein JSON-Objekt umwandelt. Wenn die Daten kein gültiges JSON-Format haben, geben Sie einfach die empfangenen Daten zurück.

script.js - JSONTransformer.transform

// CODELAB: Attempt to parse JSON content
try {
  controller.enqueue(JSON.parse(chunk));
} catch (e) {
  controller.enqueue(chunk);
}

Leiten Sie als Nächstes den Stream über den JSONTransformer weiter, nachdem er LineBreakTransformer durchlaufen hat. Auf diese Weise bleibt unser JSONTransformer einfach, da wir wissen, dass die JSON-Datei immer nur in einer einzigen Zeile gesendet wird.

script.js - connect

// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
  .pipeThrough(new TransformStream(new LineBreakTransformer()))
  .pipeThrough(new TransformStream(new JSONTransformer()));

Ausprobieren

Wenn Sie jetzt eine der micro:bit-Tasten drücken, sollte auf der Seite [object Object] gedruckt werden.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix von micro:bit sollte ein Lächeln zu sehen sein.
5. Drücken Sie die Tasten auf micro:bit und prüfen Sie, ob Folgendes angezeigt wird:

Auf Tastendrücke reagieren

Wenn du auf das Drücken der micro:bit-Schaltfläche reagieren möchtest, aktualisiere readLoop, um zu prüfen, ob es sich bei den empfangenen Daten um eine object mit dem Attribut button handelt. Rufe dann buttonPushed auf, um den Tastendruck zu verarbeiten.

script.js - readLoop()

const { value, done } = await reader.read();
if (value && value.button) {
  buttonPushed(value);
} else {
  log.textContent += value + '\n';
}

Wenn eine micro:bit-Taste gedrückt wird, sollte sich das Display auf der LED-Matrix ändern. Verwenden Sie den folgenden Code, um die Matrix festzulegen:

script.js - buttonPushed()

// CODELAB: micro:bit button press handler
if (butEvt.button === 'BTN1') {
  divLeftBut.classList.toggle('pressed', butEvt.pressed);
  if (butEvt.pressed) {
    drawGrid(GRID_HAPPY);
    sendGrid();
  }
  return;
}
if (butEvt.button === 'BTN2') {
  divRightBut.classList.toggle('pressed', butEvt.pressed);
  if (butEvt.pressed) {
    drawGrid(GRID_SAD);
    sendGrid();
  }
}

Ausprobieren

Wenn Sie jetzt eine der micro:bit-Tasten drücken, sollte sich die LED-Matrix in ein glückliches oder trauriges Gesicht ändern.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der micro:bits-LED-Matrix sollte ein Lächeln zu sehen sein.
5. Drücken Sie die Tasten auf „micro:bit“ und prüfen Sie, ob sich die LED-Matrix ändert.

8. Seriellen Port schließen

Im letzten Schritt müssen Sie die Funktion zum Trennen der Verbindung einrichten, damit der Anschluss geschlossen wird, wenn der Nutzer fertig ist.

Schließen Sie den Anschluss, wenn der Nutzer auf die Schaltfläche „Verbinden/Trennen“ klickt.

Wenn der Nutzer auf die Schaltfläche Verbinden/Trennen klickt, müssen wir die Verbindung schließen. Wenn der Port bereits geöffnet ist, rufe disconnect() auf und aktualisiere die Benutzeroberfläche, um anzuzeigen, dass die Seite nicht mehr mit dem seriellen Gerät verbunden ist.

script.js - clickConnect()

// CODELAB: Add disconnect code here.
if (port) {
  await disconnect();
  toggleUIConnected(false);
  return;
}

Streams und Port schließen

In der Funktion disconnect müssen wir den Eingabe- und den Ausgabestream sowie den Anschluss schließen. Rufen Sie reader.cancel() auf, um den Eingabestream zu schließen. Der Aufruf von cancel ist asynchron. Daher müssen wir mit await warten, bis er abgeschlossen ist:

script.js - disconnect()

// CODELAB: Close the input stream (reader).
if (reader) {
  await reader.cancel();
  await inputDone.catch(() => {});
  reader = null;
  inputDone = null;
}

Um den Ausgabestream zu schließen, rufen Sie einen writer ab, rufen Sie close() auf und warten Sie, bis das Objekt outputDone geschlossen wurde:

script.js - disconnect()

// CODELAB: Close the output stream.
if (outputStream) {
  await outputStream.getWriter().close();
  await outputDone;
  outputStream = null;
  outputDone = null;
}

Schließen Sie abschließend den seriellen Port und warten Sie, bis er geschlossen ist:

script.js - disconnect()

// CODELAB: Close the port.
await port.close();
port = null;

Ausprobieren

Sie können den seriellen Anschluss jetzt nach Belieben öffnen und schließen.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix von micro:bit sollte ein Lächeln zu sehen sein.
5. Drücken Sie die Schaltfläche Trennen und prüfen Sie, ob die LED-Matrix ausgeschaltet ist und in der Konsole keine Fehler angezeigt werden.

9. Glückwunsch

Glückwunsch! Sie haben Ihre erste Webanwendung erstellt, die die Web Serial API verwendet.

Unter https://goo.gle/fugu-api-tracker finden Sie aktuelle Informationen zur Web Serial API und zu allen anderen spannenden neuen Webfunktionen, an denen das Chrome-Team gerade arbeitet.