ซีเรียลผ่านบลูทูธบนเว็บ

François Beaufort
François Beaufort

Web Bluetooth API และ Web Serial API ช่วยให้เว็บแอปสื่อสารกับอุปกรณ์บลูทูธพลังงานต่ำ (BLE) และอุปกรณ์ซีเรียลได้ แม้ว่านักพัฒนาเว็บจํานวนมากจะใช้ API เหล่านี้อย่างประสบความสําเร็จแล้ว แต่ความต้องการการสนับสนุนอุปกรณ์บลูทูธคลาสสิกก็เพิ่มขึ้นด้วย

ตอนนี้ Web Serial API รองรับการสื่อสารกับบริการ RFCOMM ในอุปกรณ์บลูทูธคลาสสิกที่จับคู่ไว้ รวมถึง Serial Port Profile (SPP) ใน Chrome 117 บนเดสก์ท็อป ซึ่งจะเปิดโอกาสใหม่ๆ ให้กับทั้งนักพัฒนาเว็บและผู้ใช้ อุปกรณ์ในชีวิตจริงที่อาจได้รับประโยชน์จากฟีเจอร์นี้มีดังนี้

  • Pixel Buds Pro และหูฟังเอียร์บัดไร้สายอื่นๆ ใช้ RFCOMM เพื่อจัดการการตั้งค่าเสียงและการอัปเดตเฟิร์มแวร์
  • ระบบจุดขายเคลื่อนที่ใช้ SPP ของบลูทูธเพื่อสื่อสารกับเครื่องพิมพ์ใบเสร็จ
  • เครื่องอ่านแท็ก RFID ของสัตว์เลี้ยงใช้ SPP ของบลูทูธเพื่อบันทึกการเคลื่อนไหวของสัตว์

โปรโตคอล RFCOMM ของบลูทูธ

ย้อนกลับไปในช่วงปลายยุค 90 คุณเพียงแค่วาง Palm Pilot ลงในแท่นชาร์จเพื่อซิงค์ปฏิทินสำหรับวันถัดไป คงจะดีไม่น้อยหากคุณสามารถดำเนินการแบบไร้สายแทนได้ เทคโนโลยี "บลูทูธ" ใหม่นี้จะช่วยให้คุณกำจัดสายไฟที่ยุ่งเหยิงได้ ไร้สายคืออนาคต ปัญหามีเพียงอย่างเดียวคืออุปกรณ์ทั้งหมดออกแบบมาเพื่อเชื่อมต่อกับสาย RS-232 ดังนั้น บลูทูธจึงใช้โปรโตคอลการสื่อสารความถี่วิทยุ (RFCOMM) เพื่อให้บริการอินเทอร์เฟซดังกล่าวแก่ซอฟต์แวร์และฮาร์ดแวร์ที่มีอยู่ทั้งหมด

ปัจจุบันบริการ RFCOMM ยังใช้กันอย่างแพร่หลายในฮาร์ดแวร์ใหม่และฮาร์ดแวร์ที่มีอยู่ ซึ่งช่วยให้เป็นไปตามข้อกำหนดเฉพาะด้านเวลาในการตอบสนองและแบนด์วิดท์ที่บลูทูธพลังงานต่ำยังไม่สามารถทำได้ ด้วยเหตุนี้ เราจึงพัฒนาการผสานรวมระหว่าง Web Serial ซึ่งเป็น API สำหรับเชื่อมต่อกับอุปกรณ์ซีเรียล และบลูทูธ เพื่อเปิดใช้การเข้าถึงบริการ RFCOMM แบบเดิมเหล่านี้ก่อนที่ผู้ผลิตจะเปลี่ยนไปใช้บลูทูธพลังงานต่ำ และนักพัฒนาแอปจะใช้ Web Bluetooth API แทนได้

การเปลี่ยนแปลง Web Serial API

ตั้งแต่ Chrome 117 บนเดสก์ท็อป นักพัฒนาเว็บสามารถสื่อสารกับอุปกรณ์บลูทูธคลาสสิกที่จับคู่ไว้ได้อย่างน่าเชื่อถือผ่านบริการ RFCOMM โดยใช้ Web Serial API ซึ่งการอัปเดต Web Serial API ต่อไปนี้ทำให้การดำเนินการนี้เป็นไปได้

  • ตอนนี้ Chrome จะแสดงรายการอุปกรณ์บลูทูธที่จับคู่ไว้ซึ่งแสดงอินเทอร์เฟซซีเรียลโดยใช้โปรไฟล์พอร์ตซีเรียลบลูทูธคลาสสิกที่เป็นมาตรฐาน
  • ตอนนี้ Chrome สามารถสื่อสารกับอินเทอร์เฟซซีเรียลได้แม้ว่าระบบปฏิบัติการจะยังไม่ได้สร้างโหนดอุปกรณ์ผ่านพอร์ตซีเรียลที่จำลองโดยเฉพาะ
  • ตอนนี้ Chrome สามารถสื่อสารกับบริการที่ไม่ใช่พอร์ตซีเรียลซึ่งแสดงอินเทอร์เฟซซีเรียล RFCOMM ได้แล้ว (ดูรหัสคลาสบริการที่ไม่ใช่มาตรฐาน)

ดูข้อมูลเกี่ยวกับวิธีใช้ Web Serial API ได้ในบทความอ่านจากและเขียนไปยังพอร์ตอนุกรม บทความนี้ถือว่าคุณมีความรู้พื้นฐานเกี่ยวกับบลูทูธและมุ่งเน้นที่การเปลี่ยนแปลงของซีเรียลผ่านบลูทูธ

หากไม่ระบุตัวกรองใดๆ การเรียกใช้ navigator.serial.requestPort() จะช่วยให้ผู้ใช้เลือกพอร์ตอนุกรมที่ไม่ใช่บลูทูธ พอร์ตอนุกรมบลูทูธที่แมปไว้แล้ว และพอร์ตอนุกรมที่ไม่ได้แมปซึ่งโปรไฟล์พอร์ตอนุกรมบลูทูธคลาสสิกมาตรฐานระบุไว้

// Prompt user to select any serial port.
const port = await navigator.serial.requestPort();

แม้ว่าอุปกรณ์ส่วนใหญ่จะแสดงการสื่อสารแบบ SPP ผ่านโปรไฟล์พอร์ตอนุกรมบลูทูธคลาสสิกที่เป็นมาตรฐาน แต่อุปกรณ์บางรุ่นก็ใช้บริการแบบ RFCOMM ที่กําหนดเอง อุปกรณ์เหล่านี้มีรหัสคลาสบริการที่ไม่ได้อยู่ในช่วง UUID มาตรฐานของบลูทูธ

คุณต้องส่งรายการ allowedBluetoothServiceClassIds ไปยัง navigator.serial.requestPort() เพื่อเข้าถึงบริการที่ทำงานด้วย RFCOMM ที่กําหนดเองเหล่านี้ ดังที่แสดงในตัวอย่างด้านล่าง

const myBluetoothServiceUuid = "01234567-89ab-cdef-0123-456789abcdef";

// Prompt user to select any serial port.
// Access to the custom Bluetooth RFCOMM service above will be allowed.
const port = await navigator.serial.requestPort({
  allowedBluetoothServiceClassIds: [myBluetoothServiceUuid],
});

โปรดทราบว่าระบบจะบล็อกรหัสคลาสบริการทั้งหมดที่ใช้ UUID Base ของ Bluetooth SIG (นั่นคือ UUID ทั้งหมดที่ลงท้ายด้วย "-0000-1000-8000-00805f9b34fb") ยกเว้นรหัสโปรไฟล์พอร์ตซีเรียล เนื่องจาก Chrome ไม่รองรับบริการบลูทูธคลาสสิก เช่น เสียงและวิดีโอ

นอกจากนี้ คุณยังใช้bluetoothServiceClassIdคีย์ตัวกรองเมื่อเรียกใช้ navigator.serial.requestPort() เพื่อแสดงรายการพอร์ตซีเรียลบลูทูธที่กรองแล้วซึ่งระบุด้วยรหัสคลาสบริการแก่ผู้ใช้ได้ด้วย ดูตัวอย่างด้านล่าง

const myBluetoothServiceUuid = "01234567-89ab-cdef-0123-456789abcdef";

// Prompt the user to select Bluetooth serial ports with
// the custom Bluetooth RFCOMM service above.
const port = await navigator.serial.requestPort({
  allowedBluetoothServiceClassIds: [myBluetoothServiceUuid],
  filters: [{ bluetoothServiceClassId: myBluetoothServiceUuid }],
});

หากพอร์ตซีเรียลเป็นส่วนหนึ่งของอุปกรณ์บลูทูธ คีย์ bluetoothServiceClassId ใหม่ที่มีรหัสคลาสบริการซึ่งเชื่อมโยงกับแชแนล RFCOMM ที่พอร์ตเชื่อมต่ออยู่จะอยู่ในข้อมูลพอร์ตซีเรียลที่แสดงผลจากการเรียกใช้ port.getInfo() หากมีการแมปพอร์ตซีเรียล ระบบจะแสดงผลเป็น "00001101-0000-1000-8000-00805f9b34fb" หรือ 0x1101 ในรูปแบบย่อ

const { bluetoothServiceClassId } = port.getInfo();

ตัวอย่าง Use Case: ควบคุม Pixel Buds Pro

แอป Pixel Buds Pro Web Companion เป็นแอปเว็บใหม่ที่ช่วยให้ผู้ใช้ควบคุม Pixel Buds Pro จากอุปกรณ์ใดก็ได้ที่มีเว็บเบราว์เซอร์ แอปนี้สร้างขึ้นโดยใช้เทคโนโลยี Progressive Web App เพื่อประสบการณ์การโหลดที่รวดเร็ว และสามารถติดตั้งควบคู่ไปกับแอประบบปฏิบัติการอื่นๆ ได้ด้วย

แอปใช้ Web Serial API เพื่อสื่อสารกับ Pixel Buds Pro ซึ่งจะช่วยให้ผู้ใช้ควบคุมการตั้งค่าต่างๆ ใน Pixel Buds Pro ได้ เช่น การควบคุมเสียงรบกวน อีควอไลเซอร์ การตรวจจับหูฟัง และการอัปเดตเฟิร์มแวร์

หากต้องการลองใช้แอปคู่หูเว็บของ Pixel Buds Pro ให้ไปที่ mypixelbuds.google.com ในอุปกรณ์ ChromeOS (แพลตฟอร์มอื่นๆ จะพร้อมให้บริการเร็วๆ นี้)

ภาพหน้าจอของแอปสำหรับใช้ร่วมกับเว็บของ Pixel Buds Pro
แอปคู่หูเว็บของ Pixel Buds Pro

แหล่งข้อมูล

บริการรับรองคำให้การ

ขอขอบคุณ Reilly Grant, Thomas Steiner, Ben Morss และ Vincent Scheib สำหรับรีวิว