Web Bluetooth API อนุญาตให้เว็บไซต์สื่อสารกับอุปกรณ์บลูทูธได้
จะเป็นอย่างไร หากฉันบอกคุณว่าเว็บไซต์สามารถสื่อสารกับอุปกรณ์บลูทูธใกล้เคียงด้วยวิธีที่ปลอดภัยและรักษาความเป็นส่วนตัวได้ วิธีนี้จะทำให้เครื่องวัดอัตราการเต้นของหัวใจ ร้องเพลง หลอดไฟ และแม้แต่เต่าก็สามารถโต้ตอบกับเว็บไซต์ได้โดยตรง
จนถึงปัจจุบันนี้ ความสามารถในการโต้ตอบกับอุปกรณ์บลูทูธทำได้ เฉพาะสำหรับแอปเฉพาะแพลตฟอร์มเท่านั้น Web Bluetooth API มีเป้าหมายเพื่อเปลี่ยนแปลงสิ่งนี้และนำมาใช้กับเว็บเบราว์เซอร์ด้วย
ก่อนจะเริ่ม
เอกสารนี้จะถือว่าคุณมีความรู้พื้นฐานเกี่ยวกับวิธีการทำงานของบลูทูธพลังงานต่ำ (BLE) และโปรไฟล์แอตทริบิวต์ทั่วไป
แม้ว่าข้อกำหนดของ Web Bluetooth API จะยังไม่เสร็จสมบูรณ์ แต่ผู้เขียนข้อกำหนดก็กำลังมองหานักพัฒนาซอฟต์แวร์ที่มีความกระตือรือร้นที่จะลองใช้ API นี้ รวมถึงให้ความคิดเห็นเกี่ยวกับข้อกำหนดและความคิดเห็นเกี่ยวกับการใช้งาน
Web Bluetooth API บางส่วนพร้อมใช้งานใน ChromeOS, Chrome สำหรับ Android 6.0, Mac (Chrome 56) และ Windows 10 (Chrome 70) ซึ่งหมายความว่าคุณควรสามารถขอและเชื่อมต่ออุปกรณ์บลูทูธพลังงานต่ำที่อยู่ใกล้เคียง อ่าน/เขียนลักษณะของบลูทูธ รับการแจ้งเตือน GATT ทราบเมื่ออุปกรณ์บลูทูธถูกตัดการเชื่อมต่อ หรือแม้แต่อ่านและเขียนไปยัง ข้อบ่งชี้บลูทูธ โปรดดูข้อมูลเพิ่มเติมในตารางความเข้ากันได้ของเบราว์เซอร์ของ MDN
สำหรับ Linux และ Windows เวอร์ชันก่อนหน้า ให้เปิดใช้แฟล็ก #experimental-web-platform-features
ใน about://flags
พร้อมให้ทดลองใช้จากต้นทาง
ก่อนหน้านี้ Chrome ได้เพิ่มฟีเจอร์นี้ใน Chrome 53 เป็นช่วงทดลองใช้จากต้นทางสำหรับ ChromeOS, Android และ Mac เพื่อรับความคิดเห็นจากนักพัฒนาแอปที่ใช้ Web Bluetooth API ในช่องให้ได้มากที่สุด
การทดลองใช้สิ้นสุดลงแล้วในเดือนมกราคม 2017
ข้อกำหนดด้านความปลอดภัย
หากต้องการทำความเข้าใจข้อดีและข้อเสียของความปลอดภัย เราขอแนะนำให้โพสต์ Web Bluetooth Security Model จาก Jeffrey Yasskin วิศวกรซอฟต์แวร์ในทีม Chrome เกี่ยวกับข้อกำหนด Web Bluetooth API
HTTPS เท่านั้น
เนื่องจาก API รุ่นทดลองนี้เป็นฟีเจอร์ใหม่ที่มีประสิทธิภาพที่เพิ่มลงในเว็บ จึงสามารถใช้ได้เฉพาะกับบริบทที่ปลอดภัยเท่านั้น ซึ่งหมายความว่าคุณจะต้องสร้างโดยใช้ TLS
ต้องใช้ท่าทางสัมผัสของผู้ใช้
การค้นหาอุปกรณ์บลูทูธด้วย navigator.bluetooth.requestDevice
ต้องเรียกใช้โดยท่าทางสัมผัสของผู้ใช้ เช่น การแตะหรือคลิกเมาส์ เนื่องจากเป็นฟีเจอร์ความปลอดภัย เรากำลังพูดถึงการฟังเหตุการณ์
pointerup
, click
และ touchend
button.addEventListener('pointerup', function(event) {
// Call navigator.bluetooth.requestDevice
});
ทำความรู้จักโค้ด
Web Bluetooth API ใช้ Promises ของ JavaScript เป็นหลัก หากคุณยังไม่คุ้นเคยกับฟีเจอร์นี้ โปรดดูบทแนะนำเกี่ยวกับ Promises ที่ยอดเยี่ยมนี้ อีกสิ่งหนึ่งคือ () => {}
คือฟังก์ชันลูกศรของ ECMAScript 2015
ขออุปกรณ์บลูทูธ
ข้อกำหนดของ Web Bluetooth API เวอร์ชันนี้อนุญาตให้เว็บไซต์ที่ทำงานในบทบาท "ศูนย์กลาง" เชื่อมต่อกับเซิร์ฟเวอร์ GATT ระยะไกลผ่านการเชื่อมต่อ BLE ได้ โดยรองรับการสื่อสารระหว่างอุปกรณ์ที่ใช้บลูทูธ 4.0 ขึ้นไป
เมื่อเว็บไซต์ขอสิทธิ์เข้าถึงอุปกรณ์ที่อยู่ใกล้เคียงโดยใช้ navigator.bluetooth.requestDevice
เบราว์เซอร์จะแสดงข้อความแจ้งผู้ใช้ที่มีตัวเลือกอุปกรณ์ซึ่งผู้ใช้สามารถเลือกอุปกรณ์ได้ 1 เครื่องหรือยกเลิกคำขอ
ฟังก์ชัน navigator.bluetooth.requestDevice()
จะใช้ออบเจ็กต์ที่จำเป็นซึ่งกำหนดตัวกรอง ตัวกรองเหล่านี้ใช้เพื่อแสดงเฉพาะอุปกรณ์ที่ตรงกับบริการ GATT บลูทูธที่มีการโฆษณาบางรายการ และ/หรือชื่ออุปกรณ์
ตัวกรองบริการ
ตัวอย่างเช่น หากต้องการขอให้อุปกรณ์บลูทูธที่โฆษณาบริการแบตเตอรี่ GATT สำหรับบลูทูธ ให้ทำดังนี้
navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
.then(device => { /* … */ })
.catch(error => { console.error(error); });
หากบริการ Bluetooth GATT ไม่ได้อยู่ในรายการบริการ GATT สำหรับบลูทูธแบบมาตรฐาน คุณจะให้ UUID บลูทูธเต็มรูปแบบหรือแบบฟอร์มสั้นๆ แบบ 16 หรือ 32 บิตก็ได้
navigator.bluetooth.requestDevice({
filters: [{
services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb']
}]
})
.then(device => { /* … */ })
.catch(error => { console.error(error); });
ตัวกรองชื่อ
นอกจากนี้ คุณยังขออุปกรณ์บลูทูธตามชื่ออุปกรณ์ที่กำลังโฆษณาด้วยคีย์ตัวกรอง name
หรือแม้แต่คำนำหน้าของชื่อนี้ด้วยคีย์ตัวกรอง namePrefix
ได้ โปรดทราบว่าในกรณีนี้ คุณจะต้องกำหนดคีย์ optionalServices
ด้วยเพื่อให้เข้าถึงบริการที่ไม่ได้อยู่ในตัวกรองบริการได้ มิเช่นนั้น คุณจะได้รับข้อผิดพลาดในภายหลังเมื่อพยายามเข้าถึงไฟล์เหล่านั้น
navigator.bluetooth.requestDevice({
filters: [{
name: 'Francois robot'
}],
optionalServices: ['battery_service'] // Required to access service later.
})
.then(device => { /* … */ })
.catch(error => { console.error(error); });
ตัวกรองข้อมูลผู้ผลิต
นอกจากนี้ยังสามารถขออุปกรณ์บลูทูธตามข้อมูลของผู้ผลิตแต่ละรายที่โฆษณาด้วยคีย์ตัวกรอง manufacturerData
ได้อีกด้วย คีย์นี้เป็นอาร์เรย์ของออบเจ็กต์ที่มีคีย์ตัวระบุบริษัทบลูทูธที่จำเป็นชื่อ companyIdentifier
นอกจากนี้ คุณยังระบุคำนำหน้าข้อมูลที่กรองข้อมูลของผู้ผลิตจากอุปกรณ์บลูทูธที่เริ่มต้นด้วยอุปกรณ์บลูทูธได้ด้วย โปรดทราบว่าคุณจะต้องกำหนดคีย์ optionalServices
ด้วยเพื่อให้เข้าถึงบริการทั้งหมดที่ไม่รวมอยู่ในตัวกรองบริการได้ หากคุณไม่ทำเช่นนั้น คุณจะได้รับข้อผิดพลาด
ในภายหลังเมื่อพยายามที่จะเข้าถึงไซต์เหล่านั้น
// Filter Bluetooth devices from Google company with manufacturer data bytes
// that start with [0x01, 0x02].
navigator.bluetooth.requestDevice({
filters: [{
manufacturerData: [{
companyIdentifier: 0x00e0,
dataPrefix: new Uint8Array([0x01, 0x02])
}]
}],
optionalServices: ['battery_service'] // Required to access service later.
})
.then(device => { /* … */ })
.catch(error => { console.error(error); });
นอกจากนี้ มาสก์ยังใช้กับคำนำหน้าข้อมูลเพื่อจับคู่รูปแบบบางอย่างในข้อมูลของผู้ผลิตได้ด้วย ดูคำอธิบายตัวกรองข้อมูลบลูทูธเพื่อดูข้อมูลเพิ่มเติม
ตัวกรองการยกเว้น
ตัวเลือก exclusionFilters
ใน navigator.bluetooth.requestDevice()
ช่วยให้คุณยกเว้นอุปกรณ์บางเครื่องจากเครื่องมือเลือกเบราว์เซอร์ได้ ซึ่งสามารถใช้เพื่อยกเว้นอุปกรณ์ที่ตรงกับตัวกรองที่กว้างขึ้น แต่ระบบไม่รองรับ
// Request access to a bluetooth device whose name starts with "Created by".
// The device named "Created by Francois" has been reported as unsupported.
navigator.bluetooth.requestDevice({
filters: [{
namePrefix: "Created by"
}],
exclusionFilters: [{
name: "Created by Francois"
}],
optionalServices: ['battery_service'] // Required to access service later.
})
.then(device => { /* … */ })
.catch(error => { console.error(error); });
ไม่ใช้ฟิลเตอร์
สุดท้าย คุณสามารถใช้แป้น acceptAllDevices
เพื่อแสดงอุปกรณ์บลูทูธใกล้เคียงทั้งหมดแทน filters
ได้ คุณจะต้องกำหนดคีย์ optionalServices
เพื่อให้เข้าถึงบริการบางอย่างได้ หากคุณไม่ทำเช่นนั้น คุณจะได้รับข้อผิดพลาด
ในภายหลังเมื่อคุณพยายามเข้าถึงไซต์เหล่านั้น
navigator.bluetooth.requestDevice({
acceptAllDevices: true,
optionalServices: ['battery_service'] // Required to access service later.
})
.then(device => { /* … */ })
.catch(error => { console.error(error); });
เชื่อมต่อกับอุปกรณ์บลูทูธ
แล้วคุณจะทำอย่างไรเมื่อมี BluetoothDevice
มาเชื่อมต่อกับเซิร์ฟเวอร์ GATT ระยะไกลของบลูทูธซึ่งมีการกำหนดบริการและการกำหนดลักษณะ
navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
.then(device => {
// Human-readable name of the device.
console.log(device.name);
// Attempts to connect to remote GATT Server.
return device.gatt.connect();
})
.then(server => { /* … */ })
.catch(error => { console.error(error); });
อ่านลักษณะของบลูทูธ
ในส่วนนี้ เราจะเชื่อมต่อกับเซิร์ฟเวอร์ GATT ของอุปกรณ์บลูทูธระยะไกล ตอนนี้เราอยาก รับบริการ GATT หลัก และอ่านลักษณะเฉพาะของบริการนี้ เรามาลองอ่านระดับการชาร์จปัจจุบันของแบตเตอรี่อุปกรณ์กัน
ในตัวอย่างข้างหน้า battery_level
คือลักษณะเฉพาะของระดับแบตเตอรี่ที่ได้มาตรฐาน
navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
.then(device => device.gatt.connect())
.then(server => {
// Getting Battery Service…
return server.getPrimaryService('battery_service');
})
.then(service => {
// Getting Battery Level Characteristic…
return service.getCharacteristic('battery_level');
})
.then(characteristic => {
// Reading Battery Level…
return characteristic.readValue();
})
.then(value => {
console.log(`Battery percentage is ${value.getUint8(0)}`);
})
.catch(error => { console.error(error); });
หากใช้ลักษณะ GATT ของบลูทูธที่กำหนดเอง คุณอาจส่ง UUID บลูทูธที่สมบูรณ์หรือแบบฟอร์มสั้นๆ 16 หรือ 32 บิตไปยัง service.getCharacteristic
โปรดทราบว่าคุณสามารถเพิ่ม Listener เหตุการณ์ characteristicvaluechanged
ลงในลักษณะเฉพาะเพื่อจัดการอ่านค่าของ Listener เหตุการณ์ด้วย ดูตัวอย่างที่มีการเปลี่ยนแปลงค่าลักษณะในการอ่านเพื่อดูวิธีจัดการกับการแจ้งเตือน GATT ที่กำลังจะมาถึงด้วย
…
.then(characteristic => {
// Set up event listener for when characteristic value changes.
characteristic.addEventListener('characteristicvaluechanged',
handleBatteryLevelChanged);
// Reading Battery Level…
return characteristic.readValue();
})
.catch(error => { console.error(error); });
function handleBatteryLevelChanged(event) {
const batteryLevel = event.target.value.getUint8(0);
console.log('Battery percentage is ' + batteryLevel);
}
เขียนอธิบายลักษณะของบลูทูธ
การเขียนด้วยคุณลักษณะ GATT ของบลูทูธนั้นง่ายพอๆ กับการอ่าน คราวนี้เราจะใช้จุดควบคุมอัตราการเต้นของหัวใจเพื่อรีเซ็ตค่าของฟิลด์ Energy Expended เป็น 0 ในอุปกรณ์วัดอัตราการเต้นของหัวใจ
ขอสัญญาว่าไม่มีเวทมนตร์ใดๆ ที่นี่ เหตุผลทั้งหมดมีอธิบายอยู่ในหน้าลักษณะของจุดควบคุมอัตราการเต้นของหัวใจ
navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_control_point'))
.then(characteristic => {
// Writing 1 is the signal to reset energy expended.
const resetEnergyExpended = Uint8Array.of(1);
return characteristic.writeValue(resetEnergyExpended);
})
.then(_ => {
console.log('Energy expended has been reset.');
})
.catch(error => { console.error(error); });
รับการแจ้งเตือน GATT
ตอนนี้ มาดูวิธีรับการแจ้งเตือนเมื่อ ลักษณะการวัดอัตราการเต้นของหัวใจในอุปกรณ์มีการเปลี่ยนแปลง
navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => characteristic.startNotifications())
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged',
handleCharacteristicValueChanged);
console.log('Notifications have been started.');
})
.catch(error => { console.error(error); });
function handleCharacteristicValueChanged(event) {
const value = event.target.value;
console.log('Received ' + value);
// TODO: Parse Heart Rate Measurement value.
// See https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.js
}
ตัวอย่างการแจ้งเตือนแสดงวิธีหยุดการแจ้งเตือนด้วย stopNotifications()
และนำ Listener เหตุการณ์ characteristicvaluechanged
ที่เพิ่มเข้ามาออกอย่างถูกต้อง
ยกเลิกการเชื่อมต่อกับอุปกรณ์บลูทูธ
เพื่อมอบประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้น คุณอาจต้องติดตามเหตุการณ์การขาดการเชื่อมต่อและเชิญผู้ใช้ให้เชื่อมต่อใหม่ โดยทำดังนี้
navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] })
.then(device => {
// Set up event listener for when device gets disconnected.
device.addEventListener('gattserverdisconnected', onDisconnected);
// Attempts to connect to remote GATT Server.
return device.gatt.connect();
})
.then(server => { /* … */ })
.catch(error => { console.error(error); });
function onDisconnected(event) {
const device = event.target;
console.log(`Device ${device.name} is disconnected.`);
}
คุณยังสามารถโทรหา device.gatt.disconnect()
เพื่อยกเลิกการเชื่อมต่อเว็บแอปจากอุปกรณ์บลูทูธได้ด้วย ซึ่งจะทริกเกอร์ตัวฟังเหตุการณ์ gattserverdisconnected
ที่มีอยู่ โปรดทราบว่านี่จะไม่หยุดการสื่อสารของอุปกรณ์บลูทูธหากแอปอื่นกำลังสื่อสารกับอุปกรณ์บลูทูธอยู่แล้ว โปรดดูตัวอย่างการเชื่อมต่ออุปกรณ์และตัวอย่างการเชื่อมต่ออีกครั้งอัตโนมัติเพื่อเจาะลึกมากขึ้น
อ่านและเขียนไปยังข้อบ่งชี้บลูทูธ
ข้อบ่งชี้ GATT ของบลูทูธคือแอตทริบิวต์ที่อธิบายค่าลักษณะเฉพาะ คุณอ่านและเขียนอีเมลในรูปแบบที่คล้ายกับลักษณะ GATT ของบลูทูธได้
มาดูวิธีอ่านคำอธิบายผู้ใช้เกี่ยวกับระยะเวลาการวัดของเทอร์โมมิเตอร์ด้านสุขภาพของอุปกรณ์กัน
ในตัวอย่างด้านล่าง health_thermometer
คือบริการเทอร์โมมิเตอร์เพื่อสุขภาพ
measurement_interval
, ลักษณะเฉพาะของช่วงการวัด และ
gatt.characteristic_user_description
คำอธิบายคำอธิบายผู้ใช้เกี่ยวกับลักษณะเฉพาะ
navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('health_thermometer'))
.then(service => service.getCharacteristic('measurement_interval'))
.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
.then(descriptor => descriptor.readValue())
.then(value => {
const decoder = new TextDecoder('utf-8');
console.log(`User Description: ${decoder.decode(value)}`);
})
.catch(error => { console.error(error); });
เราได้อ่านคำอธิบายของผู้ใช้เกี่ยวกับช่วงการวัดของเทอร์โมมิเตอร์สุขภาพของอุปกรณ์แล้ว มาดูวิธีอัปเดตและเขียนค่าที่กำหนดเองกัน
navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('health_thermometer'))
.then(service => service.getCharacteristic('measurement_interval'))
.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
.then(descriptor => {
const encoder = new TextEncoder('utf-8');
const userDescription = encoder.encode('Defines the time between measurements.');
return descriptor.writeValue(userDescription);
})
.catch(error => { console.error(error); });
ตัวอย่าง การสาธิต และ Codelab
ตัวอย่างบลูทูธของเว็บด้านล่างทั้งหมดได้รับการทดสอบเสร็จสมบูรณ์แล้ว เพื่อเพลิดเพลินกับตัวอย่างเหล่านี้ให้เต็มอิ่ม เราขอแนะนำให้คุณติดตั้ง [แอป Android อุปกรณ์ต่อพ่วง BLE] ซึ่งจำลองอุปกรณ์ต่อพ่วง BLE ด้วยบริการแบตเตอรี่ บริการวัดอัตราการเต้นของหัวใจ หรือบริการเทอร์โมมิเตอร์เพื่อสุขภาพ
ผู้เริ่มต้น
- ข้อมูลอุปกรณ์ - เรียกดูข้อมูลอุปกรณ์พื้นฐานจากอุปกรณ์ BLE
- ระดับแบตเตอรี่ - เรียกดูข้อมูลแบตเตอรี่จากอุปกรณ์ที่โฆษณาแบตเตอรี่ของอุปกรณ์ BLE
- รีเซ็ตพลังงาน - รีเซ็ตพลังงานที่ใช้จากอัตราการเต้นของหัวใจในการโฆษณาของอุปกรณ์ BLE
- พร็อพเพอร์ตี้ของลักษณะเฉพาะ - แสดงคุณสมบัติทั้งหมดของลักษณะเฉพาะหนึ่งๆ จากอุปกรณ์ BLE
- การแจ้งเตือน - เริ่มและหยุดการแจ้งเตือนลักษณะเฉพาะจากอุปกรณ์ BLE
- ยกเลิกการเชื่อมต่ออุปกรณ์ - ยกเลิกการเชื่อมต่อและรับการแจ้งเตือนจากการยกเลิกการเชื่อมต่อของอุปกรณ์ BLE หลังจากเชื่อมต่อแล้ว
- ดูลักษณะเฉพาะ - รับลักษณะทั้งหมดของบริการที่โฆษณาจากอุปกรณ์ BLE
- รับข้อบ่งชี้ - รับข้อบ่งชี้ลักษณะเฉพาะทั้งหมดของบริการที่โฆษณาจากอุปกรณ์ BLE
- ตัวกรองข้อมูลของผู้ผลิต - เรียกดูข้อมูลอุปกรณ์พื้นฐานจากอุปกรณ์ BLE ที่ตรงกับข้อมูลของผู้ผลิต
- ตัวกรองการยกเว้น - เรียกดูข้อมูลอุปกรณ์พื้นฐานจากอุปกรณ์ BLE ที่มีตัวกรองการยกเว้นพื้นฐาน
การรวมการดำเนินการหลายรายการ
- ลักษณะเฉพาะ GAP - รับลักษณะ GAP ทั้งหมดของอุปกรณ์ BLE
- ลักษณะเฉพาะของข้อมูลอุปกรณ์ - รับลักษณะข้อมูลอุปกรณ์ทั้งหมดของอุปกรณ์ BLE
- สูญเสียลิงก์ - ตั้งค่าลักษณะเฉพาะระดับการแจ้งเตือนของอุปกรณ์ BLE (readValue & writeValue)
- สำรวจบริการและลักษณะเฉพาะ - สำรวจบริการหลักทั้งหมดที่เข้าถึงได้และลักษณะเฉพาะจากอุปกรณ์ BLE
- เชื่อมต่อใหม่โดยอัตโนมัติ - เชื่อมต่อกับอุปกรณ์ BLE ที่ไม่ได้เชื่อมต่ออีกครั้งโดยใช้อัลกอริทึม Exponential Backoff
- อ่านค่าลักษณะที่มีการเปลี่ยนแปลง - อ่านระดับแบตเตอรี่และรับการแจ้งเตือนเกี่ยวกับการเปลี่ยนแปลงจากอุปกรณ์ BLE
- อ่านข้อบ่งชี้ - อ่านข้อบ่งชี้ทั้งหมดของลักษณะเฉพาะของบริการจากอุปกรณ์ BLE
- เขียนข้อบ่งชี้ - เขียนคำอธิบาย "คำอธิบายผู้ใช้เกี่ยวกับลักษณะเฉพาะ" ในอุปกรณ์ BLE
ตรวจสอบเดโมเว็บบลูทูธที่คัดสรรมาแล้วและโค้ดแล็บบลูทูธบนเว็บอย่างเป็นทางการด้วย
ห้องสมุด
- web-bluetooth-utils คือโมดูล npm ที่เพิ่มฟังก์ชันความสะดวกให้กับ API
- shim ของ Web Bluetooth API มีให้ใช้งานใน noble ซึ่งเป็นโมดูล Node.js BLE Central ที่ได้รับความนิยมมากที่สุด ซึ่งช่วยให้คุณสามารถทำเว็บแพ็ค/เบราว์เซอร์ระดับสูง โดยไม่ต้องใช้เซิร์ฟเวอร์ WebSocket หรือปลั๊กอินอื่นๆ
- angular-web-bluetooth คือโมดูลสำหรับ Angular ที่แยกต้นแบบทั้งหมดที่จำเป็นต่อการกำหนดค่า Web Bluetooth API ออก
เครื่องมือ
- เริ่มต้นใช้งานบลูทูธบนเว็บเป็นเว็บแอปง่ายๆ ที่จะสร้างโค้ดต้นแบบของ JavaScript ทั้งหมดเพื่อเริ่มโต้ตอบกับอุปกรณ์บลูทูธ ป้อนชื่ออุปกรณ์ บริการ และคุณสมบัติ กำหนดคุณสมบัติของอุปกรณ์ เท่านี้ก็เสร็จเรียบร้อย
- หากคุณเป็นนักพัฒนาซอฟต์แวร์บลูทูธอยู่แล้ว ปลั๊กอิน Web Bluetooth Developer Studio จะสร้างโค้ด JavaScript สำหรับเว็บบลูทูธสำหรับอุปกรณ์บลูทูธด้วย
เคล็ดลับ
หน้าภายในของบลูทูธมีให้ใช้งานใน Chrome ที่ about://bluetooth-internals
เพื่อให้คุณตรวจสอบทุกอย่างเกี่ยวกับอุปกรณ์บลูทูธในบริเวณใกล้เคียงได้ ซึ่งได้แก่ สถานะ บริการ ลักษณะเฉพาะ และข้อบ่งชี้
ฉันขอแนะนำให้ไปที่หน้าวิธีรายงานข้อบกพร่องบลูทูธบนเว็บอย่างเป็นทางการ เนื่องจากการแก้ไขข้อบกพร่องของบลูทูธอาจทำได้ยากในบางครั้ง
ขั้นตอนถัดไป
ตรวจสอบสถานะการใช้งานเบราว์เซอร์และแพลตฟอร์มก่อนเพื่อดูว่าส่วนใดของ Web Bluetooth API ที่กำลังมีการใช้งาน
แม้จะไม่สมบูรณ์ แต่นี่คือตัวอย่างสิ่งที่จะเกิดขึ้นในอนาคตอันใกล้
- การสแกนหาโฆษณา BLE ที่อยู่ใกล้เคียง
จะเกิดขึ้นกับ
navigator.bluetooth.requestLEScan()
- เหตุการณ์
serviceadded
ใหม่จะติดตามบริการ GATT บลูทูธที่พบใหม่ ขณะที่เหตุการณ์serviceremoved
จะติดตามบริการที่นําออกไปแล้ว เหตุการณ์servicechanged
ใหม่จะเริ่มทำงานเมื่อมีการเพิ่มหรือนำลักษณะและ/หรือข้อบ่งชี้ออกจากบริการ GATT ของบลูทูธ
แสดงการสนับสนุนสำหรับ API
คุณกำลังวางแผนจะใช้ Web Bluetooth API ใช่ไหม การสนับสนุนสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของคุณลักษณะต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนนั้นสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก
#WebBluetooth
และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร
แหล่งข้อมูล
- สแต็กโอเวอร์โฟลว์
- สถานะฟีเจอร์ของ Chrome
- ข้อบกพร่องในการใช้งาน Chrome
- ข้อกำหนดของเว็บบลูทูธ
- ปัญหาข้อมูลจำเพาะใน GitHub
- แอปจำลองอุปกรณ์ต่อพ่วง BLE
ข้อความแสดงการยอมรับ
ขอขอบคุณ Kayce Basques ที่อ่านบทความนี้ รูปภาพหลักของ SparkFun Electronics จากโบลเดอร์ สหรัฐอเมริกา