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

1. מבוא

תאריך עדכון אחרון: 19 בספטמבר 2022

מה תפַתחו

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

מה תלמדו

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

מה צריך להכין

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

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

2. מידע על Web Series API

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

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

• Arduino Create
• Betaflight Configurator
• סביבת פיתוח משולבת (IDE) של Espruino
• MakeCode

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

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

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

קבלת הקוד

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

1. פותחים כרטיסייה חדשה בדפדפן ועוברים לכתובת https://web-serial-codelab-start.glitch.me/.
2. לוחצים על הקישור תקלה ברמיקס כדי ליצור גרסה משלכם לפרויקט לתחילת הפעולה.
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. אם כן, הקוד הזה מסתיר את הבאנר עם ההודעה על כך שאין תמיכה בטורי אינטרנט.

רוצים לנסות?

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

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

בשלב הבא, פותחים את היציאה הטורי. כמו רוב ממשקי ה-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 ולוחצים על התחברות.
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. בתיבת הדו-שיח לבחירת יציאת ה-Serial, בוחרים את מכשיר ה-BBC micro:bit ולוחצים על Connect.
4. אתם אמורים לראות את הלוגו של Espruino:

טיפ: יכול להיות שהקובץ הזה יהיה פגום ב-Chrome OS וב-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. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח 'בורר יציאות טוריות', בוחרים במכשיר המיקרו-ביט של BBC ולוחצים על התחברות.
4. פותחים את הכרטיסייה מסוף בכלי הפיתוח ל-Chrome ומקלידים writeToStream('console.log("yes")');.

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

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

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

כדי לשלוט במטריצה של נוריות ה-LED ב-micro:bit, צריך לבצע קריאה ל-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(). היא מקבלת מערך של 1 ו-0, ומסמנת את התיבות בהתאם.

script.js - clickConnect()

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

רוצים לנסות?

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

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

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

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

במיקרו-ביט יש שני לחצנים, אחד מכל אחד מהצדדים של מטריצת ה-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');

רוצים לנסות?

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

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

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

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

טיפול בזרם בסיסי

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

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

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

לשם כך, נוכל להשתמש בטרנספורמציה ( TransformStream) שמאפשרת לנתח את מקור הנתונים הנכנס ולהחזיר נתונים מנותחים. מקור הנתונים של מקור הנתונים (במקרה הזה, micro:bit) יכול להיות בין מקור הנתונים (במקרה הזה, micro:bit) לבין הגורם שמשתמש בנתונים (במקרה הזה 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()));

רוצים לנסות?

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

1. לטעון מחדש את הדף.
2. לוחצים על הלחצן Connect (קישור).
3. בתיבת הדו-שיח לבחירת יציאת ה-Serial, בוחרים את מכשיר ה-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. בתיבת הדו-שיח לבחירת יציאת ה-Serial, בוחרים את מכשיר ה-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';
}

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

9. מזל טוב

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

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