بدء استخدام Web Serial API

1. مقدمة

تاريخ آخر تعديل: 19/09/2022

ما الذي ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستُنشئ صفحة ويب تستخدم Web Serial API للتفاعل مع لوحة BBC micro:bit لعرض الصور على مصفوفة LED مقاس 5x5. ستتعرّف على Web Serial API وكيفية استخدام أحداث البث القابلة للقراءة والكتابة والتحويل للتواصل مع الأجهزة التسلسلية من خلال المتصفّح.

ما ستتعرّف عليه

• كيفية فتح وإغلاق منفذ تسلسلي على الويب
• كيفية استخدام حلقة قراءة لمعالجة البيانات من مصدر إدخال
• كيفية إرسال البيانات عبر مسار كتابة

المتطلبات

• لوحة BBC micro:bit v1 تحتوي على الإصدار 2v04 من البرامج الثابتة من Espruino
• إصدار حديث من Chrome (الإصدار 80 أو إصدار أحدث)
• معرفة بلغات HTML وCSS وJavaScript وChrome DevTools

لقد اخترنا استخدام الإصدار 1 من Micro:bit لهذا الدرس التطبيقي حول الترميز لأنّه ميسورة التكلفة ويوفِّر بعض المدخلات (الأزرار) والمخرجات (شاشة LED 5×5) ويمكن أن يوفّر مدخلات ومخرجات إضافية. اطّلِع على صفحة BBC micro:bit على موقع Espruino الإلكتروني للحصول على تفاصيل حول إمكانات micro:bit.

2. لمحة عن Web Serial API

توفّر Web Serial API طريقة للمواقع الإلكترونية لقراءة البيانات من جهاز تسلسلي وكتابتها فيه باستخدام النصوص البرمجية. تربط واجهة برمجة التطبيقات الويب بالعالم المادي من خلال السماح للمواقع الإلكترونية بالتواصل مع الأجهزة التسلسلية، مثل وحدات التحكّم الصغيرة والطابعات الثلاثية الأبعاد.

هناك العديد من الأمثلة على برامج التحكّم التي يتم إنشاؤها باستخدام تكنولوجيا الويب. على سبيل المثال:

• Arduino Create
• الإصدار التجريبي من Configurator
• Espruino IDE
• MakeCode

وفي بعض الحالات، تتواصل هذه المواقع الإلكترونية مع الجهاز من خلال تطبيق وكيل أصلي يُثبّته المستخدم يدويًا. وفي حالات أخرى، يتم عرض التطبيق في حزمة تطبيق أصلي من خلال إطار عمل مثل Electron. في حالات أخرى، يُطلب من المستخدم إجراء خطوة إضافية، مثل نسخ تطبيق مجمّع إلى الجهاز باستخدام محرك أقراص USB محمول.

ويمكن تحسين تجربة المستخدم من خلال توفير اتصال مباشر بين الموقع والجهاز الذي يتحكم فيه.

3- بدء الإعداد

الحصول على الرمز

لقد وضعنا كل ما تحتاجه في هذا الدليل التعليمي حول رموز البرامج في مشروع Glitch.

1. افتح علامة تبويب متصفِّح جديدة وانتقِل إلى https://web-serial-codelab-start.glitch.me/.
2. انقر على رابط Remix Glitch لإنشاء نسختك الخاصة من المشروع الأوّلي.
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 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();

التجربة الآن

يحتوي مشروعنا الآن على الحد الأدنى من المتطلبات اللازمة للبدء. يطلب النقر على الزر اتصال من المستخدم اختيار الجهاز التسلسلي للاتصال به، ثم الاتصال بوحدة الماكرو:بت.

1. إعادة تحميل الصفحة
2. انقر على الزر ربط.
3. في مربّع الحوار "أداة اختيار المنفذ التسلسلي"، اختَر جهاز BBC micro:bit وانقر على ربط.
4. في علامة التبويب، من المفترض أن يظهر لك رمز يشير إلى اتصالك بجهاز تسلسلي:

نصيحة: إذا لم يظهر ميكرو:بت في أداة الاختيار، جرِّب إعادة ضبط الجهاز عن طريق الضغط على زر إعادة الضبط بجانب منفذ 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 صحيحة، هذا يعني أنّ المنفذ تم إغلاقه أو لم يتم استلام أي بيانات أخرى.

أضف الرمز التالي إلى مشروعك:

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 وانقر على Connect (ربط).
4. من المفترض أن يظهر لك شعار Espruino:

ملاحظة: قد يكون هذا الملفّ تالفًا على نظامَي التشغيل ChromeOS و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 micro:bit كحلقة read-eval-print (REPL) في JavaScript، تمامًا مثل ما تحصل عليه في shell.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 وانقر على Connect (ربط).
4. افتح علامة التبويب وحدة التحكّم في "أدوات مطوّري البرامج في Chrome"، واكتب writeToStream('console.log("yes")');.

من المفترض أن يظهر لك ما يلي مطبوعًا على الصفحة:

5- التحكّم في مصفوفة LED

إنشاء سلسلة شبكة المصفوفة

للتحكّم في مصفوفة 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('')})`);

زيادة مربّعات الاختيار لتعديل المصفوفة

بعد ذلك، نحتاج إلى الاستماع إلى التغييرات الموجودة في مربعات الاختيار، وإذا تغيرت، فسنرسل هذه المعلومات إلى 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.

1. إعادة تحميل الصفحة
2. انقر على الزر ربط.
3. في مربع حوار منتقي المنافذ التسلسلية، اختَر جهاز BBC Micro:bit وانقر على Connect (ربط).
4. من المفترض أن تظهر الابتسامة على مصفوفة LED في وحدات صغيرة:بت.
5. ارسم نمطًا مختلفًا على مصفوفة مصابيح LED من خلال تغيير مربّعات الاختيار.

6- توصيل أزرار micro:bit

إضافة حدث مشاهدة على أزرار Micro:bit

هناك زران على 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 وانقر على Connect (ربط).
4. من المفترض أن تظهر الابتسامة على مصفوفة LED في وحدات البكسل الدقيقة.
5. اضغط على الأزرار في micro:bit وتأكَّد من أنّه يتم إلحاق نص جديد بالصفحة يتضمّن تفاصيل الزر الذي تم الضغط عليه.

7- استخدام مصدر تحويل لتحليل البيانات الواردة

ملاحظة: إذا كنت لا تعرف الكثير عن أحداث البث، يمكنك الاطّلاع على مفاهيم Streams API في MDN. لا يتناول هذا الدرس التطبيقي حول الترميز سوى أساسيات أحداث البث ومعالجتها.

التعامل الأساسي مع البث

عند الضغط على أحد أزرار micro:bit، يرسل الجزء Micro:bit البيانات إلى المنفذ التسلسلي من خلال البث. ساحات المشاركات مفيدة جدًا، ولكنها قد تمثّل تحديًا لأنّك لن تحصل بالضرورة على جميع البيانات في وقت واحد، وقد يتم تقسيمها بشكل عشوائي.

يطبع التطبيق حاليًا البث الوافد عند وصوله (بتنسيق readLoop). في معظم الحالات، يظهر كل حرف في سطر خاص به، ولكن هذا ليس مفيدًا جدًا. من الناحية المثالية، يجب تحليل البث إلى أسطر فردية وعرض كل رسالة في سطر منفصل.

تحويل أحداث البث باستخدام 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 وانقر على Connect (ربط).
4. من المفترض أن يظهر لك ابتسامة على مصفوفة مصباح LED في micro:bit.
5. اضغط على الأزرار على وحدة الماكرو (ميكرو:بت) وتأكد من أنك ترى شيئًا كالتالي:

تحويل البث باستخدام 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. انقر على الزر ربط.
3. في مربع حوار منتقي المنافذ التسلسلية، اختَر جهاز BBC Micro:bit وانقر على Connect (ربط).
4. من المفترض أن يظهر لك ابتسامة على مصفوفة مصباح LED في micro:bit.
5. اضغط على الأزرار على الجزء المصغر، وتأكد من أنك ترى شيئًا كالتالي:

الاستجابة للضغطات على الأزرار

للاستجابة إلى الضغطات على زر 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 وانقر على Connect (ربط).
4. من المفترض أن تظهر لك الابتسامة على مصفوفة LED في وحدات البكسل الدقيقة.
5. اضغط على الأزرار على الجزء المصغر، وتحقق من تغير مصفوفة 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. انقر على الزر ربط.
3. في مربع حوار منتقي المنافذ التسلسلية، اختَر جهاز BBC Micro:bit وانقر على Connect (ربط).
4. من المفترض أن تظهر لك الابتسامة على مصفوفة LED بتنسيق Micro:bit
5. اضغط على زر قطع الاتصال وتأكَّد من إيقاف مصفوفة LED ومن عدم وجود أخطاء في وحدة التحكُّم.

9. تهانينا

تهانينا! لقد نجحت في إنشاء أول تطبيق ويب يستخدم Web Serial API.

يمكنك الاطّلاع على https://goo.gle/fugu-api-tracker لمعرفة آخر المعلومات عن Web Serial API وجميع ميزات الويب الجديدة والمشوّقة الأخرى التي يعمل عليها فريق Chrome.