对于网页蓝牙(WebBluetooth)的基本介绍与简单的使用
WebBlueTooth简介
WebBlueTooth项目意在制定一组Web蓝牙API规范,使得人们在浏览器上就能够访问自己的蓝牙设备。但是该项目目前并未成为W3C标准,也就是说该项目还在实验阶段,但是目前我们已经可以使用该项目的部分API,在MDN上也有Web BlueTooth API,因为并未标准化的原因,该组API只能在谷歌浏览器上使用,而在移动端还需要安卓6.0以上。
注意:因其信息敏感,所以Web BlueTooth API必须在使用https的页面使用。
参考文档
Web BlueTooth 项目地址
MDN Bluetooth API文档
通过 Web 控制蓝牙设备:WebBluetooth入门
关于蓝牙
在使用该组API之前必须要了解一些关于蓝牙的知识。
蓝牙设备分为中央设备(蓝牙客户端)与外围设备(蓝牙服务端),外围设备提供一些服务供中央设备连接访问。
中央设备可以与多个外围设备进行连接,但是外围设备同时只能与一个中央设备进行连接。
外围设备提供服务(service)供中央设备连接使用,每个服务包含一些特征值(characteristic),每个特征值可以读、写、和通知(Notifications)。
主要通过对特征值进行读、写、通知来使用外围设备的一些功能。
注意:要使用某个服务或特征值,必须要先知道其UUID
中央设备使用外围设备提供的服务的基本流程:
- 中央设备发现周围的外围设备,并根据其名称筛选出需要的外围设备,以及其提供的服务
- 连接到外围设备,获取外围设备提供的服务,获取服务中需要使用到的特征值
- 通过对特征值进行读、写、通知来实现我们想要的功能
WebBlueTooth API
发现与连接
Bluetooth.requestDevice() 接口,该接口会在浏览器打开一个供用户选择的对话框,让用户选择需要连接的蓝牙设备,其中蓝牙设备列表是根据接口参数筛选过的。
MDN文档链接Bluetooth.requestDevice()
语法如下:
navigator.bluetooth.requestDevice([options]).then(
function(bluetoothDevice) {
...
});
其中options是过滤器选项,下面是示例:
//过滤器
var options = {
filters: [{ namePrefix: 'BBC' }],
optionalServices: [DEVICE_INFORMATION_SERVICE]
};
可以通过使用acceptAllDevices: true
选项来列出所有的可连接设备
Device.gatt.connect() 方法,使用在Bluetooth.requestDevice()方法获取到的device来调用该方法,来连接到用户选择的外围设备的GATT服务器。
该方法在MDN中没有找到相关文档,但是社区中存在着的大量的包含该方法的demo
语法如下:
Device.gatt.connect().then(
function(server){
...
}
,function(error){
...
});
在使用该方法成功连接到GATT服务器后,可以监听连接断开的事件,在连接断开后执行一些操作。
如下:
Device.addEventListener('gattserverdisconnected', function () {
...
});
Server.getPrimaryServices() 方法,使用Device.gatt.connect()方法获取的server来调用该方法,获取在该GATT服务器上可用的服务(Services是一个服务数组,里面每个元素都是一个服务)。
语法如下:
Server.getPrimaryServices()
.then(Services => {
...
});
Service.getCharacteristics() 方法,使用Server.getPrimaryServices()方法获取到的service来调用该方法(注意是Services数组里的一个元素/服务),获取该服务的特征值(Characteristics与上面的Services一样也是一个数组,里面的每个元素都是一个特征值)。
语法如下:
service.getCharacteristics()
.then(Characteristics => {
...
});
读、写、通知
在获取到所需要的特征值时,可以对该值进行读、写、通知。
对特征值读(read)
代码如下:
characteristic.readValue().then(function(v){
...
});
对特征值写(write)
代码如下:
let v=new Uint8Array(8);
characteristic.writeValue(v).then(
_ =>{
...
});
对特征值启用通知(notifications):
代码如下:
//启用通知
characteristic.startNotifications()
.then(_ => {
//监听特征值改变
characteristic.addEventListener('characteristicvaluechanged', _ => {
...
});
});
完整demo
Github链接Web BlueTooth