对于网页蓝牙(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入门

在本文中所使用的蓝牙设备是Micro:bit

关于蓝牙


在使用该组API之前必须要了解一些关于蓝牙的知识。

蓝牙设备分为中央设备(蓝牙客户端)与外围设备(蓝牙服务端),外围设备提供一些服务供中央设备连接访问。
中央设备可以与多个外围设备进行连接,但是外围设备同时只能与一个中央设备进行连接。
外围设备提供服务(service)供中央设备连接使用,每个服务包含一些特征值(characteristic),每个特征值可以读、写、和通知(Notifications)。
主要通过对特征值进行读、写、通知来使用外围设备的一些功能。

注意:要使用某个服务或特征值,必须要先知道其UUID

中央设备使用外围设备提供的服务的基本流程:

  1. 中央设备发现周围的外围设备,并根据其名称筛选出需要的外围设备,以及其提供的服务
  2. 连接到外围设备,获取外围设备提供的服务,获取服务中需要使用到的特征值
  3. 通过对特征值进行读、写、通知来实现我们想要的功能

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

再次提醒:在本文中所使用的蓝牙设备是Micro:bit

Github链接Web BlueTooth

Last modification:December 30th, 2020 at 04:05 pm