หน้านี้ได้รับการแปลโดย Cloud Translation API

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

อัปเดตล่าสุด: 21-11-2019

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

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

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

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

สิ่งที่ต้องมี

บอร์ด BBC micro:bit ที่มีเฟิร์มแวร์ล่าสุดของ Espruino
Chrome เวอร์ชันล่าสุด (78 ขึ้นไป)
ความรู้เกี่ยวกับเครื่องมือ HTML, CSS, JavaScript และ Chrome DevTools

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

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

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

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

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

เปิดใช้ Web Serial API

ขณะนี้ Web Serial API อยู่ระหว่างการพัฒนาและพร้อมใช้งานแบบติดธงเท่านั้น คุณต้องเปิดใช้แฟล็ก #enable-experimental-web-platform-features ใน chrome://flags

รับรหัส

เราได้รวบรวมทุกอย่างที่จําเป็นสําหรับ Codelab นี้ลงในโปรเจ็กต์ Glitch

เปิดแท็บใหม่ของเบราว์เซอร์แล้วไปที่ https://web-serial-codelab-start.glitch.me/
คลิกลิงก์ Remix Glitch เพื่อสร้างโปรเจ็กต์เริ่มต้นของคุณเอง
คลิกปุ่มแสดง แล้วเลือกในหน้าต่างใหม่เพื่อดูการทํางานของโค้ด

ตรวจสอบว่า 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 หรือไม่ หากเป็นเช่นนั้น โค้ดนี้จะซ่อนแบนเนอร์ที่ระบุว่าระบบไม่รองรับ Web Serial

ลองเลย

โหลดหน้านี้
ยืนยันว่าหน้านี้ไม่แสดงแบนเนอร์สีแดงที่ระบุว่าระบบไม่รองรับ Web Serial

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

ถัดไป เราต้องเปิดพอร์ตอนุกรม Web Serial API จะไม่เรียลไทม์เหมือน 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 ระหว่างชิป USB กับซีเรียลและโปรเซสเซอร์หลัก

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

เพิ่มโค้ดต่อไปนี้ลงในโปรเจ็กต์

script.js - clickConnect()

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

ลองเลย

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

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

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

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

ลูปการอ่านเป็นฟังก์ชันแบบไม่พร้อมกันซึ่งเรียกใช้วนซ้ําและรอเนื้อหาโดยไม่บล็อกชุดข้อความหลัก เมื่อมีข้อมูลใหม่ ผู้อ่านจะแสดงพร็อพเพอร์ตี้ 2 รายการ ได้แก่ บูลีน 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;
  }
}

ลองเลย

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

โหลดหน้าเว็บซ้ำ
คลิกปุ่มเชื่อมต่อ
ในกล่องโต้ตอบตัวเลือก Serial Port ให้เลือกอุปกรณ์ BBC micro:bit แล้วคลิก Connect
คุณควรเห็นโลโก้ Espruino

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

โดยทั่วไปการสื่อสารแบบ 2 ทิศทางจะเป็น 2 ทิศทาง นอกจากการรับข้อมูลจากพอร์ตอนุกรมแล้ว เรายังต้องการส่งข้อมูลไปยังพอร์ตด้วย เช่นเดียวกับสตรีมอินพุต เราจะส่งข้อความผ่านสตรีมเอาต์พุตไปยัง 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 กระดาน Micro:bit ของ BBC จะทําหน้าที่เป็น ลูปการพิมพ์อิเล็กทรอนิกส์ (REPL) ของ JavaScript คล้ายกับที่คุณได้รับใน Shell ของ 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 ได้ โปรดยืนยันว่าเราสามารถส่งคําสั่งได้อย่างถูกต้อง

โหลดหน้าเว็บซ้ำ
คลิกปุ่มเชื่อมต่อ
ในกล่องโต้ตอบตัวเลือก Serial Port ให้เลือกอุปกรณ์ BBC micro:bit แล้วคลิก Connect
เปิดแท็บคอนโซลในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome แล้วพิมพ์
writeToStream('console.log("yes")');

คุณควรจะเห็นข้อความลักษณะนี้ปรากฏขึ้นในหน้าเว็บ

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

หากต้องการควบคุมเมทริกซ์ 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();

มารีเซ็ตตารางกริดเมื่อมีการเชื่อมต่อ micro:bit เป็นครั้งแรกด้วย ซึ่งแสดงให้เห็นใบหน้าที่มีความสุข มีฟังก์ชัน drawGrid() อยู่แล้ว ฟังก์ชันนี้ทํางานคล้ายกับ sendGrid() โดยมีอาร์เรย์ตั้งแต่ 1 และ 0 แล้วเลือกช่องทําเครื่องหมายตามความเหมาะสม

script.js - clickConnect()

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

ลองเลย

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

โหลดหน้าเว็บซ้ำ
คลิกปุ่มเชื่อมต่อ
ในกล่องโต้ตอบตัวเลือก Serial Port ให้เลือกอุปกรณ์ BBC micro:bit แล้วคลิก Connect
คุณควรเห็นรอยยิ้มแสดงอยู่บนเมทริกซ์ micro:bit LED
วาดรูปแบบอื่นบนเมทริกซ์ LED โดยเปลี่ยนช่องทําเครื่องหมาย

เพิ่มเหตุการณ์การดูบนปุ่ม micro:bit

ปุ่ม micro:bit มี 2 ปุ่ม คือ ด้านใดด้านหนึ่งของเมทริกซ์ LED Espruino มีฟังก์ชัน setWatch ที่ส่งเหตุการณ์/โค้ดเรียกกลับเมื่อกดปุ่ม เนื่องจากเราต้องการฟังปุ่มทั้ง 2 ปุ่ม เราจึงทําให้ฟังก์ชันของเราเป็นแบบทั่วไปและให้ระบบพิมพ์รายละเอียดกิจกรรมด้วย

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

โหลดหน้าเว็บซ้ำ
คลิกปุ่มเชื่อมต่อ
ในกล่องโต้ตอบตัวเลือก Serial Port ให้เลือกอุปกรณ์ BBC micro:bit แล้วคลิก Connect
คุณควรเห็นรอยยิ้มปรากฏขึ้นบนเมตริกซ์ LED แบบ micro:bits
กดปุ่มบน micro:bit และยืนยันว่าข้อความนั้นมีส่วนต่อท้ายหน้าเว็บพร้อมด้วยรายละเอียดของปุ่มที่กด

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

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

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

การเปลี่ยนรูปแบบด้วย `TransformStream`

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

โปรดดูข้อมูลเพิ่มเติมที่แนวคิดเกี่ยวกับ API สตรีมของ MDN&#39

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

มาสร้างชั้นเรียน LineBreakTransformer กัน ซึ่งจะแบ่งสตรีมออกเป็นส่วนๆ ตามการแบ่งบรรทัด (\r\n) ชั้นเรียนนี้จะต้องมี 2 วิธี ได้แก่ 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 ปุ่มใดปุ่มหนึ่ง ข้อมูลที่พิมพ์ควรจะแสดงผลในบรรทัดเดียว

โหลดหน้าเว็บซ้ำ
คลิกปุ่มเชื่อมต่อ
ในกล่องโต้ตอบตัวเลือก Serial Port ให้เลือกอุปกรณ์ BBC micro:bit แล้วคลิก Connect
คุณควรเห็นรอยยิ้มแสดงอยู่บนเมทริกซ์ micro:bit LED
กดปุ่มบน 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] ที่พิมพ์บนหน้าเว็บ

โหลดหน้าเว็บซ้ำ
คลิกปุ่มเชื่อมต่อ
ในกล่องโต้ตอบตัวเลือก Serial Port ให้เลือกอุปกรณ์ BBC micro:bit แล้วคลิก Connect
คุณควรเห็นรอยยิ้มแสดงอยู่บนเมทริกซ์ micro:bit LED
กดปุ่มบน 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 ควรเปลี่ยนเป็นใบหน้ามีความสุขหรือหน้าเศร้า

โหลดหน้าเว็บซ้ำ
คลิกปุ่มเชื่อมต่อ
ในกล่องโต้ตอบตัวเลือก Serial Port ให้เลือกอุปกรณ์ BBC micro:bit แล้วคลิก Connect
คุณควรเห็นรอยยิ้มปรากฏขึ้นบนเมตริกซ์ LED แบบ micro:bits
กดปุ่มบน micro:bit และยืนยันว่าเมตริกซ์ LED มีการเปลี่ยนแปลง

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

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

เมื่อผู้ใช้คลิกปุ่มเชื่อมต่อ/ยกเลิกการเชื่อมต่อ เราต้องปิดการเชื่อมต่อ หากพอร์ตเปิดอยู่แล้ว ให้เรียก 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;
  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;

ลองเลย

ตอนนี้คุณจะเปิดและปิดพอร์ตอนุกรมได้ตามที่ต้องการ

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

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

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

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

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

สิ่งที่ต้องมี

เปิดใช้ Web Serial API

รับรหัส

ตรวจสอบว่า Web Serial API รองรับหรือไม่

ลองเลย

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

ลองเลย

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

ลองเลย

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

ลองเลย

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

ทําเครื่องหมายในช่องเพื่ออัปเดตเมทริกซ์

ลองเลย

เพิ่มเหตุการณ์การดูบนปุ่ม micro:bit

ลองเลย

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

การเปลี่ยนรูปแบบด้วย TransformStream

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

ลองเลย

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

ลองเลย

การตอบสนองต่อการกดปุ่ม

ลองเลย

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

ปิดสตรีมและพอร์ต

ลองเลย

การเปลี่ยนรูปแบบด้วย `TransformStream`

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

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