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) ซึ่งหมายความว่าคุณควรขอและเชื่อมต่อกับอุปกรณ์บลูทูธพลังงานต่ำที่อยู่ใกล้เคียงได้ ตลอดจนอ่าน/writeลักษณะบลูทูธ รับการแจ้งเตือน 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
โปรดทราบว่าคุณยังเพิ่ม Listener เหตุการณ์ 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()
และนำ 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
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
- Write Descriptor - เขียนคำอธิบาย "ลักษณะเฉพาะของผู้ใช้" ในอุปกรณ์ BLE
นอกจากนี้ โปรดดูตัวอย่าง Web Bluetooth ที่ดูแลจัดการและ Codelab อย่างเป็นทางการของ Web Bluetooth ด้วย
ห้องสมุด
- web-bluetooth-utils เป็นโมดูล npm ที่เพิ่มฟังก์ชันบางอย่างที่สะดวกให้กับ API
- Shim สำหรับ 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
ใหม่จะติดตามบริการ Bluetooth GATT ที่เพิ่งค้นพบ ขณะที่เหตุการณ์serviceremoved
จะติดตามบริการที่นำออกservicechanged
เหตุการณ์ใหม่จะเริ่มต้นเมื่อมีการเพิ่มหรือนำลักษณะและ/หรือตัวระบุออกจากบริการ GATT ของบลูทูธ
แสดงการสนับสนุน API
คุณกำลังวางแผนที่จะใช้ Web Bluetooth API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chrome จัดลําดับความสําคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ
ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก
#WebBluetooth
และแจ้งให้เราทราบว่าคุณใช้งานที่ไหนและอย่างไร
แหล่งข้อมูล
- สแต็กโอเวอร์โฟลว์
- สถานะฟีเจอร์ของ Chrome
- ข้อบกพร่องในการใช้งาน Chrome
- ข้อกําหนดของ Web Bluetooth
- ปัญหาด้านข้อมูลจำเพาะใน GitHub
- แอปจำลองอุปกรณ์ต่อพ่วง BLE
กิตติกรรมประกาศ
ขอขอบคุณ Kayce Basques ที่ตรวจสอบบทความนี้ รูปภาพหลักโดย SparkFun Electronics จากโบลเดอร์ สหรัฐอเมริกา