תחילת השימוש ב-Web Series API

1. מבוא

העדכון האחרון: 21 ביולי 2020

מה תפַתחו

ב-codelab הזה תבנו דף אינטרנט שמשתמש ב-Web Serial API כדי ליצור אינטראקציה עם לוח BBC micro:bit ולהציג תמונות במטריצת ה-LED בגודל 5x5 שלו. תלמדו על Web Serial API ואיך להשתמש בזרמי נתונים שניתן לקרוא, לכתוב ולשנות כדי לתקשר עם מכשירים עם יציאה טורית דרך הדפדפן.

מה תלמדו

• איך פותחים וסוגרים יציאה טורית של Web Serial
• איך משתמשים בלולאת קריאה כדי לטפל בנתונים מזרם קלט
• איך שולחים נתונים באמצעות זרם כתיבה

מה תצטרכו

• לוח BBC micro:bit עם הקושחה העדכנית של Espruino
• גרסה עדכנית של Chrome (גרסה 80 ומעלה)
• ידע ב-HTML, ב-CSS, ב-JavaScript ובכלי הפיתוח ל-Chrome

בחרנו להשתמש ב-micro:bit ב-Codelab הזה כי הוא זול, יש לו כמה אמצעי קלט (לחצנים) ופלט (מסך LED בגודל 5x5) והוא יכול לספק אמצעי קלט ופלט נוספים. פרטים על היכולות של micro:bit זמינים בדף BBC micro:bit באתר Espruino.

2. מידע על Web Serial API

‫ Web Serial API מאפשר לאתרים לקרוא מנתונים של מכשיר עם יציאה טורית ולכתוב נתונים למכשיר כזה באמצעות סקריפטים. ה-API מגשר בין האינטרנט לבין העולם הפיזי, ומאפשר לאתרים לתקשר עם מכשירים עם יציאות טוריות, כמו מיקרו-בקרים ומדפסות תלת-ממד.

יש הרבה דוגמאות לתוכנות בקרה שנבנות באמצעות טכנולוגיית אינטרנט. לדוגמה:

• ‫Arduino Create
• Betaflight Configurator
• Espruino IDE
• MakeCode

במקרים מסוימים, האתרים האלה מתקשרים עם המכשיר באמצעות אפליקציית סוכן מקומית שהמשתמש מתקין באופן ידני. במקרים אחרים, האפליקציה מועברת כאפליקציית נייטיב ארוזה דרך מסגרת כמו Electron. במקרים אחרים, המשתמש נדרש לבצע שלב נוסף, כמו העתקת אפליקציה שעברה קומפילציה למכשיר באמצעות כונן הבזק מסוג USB.

כדי לשפר את חוויית המשתמש, אפשר לספק תקשורת ישירה בין האתר לבין המכשיר שהוא שולט בו.

3. תהליך ההגדרה

קבלת הקוד

ריכזנו את כל מה שצריך בשביל ה-Codelab הזה בפרויקט Glitch.

1. פותחים כרטיסייה חדשה בדפדפן ועוברים לכתובת https://web-serial-codelab-start.glitch.me/.
2. לוחצים על הקישור Remix Glitch כדי ליצור גרסה משלכם של פרויקט המתחילים.
3. לוחצים על הלחצן הצגה ואז בוחרים באפשרות בחלון חדש כדי לראות את הקוד בפעולה.

4. פתיחת חיבור סדרתי

בדיקה אם יש תמיכה ב-Web Serial API

הדבר הראשון שצריך לעשות הוא לבדוק אם הדפדפן הנוכחי תומך ב-Web Serial API. כדי לעשות את זה, בודקים אם serial נמצא ב-navigator.

באירוע DOMContentLoaded, מוסיפים את הקוד הבא לפרויקט:

script.js - DOMContentLoaded

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

הבדיקה הזו בודקת אם יש תמיכה ב-Web Serial. אם כן, הקוד הזה מסתיר את הבאנר שאומר שאין תמיכה ב-Web Serial.

אני רוצה לנסות

1. טוענים את הדף.
2. מוודאים שלא מוצג בדף באנר אדום שבו מצוין שאין תמיכה ב-Web Serial.

פתיחת היציאה הטורית

בשלב הבא, צריך לפתוח את היציאה הטורית. בדומה לרוב ממשקי ה-API המודרניים האחרים, Web Serial API הוא אסינכרוני. הפעולה הזו מונעת את חסימת ממשק המשתמש בזמן ההמתנה לקלט, אבל היא גם חשובה כי הדף יכול לקבל נתונים סדרתיים בכל שלב, ואנחנו צריכים דרך להאזין להם.

יכול להיות שבמחשב יש כמה מכשירים טורייים, ולכן כשהדפדפן מנסה לבקש יציאה, הוא מבקש מהמשתמש לבחור את המכשיר שאליו הוא רוצה להתחבר.

מוסיפים את הקוד הבא לפרויקט:

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

השיחה requestPort מבקשת מהמשתמש לבחור את המכשיר שאליו הוא רוצה להתחבר. התקשרות אל port.open פותחת את היציאה. צריך גם לציין את המהירות שבה רוצים לתקשר עם המכשיר עם היציאה הטורית. ‫BBC micro:bit משתמש בחיבור 9600 באוד בין שבב ה-USB לטורי לבין המעבד הראשי.

בנוסף, נחבר את לחצן החיבור ונגרום לו לקרוא לפונקציה connect() כשהמשתמש ילחץ עליו.

מוסיפים את הקוד הבא לפרויקט:

script.js - clickConnect()

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

אני רוצה לנסות

עכשיו יש בפרויקט שלנו את המינימום הנדרש כדי להתחיל. כשלוחצים על הלחצן Connect (חיבור), המשתמש מתבקש לבחור את המכשיר עם יציאה טורית שאליו רוצים להתחבר, ואז מתבצע חיבור ל-micro:bit.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. בכרטיסייה אמור להופיע סמל שמציין שהתחברתם למכשיר עם יציאה טורית:

טיפ: אם micro:bit לא מופיע בבורר, נסו לאפס את המכשיר על ידי לחיצה על לחצן האיפוס שליד יציאת ה-USB בחלק האחורי.

הגדרה של זרם קלט להאזנה לנתונים מהיציאה הטורית

אחרי שיוצרים את החיבור, צריך להגדיר מקור נתונים וקורא כדי לקרוא את הנתונים מהמכשיר. קודם כל, נקבל את הזרם הקריא מהיציאה על ידי קריאה ל-port.readable. מכיוון שאנחנו יודעים שנקבל טקסט מהמכשיר, נעביר אותו דרך מפענח טקסט. בשלב הבא, נשיג קורא ונתחיל את לולאת הקריאה.

מוסיפים את הקוד הבא לפרויקט:

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

לולאת הקריאה היא פונקציה אסינכרונית שפועלת בלולאה ומחכה לתוכן בלי לחסום את ה-thread הראשי. כשמגיעים נתונים חדשים, הקורא מחזיר שני מאפיינים: value וערך בוליאני done. אם הערך של done הוא true, היציאה נסגרה או שלא מגיעים יותר נתונים.

מוסיפים את הקוד הבא לפרויקט:

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

אני רוצה לנסות

עכשיו הפרויקט שלנו יכול להתחבר למכשיר, וכל הנתונים שיתקבלו מהמכשיר יצורפו לרכיב היומן.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. הלוגו של Espruino אמור להופיע:

טיפ: יכול להיות שהקובץ הזה פגום ב-ChromeOS וב-Linux כי יש שירות מערכת שמנסה לתקשר עם המכשיר, כי מערכת ההפעלה חושבת שהמכשיר הוא מודם. אפשר להתעלם מהשיבוש הזה, אבל יכול להיות שהוא ייראה מוזר. זו אחת הסיבות לכך שחשוב לשלוח את הצירוף Ctrl-C כפעולה הראשונה.

הגדרה של מקור נתונים לשליחת נתונים ליציאה טורית

תקשורת טורית היא בדרך כלל דו-כיוונית. בנוסף לקבלת נתונים מהיציאה הטורית, אנחנו רוצים גם לשלוח נתונים ליציאה. בדומה לזרם הקלט, נשלח רק טקסט דרך זרם הפלט אל micro:bit.

קודם יוצרים שידור סטרימינג במקודד טקסט ומעבירים את השידור ל-port.writeable.

script.js - connect()

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

כשלוח ה-BBC micro:bit מחובר באמצעות יציאה טורית עם קושחת Espruino, הוא פועל כ-read-eval-print loop (REPL) של JavaScript, בדומה למה שמתקבל במעטפת Node.js. בשלב הבא, צריך לספק שיטה לשליחת נתונים למקור הנתונים. הקוד שלמטה מקבל כותב מזרם הפלט ואז משתמש ב-write כדי לשלוח כל שורה. כל שורה שנשלחת כוללת תו של שורה חדשה (\n), כדי להודיע ל-micro:bit להעריך את הפקודה שנשלחה.

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

כדי להעביר את המערכת למצב ידוע ולמנוע ממנה להחזיר את התווים שאנחנו שולחים לה, אנחנו צריכים לשלוח CTRL-C ולהשבית את ההד.

script.js - connect()

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

אני רוצה לנסות

עכשיו הפרויקט שלנו יכול לשלוח ולקבל נתונים מ-micro:bit. כדאי לוודא שאפשר לשלוח פקודה בצורה תקינה:

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. פותחים את הכרטיסייה מסוף בכלי הפיתוח ל-Chrome ומקלידים writeToStream('console.log("yes")');

בדף אמור להופיע משהו כזה:

5. שליטה במטריצת ה-LED

בניית מחרוזת הרשת של המטריצה

כדי לשלוט במטריצת ה-LED ב-micro:bit, צריך לקרוא ל-show(). בשיטה הזו מוצגים גרפיקה במסך ה-LED המובנה בגודל 5x5. הפונקציה מקבלת מספר בינארי או מחרוזת.

אנחנו נחזור על הפעולה הזו לגבי כל תיבות הסימון וניצור מערך של 1 ו-0, שבו 1 מציין שהתיבה מסומנת ו-0 מציין שהיא לא מסומנת. לאחר מכן צריך להפוך את המערך, כי הסדר של תיבות הסימון הפוך לסדר של נוריות ה-LED במטריצה. לאחר מכן, ממירים את המערך למחרוזת ויוצרים את הפקודה לשליחה ל-micro:bit.

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('')})`);

קישור תיבות הסימון לעדכון המטריצה

בשלב הבא, צריך להאזין לשינויים בתיבות הסימון, ואם יש שינוי, לשלוח את המידע הזה ל-micro:bit. בקוד לזיהוי תכונות (// CODELAB: Add feature detection here.), מוסיפים את השורה הבאה:

script.js - DOMContentLoaded

initCheckboxes();

בנוסף, נגדיר איפוס של הרשת כשמחברים את micro:bit בפעם הראשונה, כדי שיוצג סמיילי. הפונקציה drawGrid() כבר מסופקת. הפונקציה הזו דומה ל-sendGrid(). היא מקבלת מערך של 1 ו-0, ומסמנת את תיבות הסימון בהתאם.

script.js - clickConnect()

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

אני רוצה לנסות

עכשיו, כשהדף פותח חיבור ל-micro:bit, הוא ישלח פרצוף שמח. לחיצה על תיבות הסימון תעדכן את התצוגה במטריצת ה-LED.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. אמור להופיע חיוך במטריצת ה-LED של micro:bit.
5. משנים את תיבות הסימון כדי לצייר תבנית אחרת במטריצת ה-LED.

6. חיבור הכפתורים של micro:bit

הוספת אירוע של שעון ללחצני micro:bit

יש שני לחצנים ב-micro:bit, אחד בכל צד של מטריצת ה-LED. ‫Espruino מספקת פונקציה setWatch ששולחת אירוע או קריאה חוזרת כשלוחצים על הלחצן. כדי להאזין לשני הכפתורים, נגדיר את הפונקציה כגנרית ונדפיס את פרטי האירוע.

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

בשלב הבא, צריך לחבר את שני הלחצנים (שנקראים BTN1 ו-BTN2 בלוח micro:bit) בכל פעם שיציאה טורית מחוברת למכשיר.

script.js - clickConnect()

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

אני רוצה לנסות

בנוסף להצגת סמיילי כשהמכשיר מחובר, לחיצה על אחד מהלחצנים ב-micro:bit תוסיף טקסט לדף שמציין איזה לחצן נלחץ. ברוב המקרים, כל תו יופיע בשורה נפרדת.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. אמור להופיע חיוך במטריצת ה-LED של micro:bit.
5. לוחצים על הלחצנים ב-micro:bit ומוודאים שהטקסט החדש מתווסף לדף עם פרטים על הלחצן שנלחץ.

7. שימוש בזרם טרנספורמציה כדי לנתח נתונים נכנסים

טיפ: אם סטרימינג חדש בשבילכם, כדאי לעיין במושגים של Streams API ב-MDN. ה-codelab הזה הוא רק טעימה קטנה של הנושאים שקשורים לסטרימינג ולטיפול בסטרימינג.

טיפול בסיסי בשידורים

כשלוחצים על אחד מהלחצנים של micro:bit, המידע נשלח מ-micro:bit ליציאה הטורית דרך זרם. הזרמות מאוד שימושיות, אבל הן יכולות להיות גם מאתגרות כי לא תמיד מקבלים את כל הנתונים בבת אחת, והם עשויים להיות מחולקים לחלקים באופן שרירותי.

האפליקציה מדפיסה כרגע את הנתונים שמתקבלים בזמן שהם מגיעים (ב-readLoop). ברוב המקרים, כל תו מופיע בשורה נפרדת, אבל זה לא מאוד שימושי. מומלץ לנתח את הזרם לשורות נפרדות, ולהציג כל הודעה בשורה משלה.

שינוי של סטרימינג באמצעות TransformStream

כדי לעשות את זה, אפשר להשתמש בזרם טרנספורמציה ( TransformStream), שמאפשר לנתח את הזרם הנכנס ולהחזיר נתונים מנותחים. זרם טרנספורמציה יכול להיות בין מקור הזרם (במקרה הזה, micro:bit) לבין כל מה שצורכת את הזרם (במקרה הזה readLoop), ויכול להחיל טרנספורמציה שרירותית לפני שהיא נצרכת סופית. אפשר לחשוב על זה כמו על פס ייצור: כשהווידג'ט מתקדם לאורך הפס, כל שלב משנה אותו, כך שכשהוא מגיע ליעד הסופי הוא ווידג'ט מתפקד באופן מלא.

מידע נוסף זמין במאמר בנושא מושגים של Streams API ב-MDN.

שינוי השידור באמצעות LineBreakTransformer

ניצור מחלקה בשם LineBreakTransformer, שתקבל זרם ותחלק אותו לחלקים על סמך מעברי שורה (\r\n). המחלקה צריכה לכלול שתי שיטות, transform ו-flush. הקריאה ל-method‏ transform מתבצעת בכל פעם שמקור הנתונים מקבל נתונים חדשים. הוא יכול להוסיף את הנתונים לתור או לשמור אותם למועד מאוחר יותר. השיטה flush נקראת כשהזרם נסגר, והיא מטפלת בכל הנתונים שעוד לא עברו עיבוד.

בשיטה transform, נוסיף נתונים חדשים ל-container, ואז נבדוק אם יש מעברי שורה ב-container. אם יש, מפצלים אותו למערך, ואז חוזרים על השורות, ומפעילים את controller.enqueue() כדי לשלוח את השורות המנותחות.

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

כשזרם הנתונים נסגר, אנחנו פשוט מרוקנים את כל הנתונים שנותרו במאגר באמצעות enqueue.

script.js - LineBreakTransformer.flush()

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

לבסוף, צריך להעביר את הנתונים מהזרם הנכנס דרך LineBreakTransformer החדש. זרם הקלט המקורי שלנו הועבר רק דרך TextDecoderStream, ולכן אנחנו צריכים להוסיף עוד pipeThrough כדי להעביר אותו דרך LineBreakTransformer החדש שלנו.

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

אני רוצה לנסות

עכשיו, כשלוחצים על אחד מהלחצנים של micro:bit, הנתונים המודפסים אמורים לחזור בשורה אחת.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. אמור להופיע חיוך במטריצת ה-LED של micro:bit.
5. לוחצים על הלחצנים ב-micro:bit ומוודאים שמופיע משהו כמו הדוגמה הבאה:

שינוי השידור באמצעות JSONTransformer

אפשר לנסות לנתח את המחרוזת ל-JSON ב-readLoop, אבל במקום זאת, ניצור טרנספורמציה פשוטה מאוד של JSON שתהפוך את הנתונים לאובייקט JSON. אם הנתונים לא בפורמט JSON תקין, פשוט מחזירים את מה שהתקבל.

script.js - JSONTransformer.transform

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

לאחר מכן, מעבירים את הזרם דרך JSONTransformer אחרי שהוא עבר דרך LineBreakTransformer. כך אנחנו יכולים לשמור על JSONTransformer פשוט, כי אנחנו יודעים שקובץ ה-JSON יישלח תמיד בשורה אחת בלבד.

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

אני רוצה לנסות

עכשיו, כשלוחצים על אחד מהלחצנים של micro:bit, אמור להופיע [object Object] בדף.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. אמור להופיע חיוך במטריצת ה-LED של micro:bit.
5. לוחצים על הכפתורים ב-micro:bit ומוודאים שמוצג משהו כמו הדוגמה הבאה:

תגובה ללחיצות על כפתורים

כדי להגיב ללחיצות על לחצן micro:bit, מעדכנים את readLoop כדי לבדוק אם הנתונים שהתקבלו הם object עם מאפיין button. לאחר מכן, מתקשרים אל buttonPushed כדי לטפל בלחיצה על הלחצן.

script.js - readLoop()

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

כשלוחצים על לחצן micro:bit, התצוגה במטריצת ה-LED צריכה להשתנות. משתמשים בקוד הבא כדי להגדיר את המטריצה:

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

אני רוצה לנסות

עכשיו, כשלוחצים על אחד מהלחצנים של micro:bit, מטריצת ה-LED אמורה להשתנות לסמיילי או לסמיילי עצוב.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. אמור להופיע חיוך במטריצת ה-LED של micro:bit.
5. לוחצים על הלחצנים ב-micro:bit ומוודאים שמטריצת ה-LED משתנה.

8. סגירת היציאה הטורית

השלב האחרון הוא לחבר את פונקציית הניתוק כדי לסגור את היציאה כשהמשתמש מסיים.

סגירת היציאה כשהמשתמש לוחץ על הלחצן 'התחברות' או 'ניתוק'

כשהמשתמש לוחץ על הלחצן Connect (התחברות) או Disconnect (ניתוק), צריך לסגור את החיבור. אם היציאה כבר פתוחה, קוראים ל-disconnect()ומעדכנים את ממשק המשתמש כדי לציין שהדף כבר לא מחובר למכשיר עם יציאה טורית.

script.js - clickConnect()

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

סגירת הזרמים והיציאה

בפונקציה disconnect, צריך לסגור את זרם הקלט, את זרם הפלט ואת היציאה. כדי לסגור את זרם הקלט, קוראים ל-reader.cancel(). הקריאה ל-cancel היא אסינכרונית, ולכן צריך להשתמש ב-await כדי להמתין עד שהיא תסתיים:

script.js - disconnect()

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

כדי לסגור את זרם הפלט, מקבלים writer, קוראים ל-close() ומחכים שאובייקט outputDone ייסגר:

script.js - disconnect()

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

לבסוף, סוגרים את היציאה הטורית ומחכים שהיא תיסגר:

script.js - disconnect()

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

אני רוצה לנסות

עכשיו אפשר לפתוח ולסגור את היציאה הטורית מתי שרוצים.

1. טוענים מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאה טורית, בוחרים את מכשיר BBC micro:bit ולוחצים על Connect (חיבור).
4. אמור להופיע חיוך במטריצת ה-LED של micro:bit
5. לוחצים על הלחצן Disconnect (ניתוק) ומוודאים שמטריצת ה-LED נכבית ואין שגיאות במסוף.

9. מזל טוב

מעולה! יצרתם בהצלחה את אפליקציית האינטרנט הראשונה שלכם שמשתמשת ב-Web Serial API.

ה-300 הראשונים שיסיימו את ה-Codelab הזה ב-Chrome Dev Summit בשנת 2019 יקבלו לוח BBC micro:bit לקחת הביתה. כדי לקבל את הלוח, צריך להראות לצוות של ה-codelab את הפרויקט עם כל הפונקציות, כולל תיבות הסימון, הלחצנים בלוח והפונקציונליות של חיבור וניתוק.

כדאי לעקוב אחרי https://goo.gle/fugu-api-tracker כדי לקבל את העדכונים האחרונים על Web Serial API ועל כל היכולות החדשות והמעניינות האחרות באינטרנט שצוות Chrome עובד עליהן.