เริ่มต้นใช้งาน Web Serial API

ปรับปรุงล่าสุด: 2020-07-21

สิ่งที่คุณจะสร้าง

ใน codelab นี้คุณจะสร้างหน้าเว็บที่ใช้ Web Serial API เพื่อโต้ตอบกับบอร์ด BBC micro: bit เพื่อแสดงภาพบนเมทริกซ์ LED 5x5 คุณจะได้เรียนรู้เกี่ยวกับ Web Serial API และวิธีใช้การอ่านเขียนได้และแปลงสตรีมเพื่อสื่อสารกับอุปกรณ์อนุกรมผ่านเบราว์เซอร์

81167ab7c01d353d.png

สิ่งที่คุณจะได้เรียนรู้

  • วิธีเปิดและปิดพอร์ต Web Serial
  • วิธีใช้ลูปการอ่านเพื่อจัดการข้อมูลจากอินพุตสตรีม
  • วิธีการส่งข้อมูลผ่านสตรีมการเขียน

สิ่งที่คุณต้องการ

เราเลือกใช้ micro: bit สำหรับ codelab นี้เนื่องจากราคาไม่แพงมีอินพุต (ปุ่ม) และเอาต์พุตไม่กี่อินพุต (จอแสดงผล LED 5x5) และสามารถจัดหาอินพุตและเอาต์พุตเพิ่มเติมได้ ดูหน้า BBC micro: bit บนไซต์ Espruino เพื่อดูรายละเอียดเกี่ยวกับความสามารถของ micro: bit

Web Serial API ให้วิธีสำหรับเว็บไซต์ในการอ่านและเขียนไปยังอุปกรณ์อนุกรมที่มีสคริปต์ API เชื่อมโยงเว็บและโลกทางกายภาพโดยอนุญาตให้เว็บไซต์สื่อสารกับอุปกรณ์อนุกรมเช่นไมโครคอนโทรลเลอร์และเครื่องพิมพ์ 3 มิติ

มีตัวอย่างมากมายของซอฟต์แวร์ควบคุมที่สร้างขึ้นโดยใช้เทคโนโลยีเว็บ ตัวอย่างเช่น:

ในบางกรณีเว็บไซต์เหล่านี้สื่อสารกับอุปกรณ์ผ่านแอปพลิเคชันตัวแทนดั้งเดิมที่ผู้ใช้ติดตั้งด้วยตนเอง ในกรณีอื่นแอปพลิเคชันจะถูกส่งในแอปพลิเคชันเนทีฟแบบแพ็กเกจผ่านเฟรมเวิร์กเช่นอิเล็กตรอน ในกรณีอื่น ๆ ผู้ใช้จะต้องดำเนินการขั้นตอนเพิ่มเติมเช่นการคัดลอกแอปพลิเคชันที่คอมไพล์แล้วไปยังอุปกรณ์ด้วยแฟลชไดรฟ์ USB

ประสบการณ์ของผู้ใช้สามารถปรับปรุงได้โดยการให้การสื่อสารโดยตรงระหว่างไซต์และอุปกรณ์ที่กำลังควบคุม

รับรหัส

เราได้ใส่ทุกสิ่งที่คุณต้องการสำหรับ codelab นี้ไว้ในโครงการทันทีทันใด

  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.
const notSupported = document.getElementById('notSupported');
notSupported.classList.toggle('hidden', 'serial' in navigator);

ตรวจสอบว่ารองรับ Web Serial หรือไม่ หากเป็นเช่นนั้นรหัสนี้จะซ่อนแบนเนอร์ที่ระบุว่าไม่รองรับ Web Serial

ลองมัน

  1. โหลดหน้า
  2. ตรวจสอบว่าเพจไม่แสดงแบนเนอร์สีแดงที่ระบุว่าไม่รองรับ Web Serial

เปิดพอร์ตอนุกรม

ต่อไปเราต้องเปิดพอร์ตอนุกรม เช่นเดียวกับ API สมัยใหม่อื่น ๆ Web Serial API เป็นแบบอะซิงโครนัส วิธีนี้จะป้องกันไม่ให้ UI ปิดกั้นเมื่อรอการป้อนข้อมูล แต่ก็สำคัญเช่นกันเนื่องจากหน้าเว็บอาจได้รับข้อมูลอนุกรมได้ตลอดเวลาและเราต้องการวิธีการฟัง

เนื่องจากคอมพิวเตอร์อาจมีอุปกรณ์อนุกรมหลายเครื่องเมื่อเบราว์เซอร์พยายามขอพอร์ตระบบจะแจ้งให้ผู้ใช้เลือกอุปกรณ์ที่จะเชื่อมต่อ

เพิ่มรหัสต่อไปนี้ในโครงการของคุณ:

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 baud ระหว่างชิป USB-to-serial และโปรเซสเซอร์หลัก

ลองเชื่อมต่อปุ่มเชื่อมต่อและเรียกใช้การ connect() เมื่อผู้ใช้คลิก

เพิ่มรหัสต่อไปนี้ในโครงการของคุณ:

script.js - clickConnect()

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

ลองมัน

ตอนนี้โครงการของเรามีขั้นต่ำในการเริ่มต้น การคลิกปุ่ม เชื่อมต่อ จะแจ้งให้ผู้ใช้เลือกอุปกรณ์อนุกรมที่จะเชื่อมต่อจากนั้นเชื่อมต่อกับ micro: bit

  1. โหลดหน้านี้ซ้ำ
  2. คลิกปุ่ม เชื่อมต่อ
  3. ในกล่องโต้ตอบตัวเลือกพอร์ตอนุกรมเลือกอุปกรณ์ BBC micro: bit แล้วคลิก เชื่อมต่อ
  4. บนแท็บคุณจะเห็นไอคอนที่ระบุว่าคุณได้เชื่อมต่อกับอุปกรณ์อนุกรม:

d9d0d3966960aeab.png

ตั้งค่าอินพุตสตรีมเพื่อรับฟังข้อมูลจากพอร์ตอนุกรม

หลังจากสร้างการเชื่อมต่อแล้วเราจำเป็นต้องตั้งค่าอินพุตสตรีมและเครื่องอ่านเพื่ออ่านข้อมูลจากอุปกรณ์ ขั้นแรกเราจะได้รับสตรีมที่อ่านได้จากพอร์ตโดยเรียกใช้ 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 จริงแสดงว่าพอร์ตถูกปิดหรือไม่มีข้อมูลเข้ามาอีก

เพิ่มรหัสต่อไปนี้ในโครงการของคุณ:

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:

93494fd58ea835eb.png

ตั้งค่าสตรีมเอาท์พุตเพื่อส่งข้อมูลไปยังพอร์ตอนุกรม

โดยทั่วไปการสื่อสารแบบอนุกรมจะเป็นแบบสองทิศทาง นอกเหนือจากการรับข้อมูลจากพอร์ตอนุกรมแล้วเรายังต้องการส่งข้อมูลไปยังพอร์ต เช่นเดียวกับสตรีมอินพุตเราจะส่งข้อความผ่านสตรีมเอาต์พุตไปยัง 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 micro: bit จะทำหน้าที่เป็น JavaScript read-eval-print loop (REPL) คล้ายกับสิ่งที่คุณได้รับในเชลล์ 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. คลิกปุ่ม เชื่อมต่อ
  3. ในกล่องโต้ตอบตัวเลือกพอร์ตอนุกรมเลือกอุปกรณ์ BBC micro: bit แล้วคลิก เชื่อมต่อ
  4. เปิดแท็บ คอนโซล ใน Chrome DevTools แล้วพิมพ์ writeToStream('console.log("yes")');

คุณควรเห็นสิ่งนี้พิมพ์อยู่บนหน้า:

a13187e7e6260f7f.png

สร้างสตริงตารางเมทริกซ์

ในการควบคุมเมทริกซ์ LED บน micro: bit เราต้องเรียก show() วิธีนี้จะแสดงกราฟิกบนหน้าจอ LED ขนาด 5x5 ในตัว สิ่งนี้ใช้เลขฐานสองหรือสตริง

เราจะทำซ้ำในช่องทำเครื่องหมายและสร้างอาร์เรย์ 1s และ 0s เพื่อระบุว่ารายการใดถูกเลือกและไม่ถูกเลือก จากนั้นเราจำเป็นต้องย้อนกลับอาร์เรย์เนื่องจากลำดับของช่องทำเครื่องหมายของเราตรงกันข้ามกับลำดับของ 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() ; ใช้อาร์เรย์ 1s และ 0s และตรวจสอบช่องทำเครื่องหมายตามความเหมาะสม

script.js - clickConnect()

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

ลองมัน

ตอนนี้เมื่อเพจเปิดการเชื่อมต่อกับ micro: bit มันจะส่งใบหน้าที่มีความสุข การคลิกช่องทำเครื่องหมายจะอัปเดตการแสดงผลบนเมทริกซ์ LED

  1. โหลดหน้านี้ซ้ำ
  2. คลิกปุ่ม เชื่อมต่อ
  3. ในกล่องโต้ตอบตัวเลือกพอร์ตอนุกรมเลือกอุปกรณ์ BBC micro: bit แล้วคลิก เชื่อมต่อ
  4. คุณควรเห็นรอยยิ้มที่แสดงบนเมทริกซ์ LED micro: bit
  5. วาดรูปแบบอื่นบนเมทริกซ์ LED โดยเปลี่ยนช่องทำเครื่องหมาย

เพิ่มเหตุการณ์นาฬิกาบนปุ่ม 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. คลิกปุ่ม เชื่อมต่อ
  3. ในกล่องโต้ตอบตัวเลือกพอร์ตอนุกรมเลือกอุปกรณ์ BBC micro: bit แล้วคลิก เชื่อมต่อ
  4. คุณควรเห็นรอยยิ้มที่แสดงบนเมทริกซ์ LED micro: bits
  5. กดปุ่มบน micro: bit และตรวจสอบว่าข้อความนั้นต่อท้ายข้อความใหม่ในหน้าพร้อมกับรายละเอียดของปุ่มที่กด

การจัดการสตรีมขั้นพื้นฐาน

เมื่อกดปุ่ม micro: bit ปุ่มใดปุ่มหนึ่ง micro: bit จะส่งข้อมูลไปยังพอร์ตอนุกรมผ่านสตรีม สตรีมมีประโยชน์มาก แต่ก็อาจเป็นความท้าทายได้เช่นกันเพราะคุณไม่จำเป็นต้องได้รับข้อมูลทั้งหมดในครั้งเดียวและอาจรวมเป็นก้อนโดยพลการ

ขณะนี้แอปพิมพ์สตรีมขาเข้าเมื่อมาถึง (ใน readLoop ) ในกรณีส่วนใหญ่ตัวละครแต่ละตัวจะอยู่ในแนวของตัวเอง แต่ก็ไม่ค่อยมีประโยชน์ ตามหลักการแล้วสตรีมควรแยกวิเคราะห์เป็นแต่ละบรรทัดและแต่ละข้อความจะแสดงเป็นบรรทัดของตัวเอง

เปลี่ยนสตรีมด้วย TransformStream

ในการทำเช่นนั้นเราสามารถใช้กระแส TransformStream ( TransformStream ) ซึ่งทำให้สามารถแยกวิเคราะห์สตรีมขาเข้าและส่งคืนข้อมูลที่แยกวิเคราะห์ได้ สตรีมการแปลงสามารถนั่งระหว่างแหล่งสตรีม (ในกรณีนี้คือ 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. คลิกปุ่ม เชื่อมต่อ
  3. ในกล่องโต้ตอบตัวเลือกพอร์ตอนุกรมเลือกอุปกรณ์ BBC micro: bit แล้วคลิก เชื่อมต่อ
  4. คุณควรเห็นรอยยิ้มที่แสดงบนเมทริกซ์ LED micro: bit
  5. กดปุ่มบน micro: bit และตรวจสอบว่าคุณเห็นสิ่งต่อไปนี้:

6c2193880c748412.png

แปลงสตรีมด้วย 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 ของเราเป็น 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. คลิกปุ่ม เชื่อมต่อ
  3. ในกล่องโต้ตอบตัวเลือกพอร์ตอนุกรมเลือกอุปกรณ์ BBC micro: bit แล้วคลิก เชื่อมต่อ
  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. คลิกปุ่ม เชื่อมต่อ
  3. ในกล่องโต้ตอบตัวเลือกพอร์ตอนุกรมเลือกอุปกรณ์ BBC micro: bit แล้วคลิก เชื่อมต่อ
  4. คุณควรเห็นรอยยิ้มที่แสดงบนเมทริกซ์ LED micro: bits
  5. กดปุ่มบน micro: bit และตรวจสอบว่าเมทริกซ์ LED เปลี่ยนไป

ขั้นตอนสุดท้ายคือการเชื่อมต่อฟังก์ชันการตัดการเชื่อมต่อเพื่อปิดพอร์ตเมื่อผู้ใช้ดำเนินการเสร็จสิ้น

ปิดพอร์ตเมื่อผู้ใช้คลิกปุ่มเชื่อมต่อ / ยกเลิกการเชื่อมต่อ

เมื่อผู้ใช้คลิกปุ่ม Connect / Disconnect เราจำเป็นต้องปิดการเชื่อมต่อ หากพอร์ตเปิดอยู่แล้วให้โทร disconnect() และอัปเดต UI เพื่อระบุว่าเพจไม่ได้เชื่อมต่อกับอุปกรณ์อนุกรมอีกต่อไป

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 micro: bit แล้วคลิก เชื่อมต่อ
  4. คุณควรเห็นรอยยิ้มที่แสดงบนเมทริกซ์ LED micro: bit
  5. กดปุ่ม Disconnect และตรวจสอบว่าเมทริกซ์ LED ดับลงและไม่มีข้อผิดพลาดในคอนโซล

ยินดีด้วย! คุณได้สร้างเว็บแอปแรกที่ใช้ Web Serial API สำเร็จแล้ว

จับตาดู https://goo.gle/fugu-api-tracker สำหรับ Web Serial API ล่าสุดและความสามารถใหม่ ๆ บนเว็บที่น่าตื่นเต้นทั้งหมดที่ทีม Chrome กำลังดำเนินการอยู่