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 เวอร์ชันเก่า ให้เปิดใช้ Flag #experimental-web-platform-features
ใน about://flags
พร้อมใช้งานสำหรับช่วงทดลองใช้จากต้นทาง
ก่อนหน้านี้ Chrome ได้เพิ่มฟีเจอร์นี้ใน Chrome 53 เป็นเวอร์ชันทดลองเวอร์ชันต้นทางสำหรับ ChromeOS, Android และ Mac เพื่อให้ได้รับความคิดเห็นจากนักพัฒนาซอฟต์แวร์ที่ใช้ Web Bluetooth API มากที่สุด
การทดลองใช้สิ้นสุดลงเรียบร้อยแล้วในเดือนมกราคม 2017
ข้อกำหนดด้านความปลอดภัย
หากต้องการทำความเข้าใจข้อเสียด้านความปลอดภัย เราขอแนะนำให้อ่านโพสต์รูปแบบความปลอดภัยของ Web Bluetooth จาก Jeffrey Yasskin ซึ่งเป็นวิศวกรซอฟต์แวร์ในทีม Chrome ที่ทำงานเกี่ยวกับข้อกำหนดของ Web Bluetooth API
HTTPS เท่านั้น
เนื่องจาก API เวอร์ชันทดลองนี้เป็นฟีเจอร์ใหม่ที่มีประสิทธิภาพซึ่งเพิ่มลงในเว็บ เราจึงให้บริการ API นี้ในบริบทที่ปลอดภัยเท่านั้น ซึ่งหมายความว่าคุณจะต้องสร้างโดยคำนึงถึง TLS
ต้องใช้ท่าทางสัมผัสของผู้ใช้
การตรวจหาอุปกรณ์บลูทูธด้วยnavigator.bluetooth.requestDevice
ต้องได้รับการทริกเกอร์โดยท่าทางสัมผัสของผู้ใช้ เช่น การสัมผัสหรือการคลิกเมาส์ เนื่องจากเป็นฟีเจอร์ด้านความปลอดภัย เรากําลังพูดถึงการฟังเหตุการณ์ pointerup
, click
และ touchend
button.addEventListener('pointerup', function(event) {
// Call navigator.bluetooth.requestDevice
});
เข้าสู่โค้ด
Web Bluetooth API อาศัย Promises ของ JavaScript เป็นอย่างมาก หากไม่คุ้นเคยกับ Promise ให้ดูบทแนะนำ Promise ที่ยอดเยี่ยมนี้ อีกอย่างคือ () => {}
คือ ฟังก์ชันลูกศร ECMAScript 2015
ขออุปกรณ์บลูทูธ
ข้อกำหนดเฉพาะของ Web Bluetooth API เวอร์ชันนี้ช่วยให้เว็บไซต์ที่ทำงานในบทบาท Central เชื่อมต่อกับเซิร์ฟเวอร์ GATT ระยะไกลผ่านการเชื่อมต่อ BLE ได้ โดยรองรับการสื่อสารระหว่างอุปกรณ์ที่ใช้บลูทูธ 4.0 ขึ้นไป
เมื่อเว็บไซต์ขอสิทธิ์เข้าถึงอุปกรณ์ที่อยู่ใกล้เคียงโดยใช้ navigator.bluetooth.requestDevice
เบราว์เซอร์จะแสดงตัวเลือกอุปกรณ์ให้ผู้ใช้เลือกอุปกรณ์ 1 เครื่องหรือยกเลิกคำขอ
ฟังก์ชัน navigator.bluetooth.requestDevice()
จะรับออบเจ็กต์ที่ต้องระบุซึ่งกำหนดตัวกรอง ตัวกรองเหล่านี้ใช้เพื่อแสดงเฉพาะอุปกรณ์ที่ตรงกับบริการ GATT ของบลูทูธที่โฆษณาและ/หรือชื่ออุปกรณ์
ตัวกรองบริการ
เช่น หากต้องการขออุปกรณ์บลูทูธที่โฆษณา Bluetooth GATT Battery Service ให้ทำดังนี้
navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
.then(device => { /* … */ })
.catch(error => { console.error(error); });
อย่างไรก็ตาม หากบริการ 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
โปรดทราบว่าคุณยังเพิ่มcharacteristicvaluechanged
โปรแกรมรับฟังเหตุการณ์ในลักษณะเพื่อจัดการการอ่านค่าได้ด้วย ดูตัวอย่างการอ่านค่าที่เปลี่ยนแปลงของลักษณะเพื่อดูวิธีจัดการการแจ้งเตือน 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 ของบลูทูธนั้นง่ายพอๆ กับการอ่าน ในครั้งนี้ เรามาลองใช้จุดควบคุมอัตราการเต้นของหัวใจเพื่อรีเซ็ตค่าของช่องพลังงานที่ใช้ไปเป็น 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()
และนำ 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
event
listener ที่มีอยู่ โปรดทราบว่าการดำเนินการนี้จะไม่หยุดการสื่อสารของอุปกรณ์บลูทูธหากมีแอปอื่นสื่อสารกับอุปกรณ์บลูทูธอยู่แล้ว ดูตัวอย่างการยกเลิกการเชื่อมต่ออุปกรณ์และตัวอย่างการเชื่อมต่อใหม่อัตโนมัติเพื่อดูรายละเอียดเพิ่มเติม
อ่านและเขียนลงในตัวระบุบลูทูธ
ตัวระบุ 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
ตัวอย่างเว็บบลูทูธทั้งหมดด้านล่างนี้ได้รับการทดสอบเรียบร้อยแล้ว หากต้องการใช้ตัวอย่างเหล่านี้อย่างเต็มที่ เราขอแนะนำให้คุณติดตั้ง [แอปจำลองอุปกรณ์ต่อพ่วง BLE สำหรับ Android] ซึ่งจำลองอุปกรณ์ต่อพ่วง BLE ที่มีบริการแบตเตอรี่ บริการวัดอัตราการเต้นของหัวใจ หรือบริการเครื่องวัดอุณหภูมิเพื่อสุขภาพ
ผู้เริ่มต้น
- ข้อมูลอุปกรณ์ - เรียกข้อมูลอุปกรณ์พื้นฐานจากอุปกรณ์ BLE
- ระดับแบตเตอรี่ - ดึงข้อมูลแบตเตอรี่จากอุปกรณ์ BLE ที่โฆษณาข้อมูลแบตเตอรี่
- รีเซ็ตพลังงาน - รีเซ็ตพลังงานที่ใช้ไปจากอุปกรณ์ BLE ที่โฆษณาอัตราการเต้นของหัวใจ
- พร็อพเพอร์ตี้ลักษณะ - แสดงพร็อพเพอร์ตี้ทั้งหมดของลักษณะหนึ่งๆ จากอุปกรณ์ BLE
- การแจ้งเตือน - เริ่มและหยุดการแจ้งเตือนลักษณะจากอุปกรณ์ BLE
- ยกเลิกการเชื่อมต่ออุปกรณ์ - ยกเลิกการเชื่อมต่อและรับการแจ้งเตือนจากการยกเลิกการเชื่อมต่ออุปกรณ์ BLE หลังจากเชื่อมต่อ
- รับลักษณะ - รับลักษณะทั้งหมดของบริการที่โฆษณาจากอุปกรณ์ BLE
- รับตัวบ่งชี้ - รับตัวบ่งชี้ของลักษณะทั้งหมดของบริการที่โฆษณาจากอุปกรณ์ BLE
- ตัวกรองข้อมูลผู้ผลิต - ดึงข้อมูลอุปกรณ์พื้นฐานจากอุปกรณ์ BLE ที่ตรงกับข้อมูลผู้ผลิต
- ตัวกรองการยกเว้น - ดึงข้อมูลอุปกรณ์พื้นฐานจากอุปกรณ์ BLE ที่มีตัวกรองการยกเว้นพื้นฐาน
การรวมการดำเนินการหลายรายการ
- ลักษณะ GAP - รับลักษณะ GAP ทั้งหมดของอุปกรณ์ BLE
- ลักษณะข้อมูลอุปกรณ์ - รับลักษณะข้อมูลอุปกรณ์ทั้งหมดของอุปกรณ์ BLE
- การสูญเสียลิงก์ - ตั้งค่าแอตทริบิวต์ระดับการแจ้งเตือนของอุปกรณ์ BLE (readValue และ writeValue)
- สำรวจบริการและลักษณะ - สำรวจบริการหลักที่เข้าถึงได้ทั้งหมดและลักษณะของบริการเหล่านั้นจากอุปกรณ์ BLE
- เชื่อมต่อใหม่อัตโนมัติ - เชื่อมต่อกับอุปกรณ์ BLE ที่ตัดการเชื่อมต่อโดยใช้อัลกอริทึม Backoff แบบทวีคูณ
- อ่านค่าลักษณะที่เปลี่ยนแปลง - อ่านระดับแบตเตอรี่และรับการแจ้งเตือนการเปลี่ยนแปลงจากอุปกรณ์ BLE
- อ่านตัวระบุ - อ่านตัวระบุของลักษณะทั้งหมดของบริการจากอุปกรณ์ BLE
- เขียนตัวระบุ - เขียนไปยังตัวระบุ "คำอธิบายลักษณะของผู้ใช้" ในอุปกรณ์ BLE
นอกจากนี้ โปรดดูตัวอย่าง Web Bluetooth ที่ดูแลจัดการและ Codelab อย่างเป็นทางการของ Web Bluetooth ด้วย
ห้องสมุด
- web-bluetooth-utils เป็นโมดูล npm ที่เพิ่มฟังก์ชันบางอย่างที่สะดวกให้กับ API
- ชิม Web Bluetooth API มีอยู่ใน noble ซึ่งเป็นโมดูล BLE ของ Node.js ที่ได้รับความนิยมมากที่สุด ซึ่งจะช่วยให้คุณ webpack/browserify noble ได้โดยไม่ต้องใช้เซิร์ฟเวอร์ WebSocket หรือปลั๊กอินอื่นๆ
- angular-web-bluetooth เป็นโมดูลสําหรับ Angular ที่จะแยกข้อมูลทั่วไปทั้งหมดที่จําเป็นสําหรับการกําหนดค่า Web Bluetooth API
เครื่องมือ
- เริ่มต้นใช้งาน Web Bluetooth เป็นเว็บแอปง่ายๆ ที่จะสร้างโค้ดเทมเพลต JavaScript ทั้งหมดเพื่อเริ่มโต้ตอบกับอุปกรณ์บลูทูธ ป้อนชื่ออุปกรณ์ บริการ ลักษณะ กำหนดพร็อพเพอร์ตี้ แล้วคุณก็พร้อมใช้งาน
- หากคุณเป็นนักพัฒนาซอฟต์แวร์บลูทูธอยู่แล้ว Web Bluetooth Developer Studio Plugin จะสร้างโค้ด JavaScript ของ Web Bluetooth สำหรับอุปกรณ์บลูทูธของคุณด้วย
เคล็ดลับ
หน้าข้อมูลภายในของบลูทูธพร้อมใช้งานใน Chrome ที่ about://bluetooth-internals
เพื่อให้คุณตรวจสอบทุกอย่างเกี่ยวกับอุปกรณ์บลูทูธที่อยู่ใกล้เคียงได้ ไม่ว่าจะเป็นสถานะ บริการ ลักษณะ และตัวระบุ
นอกจากนี้ เราขอแนะนำให้ดูหน้าวิธีรายงานข้อบกพร่องเกี่ยวกับบลูทูธบนเว็บอย่างเป็นทางการด้วย เนื่องจากบางครั้งการแก้ไขข้อบกพร่องเกี่ยวกับบลูทูธอาจทำได้ยาก
ขั้นตอนถัดไป
ตรวจสอบสถานะการใช้งานเบราว์เซอร์และแพลตฟอร์มก่อนเพื่อดูว่าขณะนี้มีการใช้ Web Bluetooth API ส่วนใดอยู่
แม้ว่าจะยังไม่เสร็จสมบูรณ์ แต่เราขอพาไปดูตัวอย่างสิ่งที่จะเกิดขึ้นในอนาคตอันใกล้
- การสแกนหาโฆษณา BLE ที่อยู่ใกล้เคียงจะดำเนินการกับ
navigator.bluetooth.requestLEScan()
- เหตุการณ์
serviceadded
ใหม่จะติดตามบริการ GATT ของบลูทูธที่ค้นพบใหม่ ส่วนเหตุการณ์serviceremoved
จะติดตามบริการที่นําออกservicechanged
เหตุการณ์ใหม่จะเริ่มต้นเมื่อมีการเพิ่มหรือนำลักษณะและ/หรือตัวบ่งชี้ออกจากบริการ GATT ของบลูทูธ
แสดงการสนับสนุน API
คุณกำลังวางแผนที่จะใช้ Web Bluetooth API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chrome จัดลําดับความสําคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ
ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #WebBluetooth
และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร
แหล่งข้อมูล
- Stack Overflow
- สถานะฟีเจอร์ของ Chrome
- ข้อบกพร่องในการใช้งาน Chrome
- ข้อมูลจำเพาะของ Web Bluetooth
- ปัญหาเกี่ยวกับข้อกำหนดใน GitHub
- แอปจำลองอุปกรณ์ต่อพ่วง BLE
ขอขอบคุณ
ขอขอบคุณ Kayce Basques ที่ตรวจสอบบทความนี้ รูปภาพหลักโดย SparkFun Electronics จากโบลเดอร์ สหรัฐอเมริกา