Trang này được dịch bởi Cloud Translation API.

Bắt đầu sử dụng Web Serial API

1. Giới thiệu

Lần cập nhật gần đây nhất: ngày 19 tháng 09 năm 2022

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ tạo một trang web sử dụng Web Serial API để tương tác với bảng BBC micro:bit nhằm hiển thị hình ảnh trên ma trận LED 5x5. Bạn sẽ tìm hiểu về Web Serial API cũng như cách sử dụng luồng dễ đọc, có thể ghi và biến đổi để giao tiếp với thiết bị nối tiếp thông qua trình duyệt.

Kiến thức bạn sẽ học được

Cách mở và đóng cổng nối tiếp Web
Cách sử dụng vòng lặp đọc để xử lý dữ liệu từ luồng đầu vào
Cách gửi dữ liệu ra ngoài qua luồng ghi

Bạn cần có

Một bảng BBC micro:bit v1 có chương trình cơ sở Espruino 2v04
Phiên bản Chrome mới nhất (80 trở lên)
Kiến thức về HTML, CSS, JavaScript và Chrome DevTools

Chúng tôi đã chọn sử dụng micro:bit v1 cho lớp học lập trình này vì nó có giá cả phải chăng, cung cấp một vài đầu vào (nút) và đầu ra (màn hình LED 5x5) cũng như có thể cung cấp thêm đầu vào và đầu ra. Hãy xem trang micro:bit củaBBC trên trang web Espruino để biết chi tiết về chức năng của micro:bit.

2. Giới thiệu về Web Serial API

Web Serial API cung cấp một cách để các trang web đọc và ghi vào thiết bị nối tiếp bằng tập lệnh. API kết nối web và thế giới thực bằng cách cho phép các trang web giao tiếp với thiết bị nối tiếp, chẳng hạn như bộ vi điều khiển và máy in 3D.

Có nhiều ví dụ về phần mềm điều khiển được xây dựng bằng công nghệ web. Ví dụ:

Trong một số trường hợp, các trang web này giao tiếp với thiết bị thông qua một ứng dụng tác nhân gốc do người dùng cài đặt theo cách thủ công. Trong các trường hợp khác, ứng dụng được phân phối trong một ứng dụng gốc được đóng gói thông qua một khung như Electron. Trong các trường hợp khác, người dùng bắt buộc phải thực hiện một bước bổ sung, chẳng hạn như sao chép ứng dụng đã biên dịch vào thiết bị có ổ USB flash.

Bạn có thể cải thiện trải nghiệm người dùng bằng cách cung cấp hoạt động giao tiếp trực tiếp giữa trang web và thiết bị mà trang web đang kiểm soát.

3. Thiết lập

Lấy mã

Chúng tôi đã đặt mọi thứ bạn cần cho lớp học lập trình này vào một dự án Glitch.

Mở một thẻ trình duyệt mới rồi truy cập https://web-serial-codelab-start.glitch.me/.
Nhấp vào đường liên kết Remix Glitch (Phối lại Glitch) để tạo phiên bản dự án ban đầu của riêng bạn.
Nhấp vào nút Hiển thị, sau đó chọn Trong một cửa sổ mới để xem mã của bạn hoạt động.

4. Mở kết nối nối tiếp

Kiểm tra xem API Web Serial có được hỗ trợ hay không

Điều đầu tiên cần làm là kiểm tra xem Web Serial API có được hỗ trợ trong trình duyệt hiện tại hay không. Để làm việc đó, hãy kiểm tra xem serial có trong navigator hay không.

Trong sự kiện DOMContentLoaded, hãy thêm mã sau vào dự án của bạn:

script.js - DOMContentLoaded

// CODELAB: Add feature detection here.
const notSupported = document.getElementById('notSupported');
notSupported.classList.toggle('hidden', 'serial' in navigator);

Thao tác này sẽ kiểm tra xem dịch vụ Web Serial có được hỗ trợ hay không. Nếu đúng như vậy, mã này sẽ ẩn biểu ngữ cho biết rằng Web Serial không được hỗ trợ.

Thử nào

Tải trang.
Xác minh rằng trang không hiển thị biểu ngữ màu đỏ cho biết không hỗ trợ Web Serial.

Mở cổng nối tiếp

Tiếp theo, chúng ta cần mở cổng nối tiếp. Giống như hầu hết các API hiện đại khác, Web Serial API là không đồng bộ. Điều này giúp giao diện người dùng không bị chặn khi chờ dữ liệu đầu vào, nhưng cũng quan trọng vì trang web có thể nhận được dữ liệu nối tiếp bất cứ lúc nào và chúng ta cần có cách để nghe dữ liệu đó.

Vì máy tính có thể có nhiều thiết bị nối tiếp, nên khi trình duyệt cố gắng yêu cầu một cổng, trình duyệt sẽ nhắc người dùng chọn thiết bị để kết nối.

Thêm mã sau vào dự án của bạn:

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 });

Lệnh gọi requestPort sẽ nhắc người dùng về thiết bị mà họ muốn kết nối. Nếu gọi port.open, cổng sẽ mở ra. Chúng ta cũng cần cung cấp tốc độ mà chúng ta muốn giao tiếp với thiết bị nối tiếp. BBC micro:bit sử dụng kết nối 9600 baud giữa khối chuyển đổi USB sang nối tiếp và bộ xử lý chính.

Ngoài ra, hãy kết nối nút kết nối và yêu cầu nút này gọi connect() khi người dùng nhấp vào nút này.

Thêm mã sau vào dự án của bạn:

script.js - clickConnect()

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

Thử nào

Dự án của chúng ta hiện đã có những thành phần tối thiểu để bắt đầu. Khi nhấp vào nút Connect (Kết nối), người dùng sẽ được nhắc chọn thiết bị nối tiếp để kết nối, sau đó kết nối với micro:bit.

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Trên thẻ, bạn sẽ thấy một biểu tượng cho biết bạn đã kết nối với một thiết bị nối tiếp:

Thiết lập luồng đầu vào để theo dõi dữ liệu từ cổng nối tiếp

Sau khi thiết lập kết nối, chúng ta cần thiết lập luồng đầu vào và trình đọc để đọc dữ liệu qua thiết bị. Trước tiên, chúng ta sẽ lấy luồng có thể đọc được từ cổng bằng cách gọi port.readable. Vì biết rằng chúng tôi sẽ nhận lại được văn bản từ thiết bị, nên chúng tôi sẽ truyền văn bản đó qua bộ giải mã văn bản. Tiếp theo, chúng ta sẽ tìm một người đọc và bắt đầu vòng lặp đọc.

Thêm mã sau vào dự án của bạn:

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();

Vòng lặp đọc là một hàm không đồng bộ chạy trong vòng lặp và chờ nội dung mà không chặn luồng chính. Khi dữ liệu mới đến, trình đọc sẽ trả về hai thuộc tính: value và boolean done. Nếu giá trị done là true, thì cổng đã đóng hoặc không có thêm dữ liệu nào được chuyển vào.

Thêm mã sau vào dự án của bạn:

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;
  }
}

Thử nào

Dự án của chúng ta hiện có thể kết nối với thiết bị này và sẽ nối mọi dữ liệu nhận được từ thiết bị đó vào phần tử nhật ký.

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy biểu trưng của Espruino:

Thiết lập luồng đầu ra để gửi dữ liệu đến cổng nối tiếp

Giao tiếp nối tiếp thường là hai chiều. Ngoài việc nhận dữ liệu từ cổng nối tiếp, chúng ta cũng muốn gửi dữ liệu tới cổng. Tương tự như với luồng đầu vào, chúng ta sẽ chỉ gửi văn bản qua luồng đầu ra tới micro:bit.

Trước tiên, hãy tạo một sự kiện phát trực tiếp bộ mã hoá văn bản rồi chuyển sự kiện đó đến 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;

Khi được kết nối nối tiếp với chương trình cơ sở Espruino, bảng điều khiển micro:bit của BBC hoạt động như một vòng lặp đọc-eval-print (repL) JavaScript, tương tự như mã bạn nhận được trong shell Node.js. Tiếp theo, chúng ta cần cung cấp một phương thức để gửi dữ liệu đến luồng. Mã bên dưới sẽ lấy một trình ghi từ luồng đầu ra, sau đó sử dụng write để gửi từng dòng. Mỗi dòng được gửi bao gồm một ký tự dòng mới (\n) để cho micro:bit đánh giá lệnh đã gửi.

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();

Để đưa hệ thống vào trạng thái đã biết và ngăn hệ thống phản hồi lại các ký tự mà chúng ta gửi, chúng ta cần gửi CTRL-C và tắt tính năng phản hồi.

script.js - connect()

// CODELAB: Send CTRL-C and turn off echo on REPL
writeToStream('\x03', 'echo(false);');

Thử nào

Dự án của chúng ta hiện có thể gửi và nhận dữ liệu từ micro:bit. Hãy xác minh rằng chúng ta có thể gửi lệnh đúng cách:

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Mở thẻ Bảng điều khiển trong Chrome DevTools rồi nhập writeToStream('console.log("yes")');

Bạn sẽ thấy nội dung tương tự như sau được in trên trang:

15e2df0064b5de28.pngS

5. Điều khiển ma trận đèn LED

Tạo chuỗi lưới ma trận

Để điều khiển ma trận LED trên micro:bit, chúng ta cần gọi show(). Phương pháp này hiển thị đồ hoạ trên màn hình LED 5x5 tích hợp. Phương thức này nhận một số nhị phân hoặc một chuỗi.

Chúng ta sẽ lặp lại các hộp đánh dấu và tạo một mảng các giá trị 1s và 0s cho biết quảng cáo nào được đánh dấu và ô nào không được đánh dấu. Sau đó, chúng ta cần đảo ngược mảng vì thứ tự của các hộp đánh dấu là ngược lại với thứ tự đèn LED trong ma trận. Tiếp theo, chúng ta chuyển đổi mảng thành một chuỗi và tạo lệnh để gửi đến 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('')})`);

Chọn hộp đánh dấu để cập nhật ma trận

Tiếp theo, chúng ta cần theo dõi các thay đổi trên hộp đánh dấu và nếu có thay đổi, hãy gửi thông tin đó đến micro:bit. Trong mã phát hiện tính năng (// CODELAB: Add feature detection here.), hãy thêm dòng sau:

script.js - DOMContentLoaded

initCheckboxes();

Hãy đặt lại lưới khi micro:bit được kết nối lần đầu tiên để lưới hiển thị khuôn mặt vui vẻ. Hàm drawGrid() đã được cung cấp. Hàm này hoạt động tương tự như sendGrid(); hàm này lấy một mảng gồm các số 1 và 0, đồng thời kiểm tra các hộp đánh dấu cho phù hợp.

script.js - clickConnect()

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

Thử nào

Giờ đây, khi trang mở một kết nối đến micro:bit, trang sẽ gửi một khuôn mặt vui vẻ. Khi nhấp vào các hộp đánh dấu, màn hình sẽ cập nhật trên ma trận đèn LED.

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại bộ chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit rồi nhấp vào Connect (Kết nối).
Bạn sẽ thấy một khuôn mặt cười xuất hiện trên ma trận LED của micro:bit.
Vẽ một mẫu khác trên ma trận LED bằng cách thay đổi các hộp đánh dấu.

6. Kết nối các nút micro:bit

Thêm sự kiện theo dõi trên các nút micro:bit

Trên micro:bit có 2 nút, một nút nằm ở hai bên của ma trận LED. Espruino cung cấp hàm setWatch gửi một sự kiện/lệnh gọi lại khi người dùng nhấn nút. Do muốn nghe cả hai nút, chúng ta sẽ thiết kế hàm chung và in thông tin chi tiết của sự kiện.

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);

Tiếp theo, chúng ta cần kết nối cả hai nút (có tên là BTN1 và BTN2 trên bảng micro:bit) mỗi khi cổng nối tiếp được kết nối với thiết bị.

script.js - clickConnect()

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

Thử nào

Ngoài việc hiển thị khuôn mặt vui vẻ khi kết nối, việc nhấn vào một trong hai nút trên micro:bit sẽ thêm văn bản vào trang cho biết nút nào đã được nhấn. Rất có thể, mỗi ký tự sẽ nằm trên một dòng riêng.

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại bộ chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit rồi nhấp vào Connect (Kết nối).
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit.
Nhấn các nút trên micro:bit và xác minh rằng nút này sẽ thêm văn bản mới vào trang cùng với thông tin chi tiết về nút được nhấn.

7. Sử dụng luồng biến đổi để phân tích cú pháp dữ liệu đến

Xử lý luồng cơ bản

Khi một trong các nút micro:bit được nhấn, micro:bit sẽ gửi dữ liệu đến cổng nối tiếp thông qua một luồng. Luồng rất hữu ích, nhưng cũng có thể là một thách thức vì bạn không nhất thiết phải nhận được tất cả dữ liệu cùng một lúc và có thể được chia nhỏ tuỳ ý.

Ứng dụng hiện in luồng đến khi đến (trong readLoop). Trong hầu hết các trường hợp, mỗi ký tự nằm trên một dòng riêng, nhưng điều này không hữu ích lắm. Lý tưởng nhất là luồng phải được phân tích cú pháp thành các dòng riêng lẻ và mỗi thông báo hiển thị dưới dạng một dòng riêng.

Biến đổi luồng bằng `TransformStream`

Để làm việc đó, chúng ta có thể sử dụng luồng biến đổi ( TransformStream). Luồng này cho phép phân tích cú pháp luồng đến và trả về dữ liệu đã phân tích cú pháp. Luồng chuyển đổi có thể nằm giữa nguồn luồng (trong trường hợp này là micro:bit) và bất kỳ nội dung nào đang sử dụng luồng (trong trường hợp này là readLoop) và có thể áp dụng một phép biến đổi tuỳ ý trước khi luồng đó được sử dụng. Hãy xem tiện ích này giống như một dây chuyền lắp ráp: Khi một tiện ích xuất hiện trên dòng, mỗi bước trong dòng sẽ sửa đổi tiện ích đó để khi tới đích cuối cùng, tiện ích đó sẽ hoạt động đầy đủ.

Để biết thêm thông tin, hãy xem bài viết Các khái niệm về API Luồng của MDN.

Biến đổi luồng bằng `LineBreakTransformer`

Hãy tạo một lớp LineBreakTransformer. Lớp này sẽ lấy một luồng dữ liệu và chia luồng đó thành các phần dựa trên dấu ngắt dòng (\r\n). Lớp này cần hai phương thức là transform và flush. Phương thức transform được gọi mỗi khi luồng nhận được dữ liệu mới. Phương thức này có thể thêm dữ liệu vào hàng đợi hoặc lưu dữ liệu để dùng sau. Phương thức flush được gọi khi luồng bị đóng và xử lý mọi dữ liệu chưa được xử lý.

Trong phương thức transform, chúng ta sẽ thêm dữ liệu mới vào container, sau đó kiểm tra xem có dấu ngắt dòng nào trong container hay không. Nếu có, hãy tách thông tin này thành một mảng, sau đó lặp lại các dòng, gọi controller.enqueue() để gửi các dòng đã phân tích cú pháp ra ngoài.

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));

Khi luồng bị đóng, chúng ta sẽ chỉ cần xoá mọi dữ liệu còn lại trong vùng chứa bằng enqueue.

script.js - LineBreakTransformer.flush()

// CODELAB: Flush the stream.
controller.enqueue(this.container);

Cuối cùng, chúng ta cần chuyển luồng đến thông qua LineBreakTransformer mới. Luồng đầu vào ban đầu của chúng ta chỉ được chuyển qua TextDecoderStream, vì vậy, chúng ta cần thêm một pipeThrough để chuyển luồng đó qua LineBreakTransformer mới.

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()));

Thử nào

Bây giờ, khi bạn nhấn vào một trong các nút micro:bit, dữ liệu được in sẽ được trả về trên một dòng.

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại bộ chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit rồi nhấp vào Connect (Kết nối).
Bạn sẽ thấy một khuôn mặt cười xuất hiện trên ma trận LED của micro:bit.
Nhấn vào các nút trên micro:bit và xác minh rằng bạn thấy nội dung tương tự như sau:

Biến đổi luồng bằng `JSONTransformer`

Chúng ta có thể thử phân tích cú pháp chuỗi thành JSON trong readLoop. Tuy nhiên, hãy tạo một trình biến đổi JSON rất đơn giản để chuyển đổi dữ liệu thành đối tượng JSON. Nếu dữ liệu không phải là JSON hợp lệ, bạn chỉ cần trả về dữ liệu đã nhận được.

script.js - JSONTransformer.transform

// CODELAB: Attempt to parse JSON content
try {
  controller.enqueue(JSON.parse(chunk));
} catch (e) {
  controller.enqueue(chunk);
}

Tiếp theo, hãy truyền luồng qua JSONTransformer sau khi đã truyền qua LineBreakTransformer. Điều này cho phép chúng ta đơn giản hoá JSONTransformer vì biết rằng JSON sẽ chỉ được gửi trên một dòng.

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()));

Thử nào

Bây giờ, khi nhấn một trong các nút micro:bit, bạn sẽ thấy [object Object] xuất hiện trên trang.

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại bộ chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit rồi nhấp vào Connect (Kết nối).
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit.
Nhấn các nút trên micro:bit và xác minh rằng bạn thấy giống như sau:

Phản hồi khi nhấn nút

Để phản hồi các lượt nhấn nút micro:bit, hãy cập nhật readLoop để kiểm tra xem dữ liệu đã nhận được có phải là object với thuộc tính button hay không. Sau đó, hãy gọi buttonPushed để xử lý thao tác nhấn nút.

script.js - readLoop()

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

Khi bạn nhấn nút micro:bit, màn hình trên ma trận LED sẽ thay đổi. Sử dụng mã sau để đặt ma trận:

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();
  }
}

Thử nào

Bây giờ, khi bạn nhấn một trong các nút micro:bit, ma trận LED sẽ thay đổi thành mặt cười hoặc mặt buồn.

Tải lại trang.
Nhấp vào nút Connect (Kết nối).
Trong hộp thoại bộ chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit rồi nhấp vào Connect (Kết nối).
Bạn sẽ thấy một biểu tượng mặt cười xuất hiện trên ma trận LED micro:bits.
Nhấn vào các nút trên micro:bit và xác minh rằng ma trận LED thay đổi.

8. Đóng cổng nối tiếp

Bước cuối cùng là kết nối chức năng ngắt kết nối để đóng cổng khi người dùng hoàn tất.

Đóng cổng khi người dùng nhấp vào nút Kết nối/Ngắt kết nối

Khi người dùng nhấp vào nút Connect (Kết nối)/Disconnect (Ngắt kết nối), chúng ta cần đóng kết nối. Nếu cổng đã mở, hãy gọi disconnect() và cập nhật giao diện người dùng để cho biết rằng trang không còn kết nối với thiết bị nối tiếp nữa.

script.js - clickConnect()

// CODELAB: Add disconnect code here.
if (port) {
  await disconnect();
  toggleUIConnected(false);
  return;
}

Đóng luồng và cổng

Trong hàm disconnect, chúng ta cần đóng luồng đầu vào, đóng luồng đầu ra và đóng cổng. Để đóng luồng đầu vào, hãy gọi reader.cancel(). Lệnh gọi đến cancel không đồng bộ, vì vậy chúng ta cần sử dụng await để chờ lệnh gọi này hoàn tất:

script.js - disconnect()

// CODELAB: Close the input stream (reader).
if (reader) {
  await reader.cancel();
  await inputDone.catch(() => {});
  reader = null;
  inputDone = null;
}

Để đóng luồng đầu ra, hãy lấy writer, gọi close() và đợi đối tượng outputDone đóng:

script.js - disconnect()

// CODELAB: Close the output stream.
if (outputStream) {
  await outputStream.getWriter().close();
  await outputDone;
  outputStream = null;
  outputDone = null;
}

Cuối cùng, hãy đóng cổng nối tiếp và chờ cổng này đóng lại:

script.js - disconnect()

// CODELAB: Close the port.
await port.close();
port = null;

Thử nào

Giờ đây, bạn có thể tuỳ ý mở và đóng cổng nối tiếp.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại bộ chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit rồi nhấp vào Kết nối.
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit
Nhấn nút Ngắt kết nối và xác minh rằng ma trận LED tắt và không có lỗi trong bảng điều khiển.

9. Xin chúc mừng

Xin chúc mừng! Bạn đã tạo thành công ứng dụng web đầu tiên sử dụng Web Serial API.

Hãy theo dõi https://goo.gle/fugu-api-tracker để biết thông tin mới nhất về Web Serial API và tất cả các tính năng web mới thú vị khác mà nhóm Chrome đang phát triển.

Bắt đầu sử dụng Web Serial API

1. Giới thiệu

Sản phẩm bạn sẽ tạo ra

Kiến thức bạn sẽ học được

Bạn cần có

2. Giới thiệu về Web Serial API

3. Thiết lập

Lấy mã

4. Mở kết nối nối tiếp

Kiểm tra xem API Web Serial có được hỗ trợ hay không

Thử nào

Mở cổng nối tiếp

Thử nào

Thiết lập luồng đầu vào để theo dõi dữ liệu từ cổng nối tiếp

Thử nào

Thiết lập luồng đầu ra để gửi dữ liệu đến cổng nối tiếp

Thử nào

5. Điều khiển ma trận đèn LED

Tạo chuỗi lưới ma trận

Chọn hộp đánh dấu để cập nhật ma trận

Thử nào

6. Kết nối các nút micro:bit

Thêm sự kiện theo dõi trên các nút micro:bit

Thử nào

7. Sử dụng luồng biến đổi để phân tích cú pháp dữ liệu đến

Xử lý luồng cơ bản

Biến đổi luồng bằng TransformStream

Biến đổi luồng bằng LineBreakTransformer

Thử nào

Biến đổi luồng bằng JSONTransformer

Thử nào

Phản hồi khi nhấn nút

Thử nào

8. Đóng cổng nối tiếp

Đóng cổng khi người dùng nhấp vào nút Kết nối/Ngắt kết nối

Đóng luồng và cổng

Thử nào

9. Xin chúc mừng

Biến đổi luồng bằng `TransformStream`

Biến đổi luồng bằng `LineBreakTransformer`

Biến đổi luồng bằng `JSONTransformer`