תחילת העבודה עם ה-Web Serial API

עודכן לאחרונה:2019-11-8

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

מה תיצור

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

זהירות: Web Serial API נמצא כרגע בתהליכי פיתוח ועדיין לא זמין לכלל המשתמשים. ה-API עשוי להשתנות לפני שה-API יהיה זמין לכלל המשתמשים.

מה תלמדו

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

מה צריך?

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

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

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

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

• Arduino Create
• מודול של Betaflight
• ספרד – ספרד
• MakeCode

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

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

הפעלת ממשק ה-API ליציאות טוריות

ה-Web Serial API נמצא כרגע בשלבי פיתוח וזמין רק באמצעות סימון. עליך להפעיל את הדגל #enable-experimental-web-platform-features ב-chrome://flags.

מקבלים את הקוד

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

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

בדיקה אם ה-Web Serial API נתמך

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

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

script.js - DOMContentLoaded

// CODELAB: Add feature detection here.
if ('serial' in navigator) {
  const notSupported = document.getElementById('notSupported');
  notSupported.classList.add('hidden');
}

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

רוצים לנסות?

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

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

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

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

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

script.js - clickConnect()

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

רוצים לנסות?

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

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

טיפ: אם המיקרו: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();

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

טיפ: ייתכן שהוא פגום ב-Chrome OS וב-Linux כי יש שירות מערכת שמנסה לדבר עם המכשיר כי מערכת ההפעלה סבורה שהמכשיר הוא מודם. אפשר להתעלם מהשחיתות הזו, אבל היא עשויה להיראות מוזר. אחת מהסיבות לכך היא שחשוב לשלוח Ctrl-C כפריט הראשון.

הגדרה של יציאת פלט כדי לשלוח נתונים ליציאה הטורית

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

בשלב הראשון, יוצרים שידור עם מקודד טקסט אנכי ומחברים את השידור ל-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, לוח ה-MicroBbit: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 micro:bit ולוחצים על התחברות.
4. פותחים את הכרטיסייה Console (Console) בכלי הפיתוח ב-Chrome ומקלידים
   writeToStream('console.log("yes")');

אתם אמורים לראות בדף קטע כזה:

יצירת רשת מטריצה

כדי לשלוט במטריצת ה-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('')})`);

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

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

הוספת אירוע צפייה בלחצני המיקרו: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');

רוצים לנסות?

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

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

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

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

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

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

משנה שידורים עם TransformStream

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

מידע נוסף זמין במאמר קונספט MDN's Streams API.

משנים את הסטרימינג עם 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 micro:bit ולוחצים על התחברות.
4. אמורה להופיע חיוך במטריצת ה-LED של המיקרו-ביט:
5. לוחצים על הלחצנים במיקרו: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()));

רוצים לנסות?

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

1. לטעון מחדש את הדף.
2. לוחצים על הלחצן התחברות.
3. בתיבת הדו-שיח של בוחר היציאות הטוריות, בוחרים את מכשיר ה-BBC micro:bit ולוחצים על התחברות.
4. אמורה להופיע חיוך במטריצת ה-LED של המיקרו-ביט:
5. לוחצים על הלחצנים במיקרו: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();
  }
}

רוצים לנסות?

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

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

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

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

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

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

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

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