Erste Schritte mit der Web Serial API

1. Einführung

Zuletzt aktualisiert:21.07.2020

Inhalt

In diesem Codelab erstellen Sie eine Webseite, die mithilfe der Web Serial API mit einer BBC micro:bit-Platine interagiert, um Bilder auf der 5x5 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

• Einen seriellen Web-Port ö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-Board mit der neuesten Espruino-Firmware
• Eine aktuelle Version von Chrome (80 oder höher)
• Kenntnisse in HTML, CSS, JavaScript und Chrome-Entwicklertools

Für dieses Codelab haben wir uns für das Micro:bit entschieden, weil es erschwinglich ist, nur wenige Ein- und Ausgänge (5-x-5-LED-Display) sowie zusätzliche Ein- und Ausgaben bietet. Auf der BBC-Seite „micro:bit“ auf der Website von Espruino erfährst du, was mit „micro:bit“ möglich ist.

2. Informationen zur 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 mit dem Gerät über eine native Agent-Anwendung, die vom Nutzer manuell installiert wird. In anderen Fällen wird die Anwendung in einer gepackten 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 App mit einem USB-Speicherstick auf das Gerät kopieren.

Die User Experience kann durch eine direkte Kommunikation zwischen der Website und dem von ihr gesteuerten Gerät 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 dies der Fall, wird mit diesem Code das Banner ausgeblendet, das besagt, dass Web Serial nicht unterstützt wird.

Ausprobieren

1. Laden Sie die Seite.
2. Auf der Seite darf kein rotes Banner mit dem Hinweis angezeigt werden, 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. Das Micro:Bit der BBC verwendet eine 9600-Baud-Verbindung zwischen dem USB-Seriell-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 zur Auswahl des seriellen Ports das BBC-micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf dem Tab sollte ein Symbol zu sehen sein, das darauf hinweist, dass eine Verbindung zu einem seriellen Gerät besteht:

Tipp:Wird der micro:bit nicht in der Auswahl angezeigt, 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 zurückerhalten, leiten wir ihn über einen Textdecoder weiter. 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 das Lesegerät zwei Eigenschaften zurück: den booleschen Wert value und den booleschen Wert done. Wenn done „true“ ist, wurde der Port geschlossen oder es gehen keine Daten mehr ein.

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 zur Auswahl des seriellen Ports das BBC-micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Sie sollten das Espruino-Logo sehen:

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. Dies 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 erfolgt in der Regel bidirektional. Wir möchten nicht nur Daten vom seriellen Port empfangen, sondern auch Daten an den Port senden. Wie beim Eingabestream wird nur Text über den Ausgabestream an das micro:bit-Element gesendet.

Erstelle zuerst einen Textencoder-Stream und leite 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. Der folgende Code ruft einen Writer aus dem Ausgabestream ab und verwendet dann write, um jede Zeile zu senden. Jede gesendete Zeile enthält ein Zeilenvorschubzeichen (\n), um das micro:bit-Zeichen 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 über 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 zur Auswahl des seriellen Ports 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

Matrixstring erstellen

Zum Steuern der LED-Matrix auf dem micro:bit 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. Anschließend müssen wir das Array umkehren, da die Reihenfolge der 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 das micro:bit-Element 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 warten und, falls sie sich ändern, diese Informationen an das micro:bit senden. Fügen Sie im Code zur Funktionserkennung (// CODELAB: Add feature detection here.) die folgende Zeile hinzu:

script.js - DOMContentLoaded

initCheckboxes();

Wir setzen auch das Raster zurück, wenn das micro:bit zum ersten Mal verbunden wird, damit es ein fröhliches Gesicht zeigt. 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 nun eine Verbindung zum micro:bit herstellt, sendet sie ein fröhliches Gesicht. 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 zur Auswahl des seriellen Ports 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-Gerät befinden sich zwei Tasten, eine auf beiden Seiten der LED-Matrix. Espruino bietet eine setWatch-Funktion, die beim Drücken der Schaltfläche ein Ereignis oder einen Rückruf sendet. Da wir beide Schaltflächen überwachen möchten, gestalten 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 (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 zur Auswahl des seriellen Ports 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 du noch nicht mit Streams vertraut bist, sieh dir die Konzepte der Streams API von 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 das micro:bit-Gerät Daten über einen Stream an den seriellen Port. 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 derzeit den eingehenden Stream aus, sobald er eintrifft (in readLoop). In den meisten Fällen steht jedes Zeichen in einer eigenen Zeile, aber das ist nicht sehr hilfreich. 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 Transformationsstream ( TransformStream) verwenden, der es möglich macht, den eingehenden Stream zu parsen und geparste Daten zurückzugeben. 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

Als Nächstes erstellen wir einen LineBreakTransformer-Kurs. Dieser nimmt einen Stream auf und teilt ihn anhand von Zeilenumbrüchen ein (\r\n). 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. Sie verarbeitet alle Daten, 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 es in ein Array auf und iterieren Sie dann durch die Zeilen. Rufen Sie dazu 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 TextDecoderStream geleitet. Daher müssen wir eine zusätzliche pipeThrough hinzufügen, um ihn über unseren neuen 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-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 zur Auswahl des seriellen Ports 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 "micro:bit" und überprüfen Sie, ob Folgendes angezeigt wird:

Stream mit JSONTransformer transformieren

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

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-Schaltflächen drücken, sollte [object Object] auf der Seite angezeigt werden.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld zur Auswahl des seriellen Ports 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 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 Sie eine micro:Bit-Taste drücken, 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 nun eine der micro:bit-Tasten drücken, sollte sich die LED-Matrix in ein fröhliches oder ein trauriges Gesicht ändern.

1. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld zur Auswahl des seriellen Ports 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 verbinden Sie die Funktion zum Trennen der Verbindung, um den Port zu schließen, 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, muss die Verbindung beendet werden. 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, deshalb müssen wir await verwenden, um auf den Abschluss zu warten:

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 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. Lade die Seite neu.
2. Klicken Sie auf Verbinden.
3. Wählen Sie im Dialogfeld zur Auswahl des seriellen Ports das BBC-micro:bit-Gerät aus und klicken Sie auf Verbinden.
4. Auf der micro:bit-LED-Matrix sollte ein lächelndes Gesicht zu sehen sein.
5. Drücken Sie die Taste Verbindung trennen und prüfen Sie, ob die LED-Matrix sich ausschaltet und die Konsole keine Fehler enthält.

9. Glückwunsch

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

Die ersten 300 Personen, die dieses Codelab beim Chrome Dev Summit 2019 abschließen, erhalten ein BBC-Micro:Bit-Board zum Mitnehmen. Um Ihr Board zu erhalten, zeigen Sie den Codelab-Mitarbeitern Ihr Projekt so, dass alles funktioniert, einschließlich Kontrollkästchen, On-Board-Schaltflächen und der Funktion zum Verbinden/Trennen.

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