Erste Schritte mit der Web Serial API

1. Einführung

Zuletzt aktualisiert: 21.07.2020

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 5x5-LED-Matrix anzuzeigen. Sie erfahren mehr über die Web Serial API und wie Sie lesbare, beschreibbare und transformierte Streams verwenden, um über den Browser mit seriellen Geräten zu kommunizieren.

Lerninhalte

• Web Serial-Port öffnen und schließen
• Leseschleife zum Verarbeiten von Daten aus einem Eingabestream verwenden
• Daten über einen Schreibstream senden

Voraussetzungen

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

Wir haben uns für dieses Codelab für den micro:bit entschieden, weil er erschwinglich ist, einige Ein- und Ausgänge (Tasten und 5×5-LED-Display) bietet und zusätzliche Ein- und Ausgänge bereitstellen kann. Auf der BBC micro:bit-Seite auf der Espruino-Website finden Sie weitere Informationen zu den Funktionen des micro:bit.

2. Informationen zur Web Serial API

Mit der Web Serial API können Websites über Skripts Daten von einem seriellen Gerät lesen und auf ein serielles Gerät schreiben. Die API schlägt eine Brücke zwischen dem Web und der physischen Welt, indem sie Websites die Kommunikation mit seriellen Geräten wie Mikrocontrollern und 3D-Druckern ermöglicht.

Es gibt viele Beispiele für Steuersoftware, die mit Webtechnologie erstellt wurde. Beispiel:

• Arduino Create
• Betaflight Configurator
• Espruino IDE
• MakeCode

In einigen Fällen kommunizieren diese Websites über eine native Agent-Anwendung mit dem Gerät, die vom Nutzer manuell installiert wird. In anderen Fällen wird die Anwendung in einer verpackten 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-Laufwerk auf das Gerät kopieren.

Die Nutzerfreundlichkeit kann verbessert werden, indem eine direkte Kommunikation zwischen der Website und dem Gerät, das sie steuert, ermöglicht wird.

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. Klicken Sie auf den Link Remix Glitch, um eine eigene Version des Starterprojekts zu erstellen.
3. Klicken Sie auf die Schaltfläche Anzeigen und wählen Sie dann In neuem 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. Prüfen Sie dazu, ob serial in navigator enthalten ist.

Fügen Sie dem DOMContentLoaded-Ereignis 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. Wenn das der Fall ist, wird durch diesen Code das Banner ausgeblendet, in dem darauf hingewiesen wird, dass Web Serial nicht unterstützt wird.

Ausprobieren

1. Laden Sie die Seite.
2. Prüfen Sie, ob auf der Seite ein rotes Banner mit dem Hinweis angezeigt wird, 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 blockiert wird, wenn auf eine Eingabe gewartet wird. Das ist aber auch wichtig, weil serielle Daten jederzeit von der Webseite empfangen werden können und wir eine Möglichkeit benötigen, darauf zu reagieren.

Da ein Computer mehrere serielle Geräte haben kann, fordert der Browser den Nutzer auf, das Gerät auszuwählen, mit dem er eine Verbindung herstellen möchte, wenn er versucht, einen Port anzufordern.

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 });

Der requestPort-Aufruf fordert den Nutzer auf, das Gerät auszuwählen, mit dem 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 Verbindung mit 9.600 Baud zwischen dem USB-zu-seriell-Chip und dem Hauptprozessor.

Wir verbinden auch die Schaltfläche „Verbinden“ und lassen sie connect() aufrufen, 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, um loszulegen. Wenn der Nutzer auf die Schaltfläche Verbinden klickt, wird er aufgefordert, das serielle Gerät auszuwählen, mit dem er eine Verbindung herstellen möchte. Anschließend wird eine Verbindung zum micro:bit hergestellt.

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Seriellen 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 darauf hinweist, dass Sie eine Verbindung zu einem seriellen Gerät hergestellt haben:

Tipp:Wenn der micro:bit nicht in der Auswahl angezeigt wird, versuchen Sie, das Gerät zurückzusetzen. Drücken Sie dazu die Reset-Taste auf der Rückseite neben dem USB-Anschluss.

Eingabestream einrichten, um Daten vom seriellen Port zu empfangen

Nachdem die Verbindung hergestellt wurde, müssen wir einen Eingabestream und einen Reader einrichten, um die Daten vom Gerät zu lesen. Zuerst rufen wir port.readable auf, um den lesbaren Stream vom Port abzurufen. Da wir wissen, dass wir Text vom Gerät zurückerhalten, leiten wir ihn durch einen Textdecoder. Als Nächstes rufen wir einen Reader 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 eingehen, gibt der Reader zwei Eigenschaften zurück: die value und einen booleschen Wert done. Wenn done „true“ ist, wurde der Port 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 an das Log-Element anhängen.

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

Tipp:Unter ChromeOS und Linux kann die Datei beschädigt sein, da ein Systemdienst versucht, mit dem Gerät zu kommunizieren, weil das Betriebssystem das Gerät für ein Modem hält. Sie können diese Beschädigung ignorieren, aber sie sieht möglicherweise seltsam aus. Das ist einer der Gründe, warum es wichtig ist, Ctrl-C als Erstes zu senden.

Ausgabestream einrichten, um Daten an den seriellen Port zu senden

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 nur Text über den Ausgabestream an den 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;

Wenn das BBC micro:bit-Board über die serielle Schnittstelle mit der Espruino-Firmware verbunden ist, fungiert es als REPL (Read-Eval-Print-Loop) für JavaScript, ä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 write verwendet, um jede Zeile zu senden. Jede gesendete Zeile enthält ein Zeilenumbruchzeichen (\n), damit der micro:bit den gesendeten Befehl auswertet.

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();

Damit das System in einen bekannten Zustand versetzt wird und die von uns gesendeten Zeichen nicht zurückgibt, müssen wir STRG+C senden und das Echo deaktivieren.

script.js - connect()

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

Ausprobieren

Unser Projekt kann jetzt Daten vom micro:bit senden und empfangen. Prüfen wir, ob wir einen Befehl richtig senden können:

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Seriellen 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 Folgendes angezeigt werden:

5. LED-Matrix steuern

Matrix-Grid-String erstellen

Um die LED-Matrix auf dem micro:bit zu steuern, müssen wir show() aufrufen. Mit dieser Methode werden Grafiken auf dem integrierten 5×5-LED-Display angezeigt. Diese Funktion akzeptiert eine Binärzahl oder einen String.

Wir durchlaufen die Kästchen und generieren ein Array aus Einsen und Nullen, das angibt, welche Kästchen angekreuzt sind und welche nicht. Anschließend müssen wir das Array umkehren, da die Reihenfolge unserer Kästchen der Reihenfolge der LEDs in der Matrix entgegengesetzt ist. 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 verknüpfen, um die Matrix zu aktualisieren

Als Nächstes müssen wir auf Änderungen an den Kästchen achten und diese Informationen an den micro:bit senden, wenn sie sich ändern. Fügen Sie im Code zur Erkennung von Funktionen (// CODELAB: Add feature detection here.) die folgende Zeile hinzu:

script.js - DOMContentLoaded

initCheckboxes();

Außerdem setzen wir das Raster zurück, wenn der micro:bit zum ersten Mal verbunden wird, damit ein fröhliches Gesicht angezeigt wird. Die Funktion drawGrid() ist bereits vorhanden. Diese Funktion funktioniert ähnlich wie sendGrid(). Sie verwendet ein Array mit Einsen und Nullen und setzt die Häkchen entsprechend.

script.js - clickConnect()

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

Ausprobieren

Wenn die Seite jetzt eine Verbindung zum micro:bit öffnet, wird ein Smiley gesendet. Durch Klicken auf die Kästchen wird die Anzeige auf der LED-Matrix aktualisiert.

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Seriellen Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix des micro:bit sollte ein Smiley angezeigt werden.
5. Sie können ein anderes Muster auf der LED-Matrix zeichnen, indem Sie die Kästchen ändern.

6. micro:bit-Tasten anschließen

Ein Ereignis für die Smartwatch-Schaltflächen hinzufügen

Auf dem micro:bit befinden sich zwei Tasten, eine auf jeder Seite der LED-Matrix. Espruino bietet eine setWatch-Funktion, die ein Ereignis/einen Callback sendet, wenn die Taste gedrückt wird. Da wir auf beide Schaltflächen reagieren möchten, machen wir unsere Funktion generisch und lassen sie die Details des Ereignisses ausgeben.

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 (auf dem micro:bit-Board als BTN1 und BTN2 bezeichnet) jedes Mal anschließen, wenn der serielle Port mit dem Gerät verbunden ist.

script.js - clickConnect()

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

Ausprobieren

Wenn der micro:bit verbunden ist, wird nicht nur ein Smiley angezeigt. Wenn Sie eine der Tasten auf dem micro:bit drücken, wird auf der Seite auch Text hinzugefügt, der angibt, welche Taste gedrückt wurde. Wahrscheinlich wird jedes Zeichen in einer eigenen Zeile stehen.

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Seriellen Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix des micro:bit sollte ein Smiley angezeigt werden.
5. Drücke die Tasten auf dem micro:bit und prüfe, ob der Seite mit den Details der gedrückten Taste neuer Text hinzugefügt wird.

7. Transformationsstream zum Parsen eingehender Daten verwenden

Tipp:Wenn Sie noch nicht mit Streams vertraut sind, lesen Sie die Konzepte der Streams API von MDN. In diesem Codelab werden Streams und die Stream-Verarbeitung nur oberflächlich behandelt.

Grundlegende Stream-Verarbeitung

Wenn eine der micro:bit-Tasten gedrückt wird, sendet der micro:bit Daten über einen Stream an den seriellen Port. Streams sind sehr nützlich, können aber auch eine Herausforderung darstellen, da Sie nicht unbedingt alle Daten auf einmal erhalten und sie möglicherweise willkürlich aufgeteilt werden.

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

Streams mit TransformStream transformieren

Dazu können wir einen Transformationsstream ( 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 der micro:bit) und dem Streamnutzer (in diesem Fall readLoop) befinden und eine beliebige Transformation anwenden, bevor der Stream schließlich genutzt wird. Stellen Sie sich das wie ein Fließband vor: Wenn ein Widget das Band durchläuft, wird es in jedem Schritt modifiziert, sodass es am Ende ein voll funktionsfähiges Widget ist.

Weitere Informationen finden Sie unter MDN Streams API concepts.

Stream mit LineBreakTransformer transformieren

Erstellen wir eine LineBreakTransformer-Klasse, die einen Stream entgegennimmt und ihn anhand von Zeilenumbrüchen (\r\n) in Chunks aufteilt. Die Klasse benötigt zwei Methoden: transform und flush. Die Methode transform wird jedes Mal aufgerufen, wenn neue Daten vom Stream empfangen werden. Die Daten können entweder in die Warteschlange gestellt oder für später gespeichert werden. Die Methode flush wird aufgerufen, wenn der Stream geschlossen wird. Sie verarbeitet alle Daten, die noch nicht verarbeitet wurden.

Bei der transform-Methode werden container neue Daten hinzugefügt und dann geprüft, ob container Zeilenumbrüche enthält. Falls ja, teilen Sie sie in ein Array auf und durchlaufen Sie dann 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, leeren wir alle verbleibenden Daten im Container einfach mit enqueue.

script.js - LineBreakTransformer.flush()

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

Schließlich müssen wir den eingehenden Stream durch die neue LineBreakTransformer leiten. Unser ursprünglicher Eingabestream wurde nur durch ein TextDecoderStream geleitet. Wir müssen also ein zusätzliches pipeThrough hinzufügen, um ihn durch unser neues LineBreakTransformer zu leiten.

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-Tasten drücken, sollten die ausgegebenen Daten in einer einzigen Zeile zurückgegeben werden.

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Seriellen Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix des micro:bit sollte ein Smiley angezeigt werden.
5. Drücken Sie die Tasten auf dem micro:bit und prüfen Sie, ob Sie etwas wie das Folgende sehen:

Stream mit JSONTransformer transformieren

Wir könnten versuchen, den String in readLoop in JSON zu parsen. Stattdessen erstellen wir aber einen sehr einfachen JSON-Transformer, der die Daten in ein JSON-Objekt umwandelt. Wenn die Daten kein gültiges JSON sind, geben Sie einfach die Eingabe 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 den Stream als Nächstes durch JSONTransformer, nachdem er durch LineBreakTransformer geleitet wurde. So können wir JSONTransformer einfach halten, da wir wissen, dass das JSON 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 [object Object] auf der Seite angezeigt werden.

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Seriellen Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix des micro:bit sollte ein Smiley angezeigt werden.
5. Drücken Sie die Tasten auf dem micro:bit und prüfen Sie, ob Sie etwas wie das Folgende sehen:

Auf Tastendrücke reagieren

Um auf Tastendrücke auf dem micro:bit zu reagieren, aktualisieren Sie readLoop, um zu prüfen, ob die empfangenen Daten ein object mit einer button-Eigenschaft sind. Rufen Sie dann buttonPushed auf, um das Drücken der Taste 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 die Anzeige 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 entweder in ein Smiley oder ein trauriges Gesicht verwandeln.

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Seriellen Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix des micro:bit sollte ein Smiley angezeigt werden.
5. Drücken Sie die Tasten auf dem micro:bit und prüfen Sie, ob sich die LED-Matrix ändert.

8. Schließen des seriellen Ports

Im letzten Schritt wird die Funktion zum Trennen der Verbindung eingerichtet, um den Port zu schließen, wenn der Nutzer fertig ist.

Port schließen, 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, rufen Sie disconnect()auf und aktualisieren Sie die Benutzeroberfläche, um anzugeben, 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 Eingabestream, den Ausgabestream und den Port schließen. Rufen Sie reader.cancel() auf, um den Eingabestream zu schließen. Der Aufruf von cancel ist asynchron. Daher müssen wir await verwenden, um darauf zu warten, dass er abgeschlossen wird:

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 ein writer ab, rufen Sie close() auf und warten Sie, bis das outputDone-Objekt geschlossen wird:

script.js - disconnect()

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

Schließen Sie schließlich den seriellen Port und warten Sie, bis er geschlossen ist:

script.js - disconnect()

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

Ausprobieren

Jetzt können Sie den seriellen Port nach Belieben öffnen und schließen.

1. Aktualisieren Sie die Seite.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld „Serieller Port“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der LED-Matrix des micro:bit sollte ein Smiley angezeigt werden.
5. Drücken Sie die Schaltfläche Trennen und prüfen Sie, ob die LED-Matrix ausgeschaltet wird 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.

Die ersten 300 Teilnehmer, die dieses Codelab auf dem Chrome Dev Summit 2019 abschließen, erhalten ein BBC micro:bit-Board. Um das Board zu erhalten, müssen Sie den Codelab-Mitarbeitern Ihr Projekt mit allen Funktionen vorführen, einschließlich der Kästchen, der Onboard-Schaltflächen und der Verbindungs-/Trennungsfunktion.

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