بدء استخدام 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

لقد اخترنا استخدام الإصدار 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. انقر على رابط رمز خلل في إنشاء الريمكس لإنشاء نسختك الخاصة من مشروع المبتدئين.
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 متوافقًا. إذا كان الأمر كذلك، سيخفي هذا الرمز الإعلان الذي يشير إلى أنّ واجهة برمجة التطبيقات 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();

التجربة

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

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:

ملاحظة: قد يكون هذا تالفًا على نظامَي التشغيل Chrome و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 كحلقة قراءة-eval-print لـ 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. افتح علامة التبويب وحدة التحكّم في "أدوات مطوري البرامج في Chrome"، واكتب writeToStream('console.log("yes")');.

من المفترض أن يظهر لك شيء كالتالي على الصفحة:

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

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

للتحكّم في مصفوفة LED على وحدات بت صغيرة، نحتاج إلى استدعاء show(). تعرض هذه الطريقة الرسومات على شاشة LED المدمجة مقاس 5×5. يأخذ هذا رقمًا ثنائيًا أو سلسلة.

سنكرّر مربّعات الاختيار وننشئ مصفوفة من 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();

التجربة الآن

والآن، عندما تفتح الصفحة اتصالاً بالميكرو:بت، سيُرسل إليها وجه سعيد. سيؤدي النقر على مربّعات الاختيار إلى تعديل الشاشة في مصفوفة LED.

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

6- ربط أزرار الميكرو:بت

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

9. تهانينا

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

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