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

1. מבוא

עדכון אחרון: 21.07.2020

מה תפַתחו

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

מה תלמדו

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

מה צריך להכין

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

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

2. מידע על Web Series API

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

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

• Arduino Create
• הגדרת Betaflight
• סביבת פיתוח משולבת (IDE) של Espruino
• MakeCode

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

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

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

לקבלת הקוד

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

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

4. פתיחת חיבור טורי

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

קודם כול צריך לבדוק אם Web Series 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 Series. אם כן, הקוד הזה מסתיר את הבאנר עם ההודעה על כך שאין תמיכה בסידור טורי באינטרנט.

רוצים לנסות?

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

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

בשלב הבא, צריך לפתוח את היציאה הטורית. כמו רוב ממשקי ה-API המודרניים האחרים, Web Series 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 משתמש בחיבור באוד של 9600 בין שבב ה-USB לסדרי לבין המעבד הראשי.

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

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

script.js - clickConnect()

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

רוצים לנסות?

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

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

טיפ: אם המיקרו:ביט לא מופיע בבורר, נסו לאפס את המכשיר על ידי לחיצה על לחצן האיפוס שליד יציאת ה-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. לוחצים על הלחצן התחברות.
3. בתיבת הדו-שיח 'בורר יציאות טוריות', בוחרים במכשיר המיקרו-ביט של BBC ולוחצים על התחברות.
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;

כשמחוברים בחיבור טורי עם הקושחה של Espruino, לוח המיקרו:ביט של BBC פועל כלולאת קריאה-ערך-הדפסה (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);');

רוצים לנסות?

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

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

אתם אמורים לראות בדף משהו כזה:

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

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

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

אנחנו נחזור על הסימון של תיבות הסימון וניצור מערך של ספרות 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();

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

script.js - clickConnect()

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

רוצים לנסות?

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

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

6. הכנסת לחצני המיקרו:ביט

הוספת אירוע צפייה בלחצני המיקרו ביט

במיקרו-ביט יש שני לחצנים, אחד מכל אחד מהצדדים של מטריצת ה-LED. אספרוינו מספקת פונקציה setWatch ששולחת אירוע/קריאה חוזרת (callback) כשלוחצים על הלחצן. בגלל שאנחנו רוצים להקשיב לשני הלחצנים, נהפוך את הפונקציה שלנו לגנרית ונדפיס את פרטי האירוע.

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 בלוח המיקרו:ביט) בכל פעם שהיציאה הטורית מחוברת למכשיר.

script.js - clickConnect()

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

רוצים לנסות?

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

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

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

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

טיפול בסיסי בסטרימינג

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

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

לבצע טרנספורמציה של שידורים חיים באמצעות TransformStream

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

למידע נוסף, ראו מושגי Streams API של MDN.

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

ניצור כיתת LineBreakTransformer, שתתייחס לשידור ולחלק אותו לפי מעברי שורה (\r\n). לכיתה נדרשות שתי שיטות: transform ו-flush. מתבצעת קריאה לשיטה 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()));

רוצים לנסות?

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

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

לשנות את הסטרימינג באמצעות 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()));

רוצים לנסות?

עכשיו, כשלוחצים על אחד מלחצני המיקרו ביט, רואים ש-[object Object] מודפס על הדף.

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

תגובה ללחיצות על לחצנים

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

script.js - readLoop()

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

כשלוחצים על לחצן מיקרו:ביט, התצוגה במטריצת ה-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();
  }
}

רוצים לנסות?

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

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

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

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

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

כשהמשתמש לוחץ על הלחצן התחברות/ניתוק, אנחנו צריכים לסגור את החיבור. אם היציאה כבר פתוחה, צריך לבצע קריאה ל-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. לוחצים על הלחצן התחברות.
3. בתיבת הדו-שיח 'בורר יציאות טוריות', בוחרים במכשיר המיקרו-ביט של BBC ולוחצים על התחברות.
4. אתם אמורים לראות חיוך במטריצת ה-LED micro:bit
5. לוחצים על הלחצן ניתוק ומוודאים שמטריצת ה-LED כבויה ושאין שגיאות במסוף.

9. מזל טוב

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

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

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