对于网页蓝牙（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

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

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

Github链接Web BlueTooth