مقدمة إلى WebBluetooth

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

لطالما كان الويب رائعًا في التحدث إلى الخوادم على الشبكة وإلى الخوادم على الإنترنت على وجه التحديد. الآن بعد أن تحرك الويب نحو التطبيقات ، نحتاج أيضًا إلى نفس الإمكانات التي تتمتع بها التطبيقات الأصلية.

كمية المواصفات والميزات الجديدة التي تم تطبيقها في السنوات القليلة الماضية في المتصفحات مذهلة. لدينا مواصفات للتعامل مع الأبعاد الثلاثية مثل WebGL و WebGPU القادم. يمكننا دفق الصوت وتوليده ومشاهدة مقاطع الفيديو واستخدام كاميرا الويب كجهاز إدخال. يمكننا أيضًا تشغيل التعليمات البرمجية بسرعات أصلية تقريبًا باستخدام WebAssembly. علاوة على ذلك ، على الرغم من كونه في البداية وسيطًا للشبكة فقط ، فقد انتقلت الويب نحو الدعم غير المتصل بالإنترنت مع عمال الخدمة.

هذا شيء رائع وكل شيء ، ولكن هناك منطقة واحدة كانت تقريبًا النطاق الحصري للتطبيقات المحلية: التواصل مع الأجهزة. هذه مشكلة كنا نحاول حلها لفترة طويلة ، وهو أمر ربما واجهه الجميع في وقت ما. يعد الويب ممتازًا للتحدث إلى الخوادم ، ولكن ليس للتحدث إلى الأجهزة . فكر ، على سبيل المثال ، في محاولة إعداد جهاز توجيه في شبكتك. من المحتمل أن تقوم بإدخال عنوان IP واستخدام واجهة ويب عبر اتصال HTTP عادي دون أي أمان على الإطلاق. هذه مجرد تجربة سيئة وأمن سيئ. علاوة على ذلك ، كيف تعرف ما هو عنوان IP الصحيح؟

HTTP أيضًا هي المشكلة الأولى التي نواجهها عندما نحاول إنشاء تطبيق ويب تقدمي يحاول التحدث إلى جهاز. PWAs هي HTTPS فقط ، والأجهزة المحلية دائمًا ما تكون HTTP فقط. أنت بحاجة إلى شهادة لـ HTTPS ، ومن أجل الحصول على شهادة ، فأنت بحاجة إلى خادم متاح للجمهور باسم مجال (أتحدث عن الأجهزة الموجودة على شبكتنا المحلية التي لا يمكن الوصول إليها).

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

WebBluetooth هي مواصفات جديدة تم تطبيقها في Chrome و Samsung Internet والتي تتيح لنا الاتصال مباشرة بأجهزة Bluetooth منخفضة الطاقة من المتصفح. توفر تطبيقات الويب التقدمية جنبًا إلى جنب مع WebBluetooth الأمان والراحة لتطبيق الويب مع القدرة على التحدث مباشرة إلى الأجهزة.

البلوتوث له سمعة سيئة بسبب النطاق المحدود وجودة الصوت السيئة ومشاكل الاقتران. لكن كل هذه المشاكل إلى حد كبير أصبحت شيئًا من الماضي. Bluetooth Low Energy هي مواصفات حديثة لا علاقة لها بمواصفات Bluetooth القديمة ، بصرف النظر عن استخدام نفس طيف التردد. يتم شحن أكثر من 10 ملايين جهاز بدعم Bluetooth كل يوم. يتضمن ذلك أجهزة الكمبيوتر والهواتف ، ولكن أيضًا مجموعة متنوعة من الأجهزة مثل أجهزة مراقبة معدل ضربات القلب والجلوكوز وأجهزة إنترنت الأشياء مثل المصابيح الكهربائية والألعاب مثل السيارات والطائرات بدون طيار التي يمكن التحكم فيها عن بُعد.

يوصى بالقراءة : فهم الأنظمة الأساسية المستندة إلى API: دليل لمديري المنتجات

الجزء النظري الممل

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

كل جهاز Bluetooth إما "جهاز مركزي" أو "طرفي". يمكن للأجهزة المركزية فقط بدء الاتصال ويمكنها فقط التحدث إلى الأجهزة الطرفية. مثال على الجهاز المركزي سيكون الكمبيوتر أو الهاتف المحمول.

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

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

عندما نتحدث عن WebBluetooth ، فإننا نتحدث عن جزء معين من مواصفات Bluetooth يسمى Generic Attribute Profile ، والذي يحتوي على اختصار واضح جدًا GATT. (على ما يبدو ، تم استخدام GAP بالفعل.)

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

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

على عكس خصائص الكائنات ، لا يتم تحديد الخدمات والخصائص بواسطة سلسلة. لكل خدمة وميزة UUID فريد يمكن أن يصل طوله إلى 16 أو 128 بت. رسميًا ، UUID 16 بت محجوز للمعايير الرسمية ، لكن لا أحد يتبع هذه القاعدة إلى حد كبير. أخيرًا ، كل قيمة عبارة عن مصفوفة من البايت. لا توجد أنواع بيانات خيالية في البلوتوث.

نظرة فاحصة على مصباح بلوتوث

لذلك دعونا نلقي نظرة على جهاز Bluetooth حقيقي: Mipow Playbulb Sphere. يمكنك استخدام تطبيق مثل BLE Scanner أو nRF Connect للاتصال بالجهاز ومشاهدة جميع الخدمات والخصائص. في هذه الحالة ، أستخدم تطبيق BLE Scanner لنظام iOS.

أول شيء تراه عند الاتصال بالمصباح الكهربائي هو قائمة الخدمات. هناك بعض المعايير القياسية مثل خدمة معلومات الجهاز وخدمة البطارية. ولكن هناك أيضًا بعض الخدمات المخصصة. أنا مهتم بشكل خاص بالخدمة باستخدام UUID 16 بت لـ 0xff0f . إذا فتحت هذه الخدمة ، يمكنك مشاهدة قائمة طويلة من الخصائص. ليس لدي أي فكرة عما تفعله معظم هذه الخصائص ، حيث يتم تحديدها فقط بواسطة UUID ولأنها للأسف جزء من خدمة مخصصة ؛ لم يتم توحيدها ، ولم تقدم الشركة المصنعة أي وثائق.

يبدو أن الخاصية الأولى مع UUID الخاص بـ 0xfffc مثيرة للاهتمام بشكل خاص. لها قيمة أربعة بايت. إذا قمنا بتغيير قيمة هذه البايتات من 0x00000000 إلى 0x00ff0000 ، يتحول المصباح إلى اللون الأحمر. يؤدي تغييره إلى 0x0000ff00 إلى تحويل المصباح الكهربائي إلى اللون الأخضر ، و 0x000000ff باللون الأزرق. هذه ألوان RGB وتتوافق تمامًا مع الألوان السداسية التي نستخدمها في HTML و CSS.

ماذا يفعل ذلك البايت الأول؟ حسنًا ، إذا غيرنا القيمة إلى 0xff000000 ، يتحول المصباح إلى اللون الأبيض. يحتوي المصباح على أربعة مصابيح LED مختلفة ، ومن خلال تغيير قيمة كل بايت من الأربعة بايت ، يمكننا إنشاء كل لون نريده.

واجهة برمجة تطبيقات WebBluetooth

إنه لأمر رائع أنه يمكننا استخدام تطبيق محلي لتغيير لون المصباح الكهربائي ، ولكن كيف نفعل ذلك من المتصفح؟ اتضح أنه مع المعرفة حول Bluetooth و GATT التي تعلمناها للتو ، فإن هذا بسيط نسبيًا بفضل WebBluetooth API. لا يتطلب الأمر سوى سطرين من JavaScript لتغيير لون المصباح الكهربائي.

دعنا ننتقل إلى WebBluetooth API.

الاتصال بجهاز

أول شيء يتعين علينا القيام به هو الاتصال من المتصفح إلى الجهاز. نسمي الدالة navigator.bluetooth.requestDevice() الوظيفة بكائن تكوين. يحتوي هذا الكائن على معلومات حول الجهاز الذي نريد استخدامه والخدمات التي يجب أن تكون متاحة لواجهة برمجة التطبيقات الخاصة بنا.

في المثال التالي ، نقوم بتصفية اسم الجهاز ، لأننا نريد فقط رؤية الأجهزة التي تحتوي على البادئة PLAYBULB في الاسم. نحن نحدد أيضًا 0xff0f كخدمة نريد استخدامها. نظرًا لأن requestDevice() ترجع وعدًا ، يمكننا انتظار النتيجة.

 let device = await navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] });

عندما نسمي هذه الوظيفة ، تنبثق نافذة بها قائمة بالأجهزة التي تتوافق مع المرشحات التي حددناها. الآن علينا تحديد الجهاز الذي نريد الاتصال به يدويًا. هذه خطوة أساسية للأمان والخصوصية وتمنح المستخدم التحكم. يقرر المستخدم ما إذا كان يُسمح لتطبيق الويب بالاتصال ، وبالطبع بالجهاز الذي يُسمح له بالاتصال به. لا يمكن لتطبيق الويب الحصول على قائمة بالأجهزة أو الاتصال بدون تحديد المستخدم يدويًا للجهاز.

بعد الوصول إلى الجهاز ، يمكننا الاتصال بخادم GATT عن طريق استدعاء وظيفة connect() على خاصية gatt للجهاز وانتظار النتيجة.

 let server = await device.gatt.connect();

بمجرد أن نحصل على الخادم ، يمكننا استدعاء getPrimaryService() على الخادم باستخدام UUID للخدمة التي نريد استخدامها كمعامل وننتظر النتيجة.

 let service = await server.getPrimaryService(0xff0f);

ثم قم باستدعاء getCharacteristic() على الخدمة باستخدام UUID الخاص بالخاصية كمعامل وانتظر النتيجة مرة أخرى.

لدينا الآن خصائصنا التي يمكننا استخدامها لكتابة البيانات وقراءتها:

 let characteristic = await service.getCharacteristic(0xfffc);

كتابة البيانات

لكتابة البيانات ، يمكننا استدعاء الوظيفة writeValue() على الخاصية مع القيمة التي نريد كتابتها كـ ArrayBuffer ، وهي طريقة تخزين للبيانات الثنائية. السبب في أننا لا نستطيع استخدام مصفوفة عادية هو أن المصفوفات العادية يمكن أن تحتوي على بيانات من أنواع مختلفة ويمكن أن تحتوي حتى على ثقوب فارغة.

نظرًا لأنه لا يمكننا إنشاء أو تعديل ArrayBuffer مباشرة ، فإننا نستخدم "مصفوفة مكتوبة" بدلاً من ذلك. كل عنصر من عناصر المصفوفة المكتوبة يكون دائمًا من نفس النوع ، ولا يحتوي على أي ثقوب. في حالتنا ، سنستخدم Uint8Array ، وهو غير موقع لذلك لا يمكن أن يحتوي على أي أرقام سالبة ؛ عدد صحيح ، لذلك لا يمكن أن يحتوي على كسور ؛ وهي 8 بتات ويمكن أن تحتوي فقط على قيم من 0 إلى 255. وبعبارة أخرى: مصفوفة من البايتات.

 characteristic.writeValue( new Uint8Array([ 0, r, g, b ]) );

نحن نعلم بالفعل كيف يعمل هذا المصباح الكهربائي. علينا توفير أربعة بايت ، واحد لكل LED. كل بايت له قيمة بين 0 و 255 ، وفي هذه الحالة ، نريد فقط استخدام المصابيح الحمراء والخضراء والزرقاء ، لذلك نترك مؤشر LED الأبيض مطفأ ، باستخدام القيمة 0.

قراءة البيانات

لقراءة اللون الحالي للمصباح الكهربائي ، يمكننا استخدام وظيفة readValue() وانتظار النتيجة.

 let value = await characteristic.readValue(); let r = value.getUint8(1); let g = value.getUint8(2); let b = value.getUint8(3);

القيمة التي نحصل عليها هي DataView لـ ArrayBuffer ، وهي توفر طريقة لإخراج البيانات من ArrayBuffer. في حالتنا ، يمكننا استخدام getUint8() مع فهرس كمعامل لسحب البايتات الفردية من المصفوفة.

الحصول على إشعار بالتغييرات

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

 characteristic.addEventListener( 'characteristicvaluechanged', e => { let r = e.target.value.getUint8(1); let g = e.target.value.getUint8(2); let b = e.target.value.getUint8(3); } ); characteristic.startNotifications();

للحصول على رد نداء كلما تغيرت قيمة ما ، علينا استدعاء وظيفة addEventListener() على الخاصية ذات الخاصية characteristicvaluechanged التي تم تغييرها ووظيفة رد الاتصال. عندما تتغير القيمة ، سيتم استدعاء وظيفة رد الاتصال بكائن حدث كمعامل ، ويمكننا الحصول على البيانات من خاصية القيمة لهدف الحدث. وأخيرًا استخرج البايتات الفردية مرة أخرى من DataView في ArrayBuffer.

نظرًا لأن النطاق الترددي على شبكة Bluetooth محدود ، يتعين علينا بدء آلية الإشعار هذه يدويًا عن طريق استدعاء startNotifications() على الخاصية. خلاف ذلك ، سوف تغمر الشبكة ببيانات غير ضرورية. علاوة على ذلك ، نظرًا لأن هذه الأجهزة تستخدم عادةً بطارية ، فإن كل بايت واحد لا يتعين علينا إرساله سيؤدي بشكل نهائي إلى تحسين عمر بطارية الجهاز لأن الراديو الداخلي لا يحتاج إلى التشغيل كثيرًا.

خاتمة

لقد تجاوزنا الآن 90٪ من واجهة برمجة تطبيقات WebBluetooth. من خلال عدد قليل من المكالمات الوظيفية وإرسال 4 بايت ، يمكنك إنشاء تطبيق ويب يتحكم في ألوان مصابيح الإضاءة الخاصة بك. إذا أضفت عددًا قليلاً من الخطوط ، يمكنك حتى التحكم في لعبة سيارة أو قيادة طائرة بدون طيار. مع وجود المزيد والمزيد من أجهزة Bluetooth التي تشق طريقها إلى السوق ، فإن الاحتمالات لا حصر لها.

مزيد من الموارد

• Bluetooth.rocks! العروض التوضيحية | (كود المصدر على جيثب)
• "مواصفات Web Bluetooth" ، Web Bluetooth Community Group
• فتح سجل GATT مجموعة غير رسمية من الوثائق لخدمات السمات العامة لأجهزة Bluetooth منخفضة الطاقة.